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; } }