qr-generator: Improve style and borders

eliandoran · Jul 10, 2024 · b8739a5 · b8739a5
1 parent 8c8a00a
commit b8739a5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/src/lib/components/stack-view.svelte b/src/lib/components/stack-view.svelte
@@ -29,6 +29,8 @@
             </HeaderButton>
         {/if}
     </header>
+{:else}
+    <header class="app-header hidden"></header>
 {/if}
 
 <div class="inner-wrapper"

diff --git a/src/lib/components/tool.svelte b/src/lib/components/tool.svelte
@@ -13,7 +13,7 @@
     }
 
     .outer-wrapper :global(header.app-header:first-of-type) {
-        border-top: unset;
+        border-top: unset !important;
     }
 
     @media (min-width: 920px) {

diff --git a/src/routes/qr-generator/+page.svelte b/src/routes/qr-generator/+page.svelte
@@ -79,7 +79,7 @@
 </script>
 
 <Tool>
-  <TwoColumnView leftTitle="QR code settings" rightTitle="QR code preview" hasPadding={false}>
+  <TwoColumnView leftTitle="QR code settings" rightTitle="QR code preview" hasPadding={false} mobileFillBehaviour="top">
     <div slot="left" class="fill-to-parent">
       <WarningBox message={errorMessage} />
 
@@ -266,6 +266,10 @@
     flex-direction: column;
   }
 
+  [slot="left"] :global(textarea) {
+    min-height: 6em;
+  }
+
   .columns {
     display: flex;
   }

diff --git a/static/style.css b/static/style.css
@@ -241,6 +241,14 @@ input[type="date"] {
     height: 100%;    
 }    
 
+.fill-to-parent {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;    
+}
+
 .cm-scroller {
     font-family: var(--font-monospace) !important;
 }