Bergashaandajnart
002381d294
* fix(dataTable): resizing a column no longer squashes the others mantine-datatable's built-in column resize keeps the table's total width fixed by shrinking every other column to compensate, which collapses columns toward zero in a narrow widget (open upstream issue, no fix: icflorescu/mantine-datatable#discussions-757). Replaced it with our own resize handle that only ever changes the width of the column being dragged - the table grows and scrolls horizontally instead. Shared via usePersistedTableLayout, so docker, downloads, and beszel-system-table all get it. * feat(docker): enable hold-Shift advanced focus preview The widget already renders differently for displayMode="advanced", but was missing supportsAdvancedFocus: true, so the board never offered the hold-Shift preview for it - matching downloads and media-server, which both set this flag. * style(docker): tighten row density, decouple icon size from row height Circular avatar, denser row/footer padding, and action icons rendered larger than their button via absolute positioning so they don't inflate row height (the button stays small and fixed - it repeats once per row, so any growth there multiplies across every visible container). * fix(data-table): harden shared column resizing * fix(data-table): account for board scaling * fix(data-table): compact shared headers * fix(data-table): fit columns to widget * fix(downloads): simplify advanced details * test(widgets): align Docker advanced focus * fix(downloads): widen expanded details --------- Co-authored-by: ajnart <thomas@ajnart.dev>
86 lines
2.6 KiB
CSS
86 lines
2.6 KiB
CSS
.homarr-data-table,
|
|
.homarr-data-table .mantine-datatable-table,
|
|
.homarr-data-table .mantine-datatable-table thead,
|
|
.homarr-data-table .mantine-datatable-table tbody,
|
|
.homarr-data-table .mantine-datatable-table tfoot,
|
|
.homarr-data-table th,
|
|
.homarr-data-table td {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.homarr-data-table .mantine-datatable-table tr {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.homarr-data-table .mantine-datatable-table {
|
|
width: 100% !important;
|
|
max-width: 100%;
|
|
table-layout: fixed !important;
|
|
}
|
|
|
|
.homarr-data-table .mantine-datatable-table tbody tr:hover {
|
|
background-color: color-mix(in srgb, var(--mantine-color-default-hover) 40%, transparent) !important;
|
|
}
|
|
|
|
.homarr-data-table th {
|
|
padding: 0;
|
|
white-space: nowrap;
|
|
background-color: color-mix(in srgb, var(--mantine-color-body) 60%, transparent) !important;
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.homarr-data-table td {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Lets a cell's content (e.g. an oversized action icon) visually overflow its own box without
|
|
growing it - used to make a per-row icon look bigger without inflating row height, since the
|
|
icon is pulled out of flow via absolute positioning rather than actually being a bigger cell. */
|
|
.homarr-data-table td.docker-actions-cell {
|
|
overflow: visible;
|
|
}
|
|
|
|
.homarr-data-table td .mantine-Text-root,
|
|
.homarr-data-table td .mantine-Group-root {
|
|
white-space: nowrap;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.homarr-data-table .mantine-datatable-header-cell-sortable-icon,
|
|
.homarr-data-table .mantine-datatable-header-cell-draggable-action-icon {
|
|
opacity: 0;
|
|
transition: opacity 150ms ease-out;
|
|
}
|
|
|
|
.homarr-data-table .mantine-datatable-header-cell-sortable-group {
|
|
gap: 0;
|
|
}
|
|
|
|
.homarr-data-table .mantine-datatable-header-cell-draggable-action-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
.homarr-data-table .mantine-datatable-header-cell-sortable-unsorted-icon {
|
|
display: none;
|
|
}
|
|
|
|
.homarr-data-table .mantine-datatable-header-cell-draggable-action-icon svg,
|
|
.homarr-data-table .mantine-datatable-header-cell-sortable-text svg,
|
|
.homarr-data-table .mantine-datatable-header-cell-sortable-icon svg {
|
|
width: var(--mantine-font-size-md);
|
|
height: var(--mantine-font-size-md);
|
|
}
|
|
|
|
.homarr-data-table th:hover .mantine-datatable-header-cell-sortable-icon,
|
|
.homarr-data-table th:hover .mantine-datatable-header-cell-draggable-action-icon,
|
|
.homarr-data-table .mantine-datatable-header-cell-draggable-action-icon:focus-visible,
|
|
.homarr-data-table .mantine-datatable-header-cell-drag-over .mantine-datatable-header-cell-draggable-action-icon {
|
|
opacity: 1;
|
|
}
|
|
|
|
.homarr-data-table-row-cursor-default .mantine-datatable-context-menu-cursor {
|
|
cursor: default;
|
|
}
|