From be218e2087fd344a89b7244648c401e59f3379dc Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 17 Sep 2025 13:20:03 +0700
Subject: [PATCH] feat(public): add padding dynamic in main frame

---
 app/assets/css/main.css                    | 28 +++++++++++++-
 app/components/content/dashboard/index.vue |  4 +-
 app/layouts/default.vue                    | 43 +++++++++++++++++++++-
 3 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 7aab15b5..7e7f0b70 100644
--- a/app/assets/css/main.css
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/app/components/content/dashboard/index.vue b/app/components/content/dashboard/index.vue
index e2fe0993..71167dac 100644
--- a/app/components/content/dashboard/index.vue
+++ b/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>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 7bce9c00..1f62236f 100644
--- a/app/layouts/default.vue
+++ b/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>