From 77b5092e5785e5bb122da374934567c977a6b855 Mon Sep 17 00:00:00 2001 From: Lucas 'Paperboy' Rose-Winters Date: Fri, 24 Oct 2025 15:31:19 +1100 Subject: [PATCH] fix(mobile): eliminate contenteditable bottom padding in dashboard v2 widgets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit PROBLEM: 1x1 mobile widgets displayed poorly with excessive vertical spacing ROOT CAUSE: Conflicting @media (max-width: 768px) set min-height: 2.75rem on all .rpg-editable FIXES: - Remove conflicting 768px media query min-height rule - Add line-height: 1.2, min-height: 0, height: auto to .rpg-editable - Use display: block for single-line fields instead of -webkit-box - GridEngine detects mobile viewport (≤1000px) for 3.5rem rowHeight - mobile.js skips old tab setup when Dashboard v2 exists - Hide weather forecast label on mobile (shows icon text only) - Fix weather text wrapping with white-space: nowrap AFFECTED: - style.css: Mobile contenteditable spacing, weather widget, widget scaling - gridEngine.js: Mobile rowHeight detection (isMobileViewport) - mobile.js: Skip mobile tabs when Dashboard v2 present --- src/systems/dashboard/gridEngine.js | 8 +- src/systems/ui/mobile.js | 7 + style.css | 191 ++++++++++++++++++++++++++-- 3 files changed, 194 insertions(+), 12 deletions(-) diff --git a/src/systems/dashboard/gridEngine.js b/src/systems/dashboard/gridEngine.js index 9c9c5fe..e2cc299 100644 --- a/src/systems/dashboard/gridEngine.js +++ b/src/systems/dashboard/gridEngine.js @@ -21,7 +21,10 @@ export class GridEngine { // Start with 2 columns (safest default for side panel) this.columns = 2; // Use rem for responsive sizing across all resolutions (1080p, 4K, mobile) - this.rowHeight = config.rowHeight || 5; // rem (was 80px) + // Mobile uses smaller rowHeight (3.5rem) to prevent vertical squashing + const isMobileViewport = window.innerWidth <= 1000; + const defaultRowHeight = isMobileViewport ? 3.5 : 5; + this.rowHeight = config.rowHeight || defaultRowHeight; // rem this.gap = config.gap || 0.75; // rem (was 12px) this.snapToGrid = config.snapToGrid !== false; this.container = config.container || null; @@ -39,7 +42,8 @@ export class GridEngine { columns: this.columns, rowHeight: this.rowHeight + 'rem', gap: this.gap + 'rem', - snapToGrid: this.snapToGrid + snapToGrid: this.snapToGrid, + isMobile: this.isMobile() }); } diff --git a/src/systems/ui/mobile.js b/src/systems/ui/mobile.js index 73a4ff1..817e62a 100644 --- a/src/systems/ui/mobile.js +++ b/src/systems/ui/mobile.js @@ -509,6 +509,13 @@ export function setupMobileTabs() { const isMobile = window.innerWidth <= 1000; if (!isMobile) return; + // Check if Dashboard v2 is present - if so, skip mobile tabs (dashboard has its own tab system) + const $dashboardContainer = $('#rpg-dashboard-container'); + if ($dashboardContainer.length > 0) { + console.log('[RPG Mobile] Dashboard v2 detected - skipping old mobile tabs setup'); + return; + } + // Check if tabs already exist if ($('.rpg-mobile-tabs').length > 0) return; diff --git a/style.css b/style.css index f5976fa..2e0f000 100644 --- a/style.css +++ b/style.css @@ -1569,13 +1569,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld { letter-spacing: 0.013em; opacity: 0.85; line-height: 1; - word-wrap: break-word; + white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; } .rpg-weather-forecast.rpg-editable { @@ -4144,6 +4141,186 @@ body:has(.rpg-panel.rpg-position-left) #sheld { font-size: clamp(16px, 4.1vw, 20px) !important; } + /* ======================================== + MOBILE DASHBOARD V2 LAYOUT + ======================================== */ + + /* Dashboard container - ensure it fills mobile panel properly */ + #rpg-dashboard-container { + height: 100%; + display: flex; + flex-direction: column; + } + + /* Dashboard header - compact on mobile */ + .rpg-dashboard-header { + flex-shrink: 0; + padding: 0.5rem; + gap: 0.5rem; + } + + /* Dashboard tabs - scrollable on mobile */ + #rpg-dashboard-tabs { + overflow-x: auto; + overflow-y: hidden; + -webkit-overflow-scrolling: touch; + } + + /* Dashboard buttons - smaller on mobile */ + .rpg-dashboard-btn { + min-width: 2rem; + height: 2rem; + padding: 0.25rem; + } + + .rpg-dashboard-btn i { + font-size: 0.8rem; + } + + /* Dashboard grid - scrollable with proper height */ + .rpg-dashboard-grid { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + padding: 0.5rem; + } + + /* Widgets - reduce padding for mobile */ + .rpg-widget { + padding: 0.25rem !important; + } + + /* Remove contenteditable padding and control text display */ + .rpg-editable { + padding: 0 !important; + margin: 0 !important; + overflow: hidden !important; + display: -webkit-box !important; + -webkit-line-clamp: 2 !important; + -webkit-box-orient: vertical !important; + word-break: break-word !important; + max-width: 100% !important; + line-height: 1.2 !important; + min-height: 0 !important; + height: auto !important; + } + + /* Short single-value fields should stay on one line */ + .rpg-temp-value.rpg-editable, + .rpg-time-value.rpg-editable, + .rpg-calendar-top.rpg-editable, + .rpg-calendar-day.rpg-editable, + .rpg-calendar-year.rpg-editable { + display: block !important; + white-space: nowrap !important; + text-overflow: ellipsis !important; + line-height: 1 !important; + } + + /* ======================================== + MOBILE 1x1 WIDGET FIXES (AGGRESSIVE) + ======================================== */ + + /* Calendar Widget - fit all 3 elements in 3.5rem height */ + .rpg-widget .rpg-calendar-widget { + padding: 0.1rem !important; + gap: 0.05rem !important; + justify-content: space-between !important; + } + + .rpg-widget .rpg-calendar-top { + font-size: 0.55rem !important; + padding: 0.1rem !important; + line-height: 1.1 !important; + } + + .rpg-widget .rpg-calendar-day { + font-size: 1.5rem !important; + padding: 0.1rem !important; + line-height: 1 !important; + flex: 1 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + } + + .rpg-widget .rpg-calendar-year { + font-size: 0.5rem !important; + padding: 0.1rem !important; + line-height: 1.1 !important; + } + + /* Weather Widget - hide forecast field, show only icon (which contains full text) */ + .rpg-widget .rpg-weather-widget { + padding: 0.3rem !important; + gap: 0 !important; + justify-content: center !important; + } + + .rpg-widget .rpg-weather-icon { + font-size: 0.7rem !important; + line-height: 1.3 !important; + text-align: center !important; + } + + .rpg-widget .rpg-weather-forecast { + display: none !important; + } + + /* Temperature Widget - scale thermometer */ + .rpg-widget .rpg-temp-widget { + padding: 0.3rem !important; + gap: 0.2rem !important; + justify-content: center !important; + align-items: center !important; + } + + .rpg-widget .rpg-thermometer { + width: 1rem !important; + height: 2.2rem !important; + flex-shrink: 0 !important; + } + + .rpg-widget .rpg-thermometer-bulb { + width: 1.2rem !important; + height: 1.2rem !important; + margin-left: -0.1rem !important; + } + + .rpg-widget .rpg-thermometer-tube { + width: 1rem !important; + height: 1.6rem !important; + } + + .rpg-widget .rpg-temp-value { + font-size: 0.65rem !important; + } + + /* Clock Widget - scale clock face */ + .rpg-widget .rpg-clock-widget { + padding: 0.3rem !important; + gap: 0.15rem !important; + justify-content: center !important; + align-items: center !important; + } + + .rpg-widget .rpg-clock { + width: 2.2rem !important; + height: 2.2rem !important; + flex-shrink: 0 !important; + } + + .rpg-widget .rpg-clock-face { + width: 100% !important; + height: 100% !important; + } + + .rpg-widget .rpg-time-value { + font-size: 0.65rem !important; + line-height: 1.1 !important; + } + /* ======================================== MOBILE STATS TAB LAYOUT IMPROVEMENTS ======================================== */ @@ -4564,12 +4741,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Touch-friendly improvements for mobile */ @media (max-width: 768px) { - /* More padding for editable fields */ - .rpg-editable { - padding: 0.5em; - min-height: 2.75rem; - } - /* Larger close buttons */ .rpg-thought-close { min-width: 2.75rem;