feat(public): add padding dynamic in main frame

app/assets/css/main.css

@@ -332,7 +332,8 @@ body {
 
 /* Form Error Styling */
 .field-error-info {
-  @apply text-xs ml-1;
+  font-size: 0.75rem;
+  margin-left: 0.25rem;
   color: hsl(var(--destructive));
   /* font-size: 0.875rem; */
   margin-top: 0.25rem;
@@ -340,3 +341,28 @@ body {
 }
 
 /* .rounded-md { border-radius: var */
+
+/* Dashboard grid utility */
+.dashboard-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+@media (min-width: 768px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1280px) {
+  .dashboard-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 1.25rem;
+  }
+}

app/components/content/dashboard/index.vue

@@ -121,10 +121,10 @@ onMounted(() => {
       </div>
     </div>
     <main class="my-6 flex flex-1 flex-col gap-4 md:gap-8">
-      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-5">
+  <div class="dashboard-grid">
         <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </div>
-      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-5">
+  <div class="dashboard-grid">
         <Card v-for="n in 3" :key="n">
           <CardHeader>
             <CardTitle>Recent Sales</CardTitle>

app/layouts/default.vue

@@ -45,6 +45,8 @@ const contentContent = computed(() => {
   margin-right: auto;
   border-radius: 0.375rem;
   padding-bottom: 5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
 .cf-container > *,
@@ -82,15 +84,54 @@ const contentContent = computed(() => {
   border-radius: 0.375rem;
   border: 1px solid hsl(var(--border));
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+  padding: 1rem;
 }
 
 .cf-frame {
   margin-left: auto;
   margin-right: auto;
-  padding: 0.75rem;
+  padding: 1rem;
   background-color: hsl(var(--background));
   border-radius: 0.375rem;
   border: 1px solid hsl(var(--border));
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  max-width: 100%;
+}
+
+@media (min-width: 640px) {
+  .cf-container,
+  .cf-container-lg,
+  .cf-container-md,
+  .cf-container-sm {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .cf-frame {
+    padding: 2rem;
+  }
+
+  .cf-frame-width {
+    padding: 2rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .cf-container,
+  .cf-container-lg,
+  .cf-container-md,
+  .cf-container-sm {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
+  .cf-frame {
+    padding: 3rem;
+  }
+
+  .cf-frame-width {
+    padding: 3rem;
+  }
 }
 </style>