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

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

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;
 

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;