From b811d7c12e353c15d402b6bfebfd6294391abb6a Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Mon, 3 Nov 2025 11:31:38 +1100 Subject: [PATCH] fix(dashboard): properly size Scene Info widget to fit container MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed sizing issues where Scene Info widget overflowed its container. Problems fixed: - Removed unnecessary .rpg-dashboard-widget wrapper - Grid now fills container with height: 100% - Reduced padding from 1rem → 0.375rem - Reduced gaps from 0.75rem → 0.375rem - Reduced item padding from 0.75rem → 0.375rem - Reduced icon size from 1.5rem → 1.125rem - Reduced font sizes: - Value: 1.125rem → 0.875rem - Label: 0.8125rem → 0.6875rem - Location value: 1rem → 0.8125rem - Added text-overflow: ellipsis for long values - Added min-height: 0 and overflow: hidden Now follows same sizing pattern as other widgets (userInfo, userStats): - Direct container without wrapper - height/width: 100% to fill available space - Compact padding and gaps - Responsive font scaling - Text truncation for overflow Widget now fits properly in 2x2 grid space. --- .../dashboard/widgets/sceneInfoWidget.js | 14 ++- style.css | 88 +++++++++++-------- 2 files changed, 57 insertions(+), 45 deletions(-) diff --git a/src/systems/dashboard/widgets/sceneInfoWidget.js b/src/systems/dashboard/widgets/sceneInfoWidget.js index 115fbd3..7fadb84 100644 --- a/src/systems/dashboard/widgets/sceneInfoWidget.js +++ b/src/systems/dashboard/widgets/sceneInfoWidget.js @@ -260,14 +260,12 @@ export function registerSceneInfoWidget(registry, dependencies) { // Build grid HTML const html = ` -
-
- ${renderLocationHeader(location)} - ${renderInfoItem({ icon: '📅', value: date.value, label: date.label }, 'date', 'calendar')} - ${renderInfoItem({ icon: '🕐', value: time.value, label: time.label }, 'time', 'clock')} - ${renderInfoItem({ icon: weather.icon, value: weather.value, label: weather.label }, 'weather', 'weather')} - ${renderInfoItem({ icon: '🌡️', value: temp.value, label: temp.label }, 'temperature', 'temperature')} -
+
+ ${renderLocationHeader(location)} + ${renderInfoItem({ icon: '📅', value: date.value, label: date.label }, 'date', 'calendar')} + ${renderInfoItem({ icon: '🕐', value: time.value, label: time.label }, 'time', 'clock')} + ${renderInfoItem({ icon: weather.icon, value: weather.value, label: weather.label }, 'weather', 'weather')} + ${renderInfoItem({ icon: '🌡️', value: temp.value, label: temp.label }, 'temperature', 'temperature')}
`; diff --git a/style.css b/style.css index a48c9d3..579ea18 100644 --- a/style.css +++ b/style.css @@ -2653,8 +2653,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr 1fr; - gap: 0.75rem; - padding: 1rem; + gap: 0.375rem; + padding: 0.375rem; + height: 100%; + width: 100%; + box-sizing: border-box; grid-template-areas: "location location" "calendar clock" @@ -2664,12 +2667,14 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-info-item { background: var(--rpg-panel); border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 0.75rem; - padding: 0.75rem; + border-radius: 0.375rem; + padding: 0.375rem; display: flex; align-items: center; - gap: 0.75rem; + gap: 0.375rem; transition: all 0.2s ease; + min-height: 0; + overflow: hidden; } .rpg-info-item:hover { @@ -2692,7 +2697,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Icon styling */ .rpg-info-item .item-icon { - font-size: 1.5rem; + font-size: 1.125rem; flex-shrink: 0; line-height: 1; } @@ -2701,44 +2706,50 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-info-item .item-content { display: flex; flex-direction: column; - gap: 0.1rem; + gap: 0.0625rem; flex: 1; - min-width: 0; /* Prevent overflow */ + min-width: 0; + overflow: hidden; } /* Primary value (large, bold) */ .rpg-info-item .item-value { - font-size: 1.125rem; + font-size: 0.875rem; font-weight: 600; line-height: 1.2; color: var(--rpg-text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } /* Secondary label (small, subdued) */ .rpg-info-item .item-label { - font-size: 0.8125rem; - line-height: 1.3; + font-size: 0.6875rem; + line-height: 1.2; color: var(--rpg-text); opacity: 0.7; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } /* Location-specific styling */ .rpg-info-location .item-value { - font-size: 1rem; + font-size: 0.8125rem; font-weight: 500; } .rpg-info-location .item-label { - font-size: 0.875rem; - margin-top: -0.1rem; + font-size: 0.6875rem; + margin-top: -0.05rem; } /* Editable field styling */ .rpg-info-item .rpg-editable { cursor: text; - padding: 0.15rem 0.3rem; - margin: -0.15rem -0.3rem; - border-radius: 0.25rem; + padding: 0.0625rem 0.125rem; + border-radius: 0.1875rem; transition: background 0.15s ease; } @@ -2748,65 +2759,68 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-info-item .rpg-editable:focus { background: rgba(255, 255, 255, 0.1); - outline: 1px solid var(--rpg-highlight); + outline: 2px solid var(--rpg-highlight); + outline-offset: 1px; + white-space: normal; + overflow: visible; } /* Mobile responsive (max-width: 1000px) */ @media (max-width: 1000px) { .rpg-widget .rpg-scene-info-grid { - gap: 0.5rem !important; - padding: 0.75rem !important; + gap: 0.3125rem !important; + padding: 0.3125rem !important; } .rpg-widget .rpg-info-item { - padding: 0.6rem !important; - gap: 0.6rem !important; - border-radius: 0.5rem !important; + padding: 0.3125rem !important; + gap: 0.3125rem !important; + border-radius: 0.3125rem !important; } .rpg-widget .rpg-info-item .item-icon { - font-size: 1.25rem !important; - } - - .rpg-widget .rpg-info-item .item-value { font-size: 1rem !important; } + .rpg-widget .rpg-info-item .item-value { + font-size: 0.8125rem !important; + } + .rpg-widget .rpg-info-item .item-label { - font-size: 0.75rem !important; + font-size: 0.625rem !important; } .rpg-widget .rpg-info-location .item-value { - font-size: 0.9rem !important; + font-size: 0.75rem !important; } .rpg-widget .rpg-info-location .item-label { - font-size: 0.8rem !important; + font-size: 0.625rem !important; } } /* Extra small mobile (max-width: 340px) */ @media (max-width: 340px) { .rpg-widget .rpg-scene-info-grid { - gap: 0.4rem !important; - padding: 0.5rem !important; + gap: 0.25rem !important; + padding: 0.25rem !important; } .rpg-widget .rpg-info-item { - padding: 0.5rem !important; - gap: 0.5rem !important; + padding: 0.25rem !important; + gap: 0.25rem !important; } .rpg-widget .rpg-info-item .item-icon { - font-size: 1.1rem !important; + font-size: 0.9375rem !important; } .rpg-widget .rpg-info-item .item-value { - font-size: 0.9rem !important; + font-size: 0.75rem !important; } .rpg-widget .rpg-info-item .item-label { - font-size: 0.7rem !important; + font-size: 0.5625rem !important; } }