Pakobbix/rpg-companion-sillytavern
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: mobile layout of rpg-info-box

Browse Source
This commit is contained in:
Chanho Chung
2025-11-22 11:14:14 +09:00
parent c3624c240f
commit 00265ba905
1 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+17 -11
View File
@@ -1111,8 +1111,8 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Scrollable content wrapper inside info section */ /* Scrollable content wrapper inside info section */
.rpg-info-content { .rpg-info-content {
display: flex; display: grid;
flex-direction: column; grid-template-rows: 1.2fr 0.8fr auto;
gap: 0.25em; gap: 0.25em;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
@@ -4880,7 +4880,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Info Box takes 50% of vertical space */ /* 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-box,
.rpg-mobile-tab-content[data-tab-content="info"] > .rpg-info-section { .rpg-mobile-tab-content[data-tab-content="info"] > .rpg-info-section {
flex: 1 1 50% !important; flex: 1 1 100% !important;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding-bottom: 16px; padding-bottom: 16px;
@@ -4915,14 +4915,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Rows scale proportionally to fill Info Box */ /* Rows scale proportionally to fill Info Box */
.rpg-dashboard-row-1 { .rpg-dashboard-row-1 {
flex: 1.2 !important; /* Slightly more space for 4 widgets */
height: auto !important; /* Remove desktop height constraint */ height: auto !important; /* Remove desktop height constraint */
display: flex !important; display: flex !important;
gap: 0.25em; gap: 0.25em;
} }
.rpg-dashboard-row-2 { .rpg-dashboard-row-2 {
flex: 0.8 !important; /* Less space for 1 widget */
display: flex !important; display: flex !important;
} }
@@ -4970,6 +4968,16 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
/* Recent Events widget - mobile text sizing */ /* 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 { .rpg-notebook-title {
font-size: clamp(9px, 2.2vw, 11px) !important; 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 */ /* Make Recent Events section take less vertical space on mobile */
.rpg-dashboard-row-3 { .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 */ /* Make the events widget scrollable if content exceeds height */
.rpg-events-widget { .rpg-events-widget {
max-height: 150px !important; max-height: 100px !important;
overflow-y: auto !important; overflow-y: auto !important;
} }
@@ -5340,6 +5347,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
.rpg-notebook-lines { .rpg-notebook-lines {
padding: 0.25em 0.5em !important; padding: 0.25em 0.5em !important;
gap: 0.1em !important; gap: 0.1em !important;
min-height: 0;
} }
/* Reduce spacing in notebook lines */ /* Reduce spacing in notebook lines */
@@ -5444,7 +5452,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* More padding for editable fields */ /* More padding for editable fields */
.rpg-editable { .rpg-editable {
padding: 0.5em; padding: 0.5em;
min-height: 2.75rem; min-height: 1.25rem;
} }
/* Larger close buttons */ /* Larger close buttons */
@@ -6581,5 +6589,3 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
font-size: clamp(14px, 3vw, 18px) !important; font-size: clamp(14px, 3vw, 18px) !important;
} }
} }