better container

Author: connorabbas

resources/js/Components/Container.vue

@@ -1,5 +1,5 @@
 <script setup>
-defineProps({
+const props = defineProps({
     spacedMobile: {
         type: Boolean,
         default: true,
@@ -10,15 +10,25 @@ defineProps({
         default: false,
         required: false,
     },
+    vertical: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });
 </script>
 
 <template>
-    <div :class="[
-        { 'max-w-(--breakpoint-2xl) mx-auto': !fluid },
-        spacedMobile ? 'px-4' : 'px-0',
-        'md:px-8',
-    ]">
+    <div
+        class="md:px-8"
+        :class="[
+            {
+                'max-w-(--breakpoint-2xl) mx-auto': !props.fluid,
+                'py-4 md:py-8 space-y-4 md:space-y-8': props.vertical
+            },
+            props.spacedMobile ? 'px-4' : 'px-0',
+        ]"
+    >
         <slot />
     </div>
 </template>

resources/js/Pages/Admin/Users/Index.vue

@@ -57,7 +57,7 @@ const {
     <AuthenticatedAdminLayout
         :breadcrumbs="breadcrumbs"
     >
-        <Container fluid>
+        <Container vertical fluid>
             <PageTitleSection>
                 <template #title>
                     {{ pageTitle }}