style(ui): max width & padding bottom

Signed-off-by: Neko Ayaka <[email protected]>

Author: nekomeowww

app/components/Scan.vue

@@ -319,7 +319,7 @@ function now() {
 </script>
 
 <template>
-  <div items-left flex flex-col gap4>
+  <div items-left flex flex-col gap-4>
     <pre v-if="error" overflow-x-auto text-red v-text="error" />
 
     <div w-full flex flex-wrap gap-2>

app/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div h-full w-full flex flex-col>
+  <div max-w="full sm:250" mx-auto h-full w-full flex flex-col>
     <header flex flex-col gap-4 px-4 pb-4 pt-4>
       <nav flex items-center>
         <div w-40 flex="~" items-center gap-2 text-4xl>

app/pages/index.vue

@@ -47,7 +47,7 @@ async function onFileChange(file?: File) {
 </script>
 
 <template>
-  <div px="4" flex="~ col" h-full w-full gap-4 py-2>
+  <div px="4" flex="~ col" h-full w-full gap-4 pb-8 pt-2>
     <div flex="~ col sm:row" gap="6 sm:2">
       <InputFile @file="onFileChange">
         <div text="neutral-600 dark:neutral-400" min-w-46 flex justify-center px-4 py-2>
@@ -73,7 +73,7 @@ async function onFileChange(file?: File) {
     </div>
     <div
       v-if="readPhase === ReadPhase.Ready && data"
-      h-full w-full flex justify-center pb-8
+      h-full w-full flex justify-center
     >
       <Generate
         :max-scans-per-second="throttledFps"

app/pages/scan.vue

@@ -5,7 +5,7 @@ const throttledFps = useDebounce(fps, 500)
 </script>
 
 <template>
-  <div px-4 pt-4 space-y-4>
+  <div px-4 pb-8 pt-2 space-y-4>
     <div w-full inline-flex flex-row items-center>
       <span min-w-40>
         <span pr-2 text-zinc-400>Ideal scans</span>