From 831a827ef7c76b7422b3039773d49b69db98220c Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Wed, 18 Mar 2026 09:41:47 +0900
Subject: [PATCH] feat: Implement compact pagination/table header styling for
 data tables within dashboard panels.

---
 .../ui/data-table/DataTableLayout.vue         |  6 +--
 .../Dashboard/components/DashboardPanel.vue   | 43 ++++++++++++++++++-
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/ui/data-table/DataTableLayout.vue b/src/components/ui/data-table/DataTableLayout.vue
index ea668fd2..9acf94bd 100644
--- a/src/components/ui/data-table/DataTableLayout.vue
+++ b/src/components/ui/data-table/DataTableLayout.vue
@@ -259,8 +259,8 @@
             </div>
         </div>
 
-        <div v-if="showPagination" class="mt-4 flex w-full items-center gap-3 mb-1">
-            <div v-if="pageSizes.length" class="inline-flex items-center flex-1 justify-end gap-2">
+        <div v-if="showPagination" class="dt-pagination mt-4 flex w-full items-center gap-3 mb-1">
+            <div v-if="pageSizes.length" class="dt-pagination-sizes inline-flex items-center flex-1 justify-end gap-2">
                 <span class="text-xs text-muted-foreground truncate">{{ t('table.pagination.rows_per_page') }}</span>
                 <Select v-model="pageSizeValue">
                     <SelectTrigger size="sm">
@@ -296,7 +296,7 @@
                     <PaginationNext />
                 </PaginationContent>
             </Pagination>
-            <div class="flex-1"></div>
+            <div class="dt-pagination-spacer flex-1"></div>
         </div>
     </div>
 </template>
diff --git a/src/views/Dashboard/components/DashboardPanel.vue b/src/views/Dashboard/components/DashboardPanel.vue
index fb43909b..44e1ad6e 100644
--- a/src/views/Dashboard/components/DashboardPanel.vue
+++ b/src/views/Dashboard/components/DashboardPanel.vue
@@ -29,7 +29,7 @@
         </template>
 
         <template v-else-if="panelKey && panelComponent">
-            <div class="dashboard-panel h-full w-full overflow-y-auto">
+            <div class="dashboard-panel is-compact-table h-full w-full overflow-y-auto">
                 <component :is="panelComponent" v-bind="widgetProps" />
             </div>
         </template>
@@ -150,4 +150,45 @@
         border-radius: 0;
         background: transparent;
     }
+
+    /* Compact pagination for dashboard panels */
+    .dashboard-panel :deep(.dt-pagination) {
+        margin-top: 0.25rem;
+        margin-bottom: 0;
+        gap: 0.25rem;
+        justify-content: center;
+    }
+
+    /* Hide page-size selector + spacer in dashboard */
+    .dashboard-panel :deep(.dt-pagination-sizes),
+    .dashboard-panel :deep(.dt-pagination-spacer) {
+        display: none;
+    }
+
+    /* Hide prev/next text, keep icon only */
+    .dashboard-panel :deep([data-slot="pagination-previous"] span),
+    .dashboard-panel :deep([data-slot="pagination-next"] span) {
+        display: none;
+    }
+
+    /* Shrink prev/next buttons */
+    .dashboard-panel :deep([data-slot="pagination-previous"]),
+    .dashboard-panel :deep([data-slot="pagination-next"]) {
+        padding-inline: 0.25rem;
+        min-width: 1.75rem;
+        height: 1.75rem;
+    }
+
+    /* Shrink page number buttons */
+    .dashboard-panel :deep([data-slot="pagination-item"]) {
+        min-width: 1.75rem;
+        height: 1.75rem;
+        font-size: 0.75rem;
+    }
+
+    /* Shrink ellipsis */
+    .dashboard-panel :deep([data-slot="pagination-ellipsis"]) {
+        width: 1.75rem;
+        height: 1.75rem;
+    }
 </style>