Merge pull request #50 from chungchan-dev/fix/mobile-layout

fix: some mobile layout

style.css

@@ -1111,13 +1111,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 
 /* Scrollable content wrapper inside info section */
 .rpg-info-content {
-    display: flex;
+    display: grid;
-    flex-direction: column;
+    grid-template-rows: 80px 60px minmax(min-content, auto);
     gap: 0.25em;
     flex: 1;
     min-height: 0;
-    overflow-y: auto;
+    overflow: hidden;
-    overflow-x: hidden;
 }
 
 .rpg-info-content::-webkit-scrollbar {
@@ -1815,11 +1814,10 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.2s ease;
     width: 100%; /* Ensure cards take full width */
-    max-height: clamp(120px, 18vh, 200px);
+    max-height: clamp(200px, 18vh, 250px);
     box-sizing: border-box; /* Include padding and border in width calculation */
     flex-shrink: 0; /* Prevent cards from shrinking */
-    overflow-x: hidden;
+    overflow: hidden;
-    overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--rpg-border) transparent;
 }
@@ -1983,7 +1981,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 }
 
 .rpg-character-stat .rpg-stat-name {
-    font-size: clamp(0.5vw, 0.6vw, 0.7vw) !important;
+    font-size: clamp(9px, 0.6vw, 0.7vw) !important;
     font-weight: 600 !important;
     white-space: nowrap !important;
 }
@@ -4813,6 +4811,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         border-bottom: 2px solid var(--SmartThemeBorderColor);
         margin: 0;
         padding: 0;
+        overflow-x: auto;
     }
 
     .rpg-mobile-tab {
@@ -4871,16 +4870,17 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 
     /* Info tab contains Info Box and Characters with 50/50 split */
     .rpg-mobile-tab-content[data-tab-content="info"].active {
-        flex-direction: column;
+        display: grid;
+        grid-template-rows: minmax(min-content, auto) minmax(min-content, 1fr);
         gap: 0;
         height: 100%;
         min-height: 0;
+        overflow-y: auto;
     }
 
     /* Info Box takes 50% of vertical space */
     .rpg-mobile-tab-content[data-tab-content="info"] > #rpg-info-box,
     .rpg-mobile-tab-content[data-tab-content="info"] > .rpg-info-section {
-        flex: 1 1 50% !important;
         min-height: 0;
         overflow-y: auto;
         padding-bottom: 16px;
@@ -4892,7 +4892,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     /* Characters section takes 50% of vertical space */
     .rpg-mobile-tab-content[data-tab-content="info"] > #rpg-thoughts,
     .rpg-mobile-tab-content[data-tab-content="info"] > .rpg-thoughts-section {
-        flex: 1 1 50% !important;
         min-height: 0;
         overflow-y: auto;
         padding-bottom: 16px;
@@ -4915,14 +4914,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 
     /* Rows scale proportionally to fill Info Box */
     .rpg-dashboard-row-1 {
-        flex: 1.2 !important;  /* Slightly more space for 4 widgets */
         height: auto !important;  /* Remove desktop height constraint */
         display: flex !important;
         gap: 0.25em;
     }
 
     .rpg-dashboard-row-2 {
-        flex: 0.8 !important;  /* Less space for 1 widget */
         display: flex !important;
     }
 
@@ -4970,6 +4967,16 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     }
 
     /* Recent Events widget - mobile text sizing */
+    .rpg-notebook-header {
+        gap: clamp(26px, 6vw, 30px);
+        padding: clamp(5px, 1.5vw, 7px) 0;
+    }
+
+    .rpg-notebook-ring {
+        width: clamp(8px, 1.25vw, 10px);
+        height: clamp(8px, 1.25vw, 10px);
+    }
+
     .rpg-notebook-title {
         font-size: clamp(9px, 2.2vw, 11px) !important;
     }
@@ -5211,6 +5218,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         transform: scale(0.95);
     }
 
+    .rpg-skills-section {
+        font-size: clamp(11px, 2.8vw, 14px);
+        line-height: 1.3;
+    }
+
     /* ========================================
        MOBILE THOUGHT ICON POSITIONING
        ======================================== */
@@ -5326,20 +5338,19 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
 
     /* Make Recent Events section take less vertical space on mobile */
     .rpg-dashboard-row-3 {
-        flex: 0 0 auto !important;
+        max-height: 100px !important; /* Limit height on mobile */
-        max-height: 150px !important; /* Limit height on mobile */
     }
 
     /* Make the events widget scrollable if content exceeds height */
     .rpg-events-widget {
-        max-height: 150px !important;
+        max-height: 100px !important;
-        overflow-y: auto !important;
     }
 
     /* Compact the notebook lines container */
     .rpg-notebook-lines {
         padding: 0.25em 0.5em !important;
         gap: 0.1em !important;
+        min-height: 0;
     }
 
     /* Reduce spacing in notebook lines */
@@ -5419,6 +5430,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     .rpg-classic-stats {
         grid-column: 1 !important;
         grid-row: 4 !important;
+        min-height: 140px;
     }
 
     /* Make attributes grid single column too for readability */
@@ -5444,7 +5456,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
     /* More padding for editable fields */
     .rpg-editable {
         padding: 0.5em;
-        min-height: 2.75rem;
+        min-height: 1.25rem;
     }
 
     /* Larger close buttons */
@@ -6581,5 +6593,3 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
         font-size: clamp(14px, 3vw, 18px) !important;
     }
 }
-
-