fix(dashboard): properly size Scene Info widget to fit container

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.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-11-03 11:31:38 +11:00
parent 5a21a5aece
commit b811d7c12e
2 changed files with 57 additions and 45 deletions
@@ -260,14 +260,12 @@ export function registerSceneInfoWidget(registry, dependencies) {
// Build grid HTML
const html = `
<div class="rpg-dashboard-widget">
<div class="rpg-scene-info-grid">
${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')}
</div>
<div class="rpg-scene-info-grid">
${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')}
</div>
`;