From 67fcde925ec5a030c9fe0b68a743828bc3ff992e Mon Sep 17 00:00:00 2001
From: Lukas Lanzner <LanznerLukas@dotspace.dev>
Date: Fri, 18 Oct 2024 11:05:40 +0200
Subject: [PATCH] feat(ui): Introduce Mobile Layout default for every page

---
 layouts/SplitView.vue | 21 ++++++++++-----------
 layouts/default.vue   |  6 ++++--
 pages/index.vue       |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/layouts/SplitView.vue b/layouts/SplitView.vue
index 64b4ea1..57bf311 100644
--- a/layouts/SplitView.vue
+++ b/layouts/SplitView.vue
@@ -1,24 +1,23 @@
 <template>
-  <div class="flex flex-col h-screen max-h-screen max-w-full">
+  <div class="flex basis-1/3 flex-col h-screen max-h-screen max-w-screen-sm">
 
     <div class="h-1/6">
       <!-- possible Title and nav -->
       <slot name="header"/>
     </div>
 
-    <div class="flex-1 flex flex-col">
-      <div class="flex-1">
-        <!-- CONTENT WITH NO ACTION! -->
-        <slot name="content"/>
-      </div>
+    <div class="flex-1">
+      <!-- CONTENT WITH NO ACTION! -->
+      <slot name="content"/>
+    </div>
 
-      <div class="flex-1 content-end">
-        <div class="flex flex-row justify-center">
-          <!-- Action buttons like 80% width, stackable until 50% of height -->
-          <slot name="bottom"/>
-        </div>
+    <div class="basis-1/2 content-end">
+      <div class="flex flex-row justify-center">
+        <!-- Action buttons like 80% width, stackable until 50% of height -->
+        <slot name="bottom"/>
       </div>
 
+
     </div>
   </div>
 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
index 303eb6c..38417b6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,7 @@
 <template>
-  <div>
-    <slot/>
+  <div class="flex justify-center">
+    <div class="max-w-screen-sm w-screen">
+      <slot/>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index f433ca2..96ea08f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,7 +11,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <div class="h-screen bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
+  <div class="bg-gradient-to-b from-indigo-500 via-purple-500 to-pink-500">
     <DashboardView>
       <template #header>
         <div>