vrr/Pulse
2
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-10-19 10:33:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 13

fix(ui): wrap NodeSummaryTable and HostsOverview with ScrollableTable for mobile (#1196)

Browse source 
NodeSummaryTable and HostsOverview used raw overflow-x-auto divs with
min-width: 800px, causing column overlap on narrow screens. Wrap both
with ScrollableTable and bump min-width to 1000px to match actual
column totals. Also bump DockerHostSummaryTable min-width from 800px
to 920px to match its column widths.
This commit is contained in:
rcourtman 2026-02-10 19:24:03 +00:00
parent 26776b2075
commit c3c7bdf4a4
3 changed files with 11 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

4
frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
View file

@ -132,8 +132,8 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
return (
<>
<Card padding="none" tone="glass" class="mb-4 overflow-hidden">
<ScrollableTable persistKey="docker-host-summary" minWidth="800px" mobileMinWidth="800px">
<table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed" }}>
<ScrollableTable persistKey="docker-host-summary" minWidth="920px" mobileMinWidth="920px">
<table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed", "min-width": "920px" }}>
<thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
<th

8
frontend-modern/src/components/Hosts/HostsOverview.tsx
View file

@ -23,6 +23,7 @@ import { useAlertsActivation } from '@/stores/alertsActivation';
import { HostMetadataAPI, type HostMetadata } from '@/api/hostMetadata';
import { logger } from '@/utils/logger';
import { ScrollableTable } from '@/components/shared/ScrollableTable';
import { buildMetricKey } from '@/utils/metricsKeys';
import { isKioskMode, subscribeToKioskMode } from '@/utils/url';
import { HostDrawer } from './HostDrawer';
@ -985,9 +986,8 @@ export const HostsOverview: Component = () => {
}
>
<Card padding="none" tone="glass" class="overflow-hidden">
<div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
<style>{`.overflow-x-auto::-webkit-scrollbar { display: none; }`}</style>
<table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed", "min-width": "800px" }}>
<ScrollableTable persistKey="hosts-overview" minWidth="1000px" mobileMinWidth="1000px">
<table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed", "min-width": "1000px" }}>
<thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
{/* Essential columns */}
@ -1071,7 +1071,7 @@ export const HostsOverview: Component = () => {
</For>
</tbody>
</table>
</div>
</ScrollableTable>
</Card>
</Show>
</>

9
frontend-modern/src/components/shared/NodeSummaryTable.tsx
View file

@ -17,6 +17,7 @@ import { EnhancedCPUBar } from '@/components/Dashboard/EnhancedCPUBar';
import { TemperatureGauge } from '@/components/shared/TemperatureGauge';
import { useBreakpoint } from '@/hooks/useBreakpoint';
import { useMetricsViewMode } from '@/stores/metricsViewMode';
import { ScrollableTable } from '@/components/shared/ScrollableTable';
// Lazy load NodeDrawer to avoid circular dependencies and reduce bundle size
const NodeDrawer = lazy(() => import('./NodeDrawer').then(m => ({ default: m.NodeDrawer })));
@ -371,8 +372,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
return (
<Card padding="none" tone="glass" class="mb-4 overflow-hidden">
<div class="overflow-x-auto">
<table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed", "min-width": "800px" }}>
<ScrollableTable persistKey="node-summary" minWidth="1000px" mobileMinWidth="1000px">
<table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed", "min-width": "1000px" }}>
<thead>
<tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
@ -857,7 +858,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
</For>
</tbody>
</table>
</div>
</Card >
</ScrollableTable>
</Card>
);
};