starred/openobserve
1
0
Fork 0
mirror of https://github.com/openobserve/openobserve.git synced 2026-11-05 16:10:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: dashboard table chart padding issue (#11845)

Browse Source 
<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"
/>
This commit is contained in:
Abhay Padamani
2026-05-15 13:36:59 +00:00
committed by GitHub
parent 9f00716db0
commit 578be0cc8f
3 changed files with 60 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/TenstackTable.vue
+11 -1
View File
@@ -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 {
web/src/components/dashboards/addPanel/TablePaginationControls.vue
+48 -1
View File
@@ -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>
web/src/components/dashboards/panels/TableRenderer.vue
+1 -1
View File
@@ -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"