From 578be0cc8f4ff44752db78ea4f741f4e7408818b Mon Sep 17 00:00:00 2001
From: Abhay Padamani <141122205+ktx-abhay@users.noreply.github.com>
Date: Fri, 15 May 2026 19:06:59 +0530
Subject: [PATCH] fix: dashboard table chart padding issue (#11845)

<img width="794" height="364" alt="image"
src="https://github.com/user-attachments/assets/286345df-c6af-4ffb-a71b-e09b48644933"
/>


After this pr:
<img width="429" height="120" alt="image"
src="https://github.com/user-attachments/assets/bfd39b11-ff55-4bb1-b9d3-55f9fe4b52b2"
/>
---
 web/src/components/TenstackTable.vue          | 12 ++++-
 .../addPanel/TablePaginationControls.vue      | 49 ++++++++++++++++++-
 .../dashboards/panels/TableRenderer.vue       |  2 +-
 3 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/web/src/components/TenstackTable.vue b/web/src/components/TenstackTable.vue
index 4ff9dde5c4..f77a32d00a 100644
--- a/web/src/components/TenstackTable.vue
+++ b/web/src/components/TenstackTable.vue
@@ -2340,11 +2340,21 @@ defineExpose({
   }
 }
 
-// Copy button — only visible on cell hover
+// Copy button — only visible on cell hover, sized to match text so it
+// doesn't inflate the row height.
 .copy-cell-td {
   .copy-btn {
     opacity: 0;
     transition: opacity 0.15s;
+    display: inline-flex;
+    align-items: center;
+    line-height: 1;
+
+    :deep(button) {
+      height: 16px !important;
+      width: 16px !important;
+      min-height: unset !important;
+    }
   }
 
   &:hover .copy-btn {
diff --git a/web/src/components/dashboards/addPanel/TablePaginationControls.vue b/web/src/components/dashboards/addPanel/TablePaginationControls.vue
index dcb51f157a..87d4f375f3 100644
--- a/web/src/components/dashboards/addPanel/TablePaginationControls.vue
+++ b/web/src/components/dashboards/addPanel/TablePaginationControls.vue
@@ -34,7 +34,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     </div>
 
     <!-- Count display -->
-    <span class="text-caption q-pa-sm" data-test="dashboard-table-row-count">
+    <span class="text-caption q-px-sm" data-test="dashboard-table-row-count">
       {{ countDisplay }}
     </span>
 
@@ -147,3 +147,50 @@ export default defineComponent({
   },
 });
 </script>
+
+<style lang="scss" scoped>
+// Ensure all pagination elements sit on the same baseline.
+[data-test="dashboard-table-pagination-controls"] {
+  display: flex !important;
+  align-items: center !important;
+
+  // Override q-gutter-sm margins on the container and all its children.
+  .q-gutter-sm {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+
+    > * {
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+    }
+  }
+}
+
+.q-table__select {
+  min-height: auto !important;
+  height: auto !important;
+
+  :deep(.q-field__inner),
+  :deep(.q-field__control),
+  :deep(.q-field__native),
+  :deep(.q-field__append),
+  :deep(.q-field__marginal) {
+    min-height: auto !important;
+    height: auto !important;
+    padding: 0 !important;
+    line-height: 1;
+  }
+
+  // Keep a subtle border on the dropdown control.
+  :deep(.q-field__control) {
+    border: 1px solid rgba(0, 0, 0, 0.12) !important;
+    border-radius: 4px;
+    padding: 2px 4px !important;
+  }
+
+  // Shrink the dropdown arrow icon.
+  :deep(.q-select__dropdown-icon) {
+    font-size: 16px !important;
+  }
+}
+</style>
diff --git a/web/src/components/dashboards/panels/TableRenderer.vue b/web/src/components/dashboards/panels/TableRenderer.vue
index 36f6fbb523..649d88996f 100644
--- a/web/src/components/dashboards/panels/TableRenderer.vue
+++ b/web/src/components/dashboards/panels/TableRenderer.vue
@@ -45,7 +45,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       <template #bottom="scope">
         <slot name="bottom" v-bind="scope">
           <!-- Default: dashboard pagination controls -->
-          <div class="row items-center full-width" data-test="dashboard-table-pagination">
+          <div class="row items-center full-width tw:pr-2" data-test="dashboard-table-pagination">
             <q-space />
             <TablePaginationControls
               :show-pagination="showPagination"