fix(mobile): eliminate contenteditable bottom padding in dashboard v2 widgets

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
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-24 15:31:19 +11:00
parent 63a02fd197
commit 77b5092e57
3 changed files with 194 additions and 12 deletions
+6 -2
View File
@@ -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()
});
}
+7
View File
@@ -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;