refactor: layout

bpolaszek · Apr 25, 2024 · c4df887 · c4df887
1 parent dec71b9
commit c4df887
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/components/layout/Layout.vue b/components/layout/Layout.vue
@@ -2,8 +2,9 @@
   <div class="flex flex-col h-full overflow-hidden">
     <LayoutTopNavigation />
     <div class="grow relative">
-      <div class="absolute inset-0 overflow-auto">
-        <section class="mx-auto max-w-7xl py-4 px-4 sm:px-6 lg:px-8">
+      <div class="absolute inset-0 flex flex-col">
+        <section
+          class="mx-auto max-w-7xl w-full py-4 px-4 sm:px-6 lg:px-8 static top-0 bg-white">
           <slot name="header" :title="title" :subtitle="subtitle">
             <LayoutPageHeader :title="title" :subtitle="subtitle">
               <template #title-actions>
@@ -15,8 +16,16 @@
             </LayoutPageHeader>
           </slot>
         </section>
-        <div class="mx-auto max-w-7xl py-4 px-4 sm:px-6 lg:px-8">
-          <slot />
+        <div class="grow relative overflow-hidden">
+          <div class="absolute inset-0 overflow-auto">
+            <section
+              :class="[
+                nowrap || 'mx-auto max-w-7xl w-full py-4 px-4 sm:px-6 lg:px-8',
+                'h-full',
+              ]">
+              <slot />
+            </section>
+          </div>
         </div>
       </div>
     </div>
@@ -30,6 +39,7 @@
 type Props = {
   title: string
   subtitle?: string
+  nowrap?: boolean
 }
 
 defineProps<Props>()

diff --git a/error.vue b/error.vue
@@ -2,12 +2,14 @@
   <ConfirmationDialog v-if="confirmationDialog" v-bind="confirmationDialog" />
   <div
     class="flex flex-col items-center justify-between h-full max-w-5xl mx-auto pt-10 pb-32">
-    <header class="flex items-center justify-center gap-2">
-      <img
-        class="size-16 shrink-0 grow-0 -ml-10"
-        src="/assets/images/logo.svg"
-        alt="Meiliweb" />
-      <span class="text-3xl font-semibold">Meiliweb</span>
+    <header>
+      <a href="/" class="flex items-center justify-center gap-2">
+        <img
+          class="size-16 shrink-0 grow-0 -ml-10"
+          src="/assets/images/logo.svg"
+          alt="Meiliweb" />
+        <span class="text-3xl font-semibold">Meiliweb</span>
+      </a>
     </header>
 
     <main>