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:
@@ -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()
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user