fix: apply mobile sizing to scene info widget at narrow desktop widths
Fixed text clipping in date display by applying mobile's proven size reductions to narrow desktop widgets (< 3 grid units wide). Root Cause: - At narrow widths (~296px, 2 columns), date text wraps: "3rd Day of the Ninth Month" + "Tuesday" - Top 1/4 of first line was clipped (top of "3" and "D" cut off) - Mobile displays work perfectly at even smaller widths Solution - Mirror Mobile Sizing: Mobile uses smaller dimensions that prevent clipping: - Padding: 0.3125rem (vs 0.375rem desktop) - Gap: 0.3125rem (vs 0.375rem desktop) - Font size: 0.8125rem (vs 0.875rem desktop) - Label font: 0.625rem (vs 0.6875rem desktop) Changes: 1. style.css (lines 2782-2812): - Added .rpg-scene-info-compact class with mobile-like sizing - Reduces padding, gaps, and font sizes - Applied when widget width < 3 grid units 2. sceneInfoWidget.js (lines 367-385): - Added onResize handler - Applies .rpg-scene-info-compact at newW < 3 - Removes class at newW >= 3 - Matches pattern used for inventory/quests compact modes Result: Date text displays without clipping at narrow widths, exactly as mobile does. Fixes: Text clipping in scene info date display at 2-column layout (~296px)
This commit is contained in:
@@ -362,6 +362,26 @@ export function registerSceneInfoWidget(registry, dependencies) {
|
|||||||
*/
|
*/
|
||||||
onConfigChange(container, newConfig) {
|
onConfigChange(container, newConfig) {
|
||||||
this.render(container, newConfig);
|
this.render(container, newConfig);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle widget resize
|
||||||
|
* @param {HTMLElement} container - Widget container
|
||||||
|
* @param {number} newW - New width in grid units
|
||||||
|
* @param {number} newH - New height in grid units
|
||||||
|
*/
|
||||||
|
onResize(container, newW, newH) {
|
||||||
|
// Apply compact mode styling at narrow widths (mirrors mobile layout)
|
||||||
|
const grid = container.querySelector('.rpg-scene-info-grid');
|
||||||
|
if (grid) {
|
||||||
|
if (newW < 3) {
|
||||||
|
// Narrow layout: use mobile-like compact sizing
|
||||||
|
grid.classList.add('rpg-scene-info-compact');
|
||||||
|
} else {
|
||||||
|
// Wide layout: use standard sizing
|
||||||
|
grid.classList.remove('rpg-scene-info-compact');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2779,6 +2779,38 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Compact mode for narrow desktop widths - mirrors mobile sizing */
|
||||||
|
.rpg-scene-info-compact .rpg-scene-info-grid {
|
||||||
|
gap: 0.3125rem !important;
|
||||||
|
padding: 0.3125rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rpg-scene-info-compact .rpg-info-item {
|
||||||
|
padding: 0.3125rem !important;
|
||||||
|
gap: 0.3125rem !important;
|
||||||
|
border-radius: 0.3125rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rpg-scene-info-compact .rpg-info-item .item-icon {
|
||||||
|
font-size: 1rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rpg-scene-info-compact .rpg-info-item .item-value {
|
||||||
|
font-size: 0.8125rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rpg-scene-info-compact .rpg-info-item .item-label {
|
||||||
|
font-size: 0.625rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rpg-scene-info-compact .rpg-info-location .item-value {
|
||||||
|
font-size: 0.75rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rpg-scene-info-compact .rpg-info-location .item-label {
|
||||||
|
font-size: 0.625rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* Mobile responsive (max-width: 1000px) */
|
/* Mobile responsive (max-width: 1000px) */
|
||||||
@media (max-width: 1000px) {
|
@media (max-width: 1000px) {
|
||||||
.rpg-widget .rpg-scene-info-grid {
|
.rpg-widget .rpg-scene-info-grid {
|
||||||
|
|||||||
Reference in New Issue
Block a user