From 00265ba905a63521bb7fab5d0ead48476e6a7d47 Mon Sep 17 00:00:00 2001 From: Chanho Chung Date: Sat, 22 Nov 2025 11:14:14 +0900 Subject: [PATCH 1/4] fix: mobile layout of rpg-info-box --- style.css | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/style.css b/style.css index c98588d..c277cc7 100644 --- a/style.css +++ b/style.css @@ -1111,8 +1111,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Scrollable content wrapper inside info section */ .rpg-info-content { - display: flex; - flex-direction: column; + display: grid; + grid-template-rows: 1.2fr 0.8fr auto; gap: 0.25em; flex: 1; min-height: 0; @@ -4880,7 +4880,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* 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; + flex: 1 1 100% !important; min-height: 0; overflow-y: auto; padding-bottom: 16px; @@ -4915,14 +4915,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 +4968,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; } @@ -5326,13 +5334,12 @@ 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: 150px !important; /* Limit height on mobile */ + max-height: 100px !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; } @@ -5340,6 +5347,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { .rpg-notebook-lines { padding: 0.25em 0.5em !important; gap: 0.1em !important; + min-height: 0; } /* Reduce spacing in notebook lines */ @@ -5444,7 +5452,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 +6589,3 @@ body:has(.rpg-panel.rpg-position-left) #sheld { font-size: clamp(14px, 3vw, 18px) !important; } } - - From 02f080cc984fb268c2005a9edb617575fa3e917e Mon Sep 17 00:00:00 2001 From: Chanho Chung Date: Sat, 22 Nov 2025 23:09:54 +0900 Subject: [PATCH 2/4] fix: mobile layout of rpg-mobile-tabs, rpg-info-content, rpg-character-card --- style.css | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/style.css b/style.css index c277cc7..ca3d561 100644 --- a/style.css +++ b/style.css @@ -1112,12 +1112,11 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Scrollable content wrapper inside info section */ .rpg-info-content { display: grid; - grid-template-rows: 1.2fr 0.8fr auto; + grid-template-rows: 80px 60px minmax(min-content, auto); gap: 0.25em; flex: 1; min-height: 0; - overflow-y: auto; - overflow-x: hidden; + overflow: 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-y: auto; + overflow: hidden; 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 100% !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; @@ -5340,7 +5339,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld { /* Make the events widget scrollable if content exceeds height */ .rpg-events-widget { max-height: 100px !important; - overflow-y: auto !important; } /* Compact the notebook lines container */ From fed4e2d09574e1a93a1256942e208a4698a9827d Mon Sep 17 00:00:00 2001 From: Chanho Chung Date: Sat, 22 Nov 2025 23:27:45 +0900 Subject: [PATCH 3/4] fix: mobile layout of rpg-skills-section and rpg-classic-stat --- style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index ca3d561..641271e 100644 --- a/style.css +++ b/style.css @@ -943,7 +943,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { display: flex; align-items: center; gap: 0.375em; - font-size: clamp(0.4vw, 0.5vw, 0.6vw); + font-size: clamp(11px, 0.5vw, 14px); padding: clamp(4px, 0.6vh, 6px) 0.375em; background: rgba(0, 0, 0, 0.3); border-radius: 0.25em; @@ -5425,6 +5425,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 */ From eef547b0fabf4b16f135b630a3e6ed600298e9fd Mon Sep 17 00:00:00 2001 From: Chanho Chung Date: Sat, 22 Nov 2025 23:35:30 +0900 Subject: [PATCH 4/4] fix: mobile layout of rpg-skills-section font size --- style.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 641271e..32cbc5b 100644 --- a/style.css +++ b/style.css @@ -943,7 +943,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld { display: flex; align-items: center; gap: 0.375em; - font-size: clamp(11px, 0.5vw, 14px); + font-size: clamp(0.4vw, 0.5vw, 0.6vw); padding: clamp(4px, 0.6vh, 6px) 0.375em; background: rgba(0, 0, 0, 0.3); border-radius: 0.25em; @@ -5218,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 ======================================== */