From 0b55a50d763bd540f8062688e837cea3b2616665 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Sun, 24 Jul 2022 19:02:45 +0200
Subject: [PATCH] feat: preview fullWidthInvoice setting closer to reality

---
 src/components/Page.tsx |  2 +-
 src/routes/index.tsx    | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 945f096..51c9ab6 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -71,7 +71,7 @@ const Page: FlowComponent = (props) => {
           {lastSavedWords()}
         </span>
       </div>
-      <div class="w-[900px] lg:w-[1000px] xl:w-[1100px] xxl:w-[1200px] print:w-full shrink-0 scale-75 md:scale-90 lg:scale-100 origin-top print:scale-100 shadow-md print:shadow-none bg-white p-5 print:p-0">
+      <div class="w-[900px] lg:w-[1000px] xl:w-[1100px] xxl:w-[1200px] print:w-full shrink-0 scale-75 md:scale-90 lg:scale-100 origin-top print:scale-100 shadow-md print:shadow-none bg-white py-5 print:p-0">
         {props.children}
       </div>
     </div>
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 1c2b0f6..311a076 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -92,7 +92,13 @@ export default function Home() {
   });
 
   const InnerPadding: FlowComponent = (props) => (
-    <div classList={{ "mx-16 print:mx-[11mm]": state.fullWidthInvoice }}>
+    <div
+      classList={{
+        "mx-16": true,
+        "print:mx-0": !state.fullWidthInvoice,
+        "print:mx-[11mm]": state.fullWidthInvoice,
+      }}
+    >
       {props.children}
     </div>
   );
@@ -334,7 +340,14 @@ export default function Home() {
               <Conclusion />
               <LufraiWatermark />
             </InnerPadding>
-            <SwissInvoice value={invoiceData()} />
+            <div
+              classList={{
+                "mx-16 print:mx-0": true,
+                "mx-0": state.fullWidthInvoice,
+              }}
+            >
+              <SwissInvoice value={invoiceData()} />
+            </div>
           </Page>
         </Show>
       </>