Merge pull request #35 from connorabbas/develop

better layout

Author: connorabbas

resources/js/Components/Container.vue

@@ -5,13 +5,21 @@ const props = defineProps({
         default: true,
         required: false,
     },
+    fluid: {
+        type: Boolean,
+        default: true,
+        required: false,
+    },
 });
 </script>
 
 <template>
     <div
-        :class="[spacedMobile ? 'px-4' : 'px-0']"
-        class="max-w-screen-2xl mx-auto sm:px-4"
+        :class="[
+            { 'max-w-screen-2xl mx-auto': !fluid },
+            spacedMobile ? 'px-4' : 'px-0',
+            'md:px-8',
+        ]"
     >
         <slot />
     </div>

resources/js/Layouts/AuthenticatedLayout.vue

@@ -123,7 +123,6 @@ watchEffect(() => {
                                         :model="userMenuItems"
                                         popup
                                         ref="user-menu"
-                                        class="shadow"
                                     />
                                     <Button
                                         text

resources/js/Pages/Dashboard.vue

@@ -10,7 +10,7 @@ import Container from '@/Components/Container.vue';
             <h1 class="font-bold text-2xl leading-tight">Dashboard</h1>
         </template>
         <Container>
-            <div class="py-12">
+            <div class="py-4 md:py-8">
                 <Card>
                     <template #content>
                         <p class="m-0">You are logged in!</p>

resources/js/Pages/Profile/Edit.vue

@@ -25,7 +25,7 @@ const props = defineProps({
         </template>
 
         <Container>
-            <div class="py-12">
+            <div class="py-4 md:py-8">
                 <div class="space-y-6">
                     <Card
                         :pt="{