gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-21 02:33:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use 100% table width with fixed layout to eliminate dead space

Browse Source 
- Tables now use 100% width with table-layout: fixed
- Last column (Uptime) no longer has fixed width, takes remaining space
- Eliminates dead space while maintaining fixed column sizes
- Tables still have min-width to prevent collapse
This commit is contained in:
Pulse Monitor
2025-08-26 19:36:37 +00:00
parent 3fad29875b
commit 2ea75caa2f
2 changed files with 5 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/shared/PBSNodeTable.tsx
+2 -2
View File
@@ -86,7 +86,7 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
return (
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<div class="overflow-x-auto" style="overflow-x: auto;">
<table style="width: 1000px; table-layout: fixed;">
<table style="table-layout: fixed; min-width: 100%; width: 100%;">
<thead>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 200px; white-space: nowrap;">
@@ -110,7 +110,7 @@ export const PBSNodeTable: Component<PBSNodeTableProps> = (props) => {
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 180px; white-space: nowrap;">
Storage Used
</th>
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 100px; white-space: nowrap;">
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="white-space: nowrap;">
Uptime
</th>
</tr>
frontend-modern/src/components/shared/PVENodeTable.tsx
+3 -8
View File
@@ -146,18 +146,13 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
return nodes && nodes.length > 0;
});
// Calculate table width based on number of count columns
const tableWidth = createMemo(() => {
const countColumns = getCountHeaders().length;
// Base: 200 + 80 + 100 + (countColumns * 80) + 180 + 180 + 180 + 100
return 1020 + (countColumns * 80);
});
// Table uses 100% width with fixed layout
return (
<Show when={showTable()}>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
<div class="overflow-x-auto" style="overflow-x: auto;">
<table style={`width: ${tableWidth()}px; table-layout: fixed;`}>
<table style="table-layout: fixed; min-width: 100%; width: 100%;">
<thead>
<tr class="border-b border-gray-200 dark:border-gray-700">
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 200px; white-space: nowrap;">
@@ -185,7 +180,7 @@ export const PVENodeTable: Component<PVENodeTableProps> = (props) => {
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 180px; white-space: nowrap;">
Storage
</th>
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="width: 100px; white-space: nowrap;">
<th class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider" style="white-space: nowrap;">
Uptime
</th>
</tr>