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

fix: mobile layout of rpg-mobile-tabs, rpg-info-content, rpg-character-card

Browse Source
This commit is contained in:
Chanho Chung
2025-11-22 23:09:54 +09:00
parent 00265ba905
commit 02f080cc98
1 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+9 -11
View File
@@ -1112,12 +1112,11 @@ 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: grid; display: grid;
grid-template-rows: 1.2fr 0.8fr auto; grid-template-rows: 80px 60px minmax(min-content, auto);
gap: 0.25em; gap: 0.25em;
flex: 1; flex: 1;
min-height: 0; min-height: 0;
overflow-y: auto; overflow: hidden;
overflow-x: hidden;
} }
.rpg-info-content::-webkit-scrollbar { .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); border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.2s ease; transition: all 0.2s ease;
width: 100%; /* Ensure cards take full width */ 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 */ box-sizing: border-box; /* Include padding and border in width calculation */
flex-shrink: 0; /* Prevent cards from shrinking */ flex-shrink: 0; /* Prevent cards from shrinking */
overflow-x: hidden; overflow: hidden;
overflow-y: auto;
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: var(--rpg-border) transparent; scrollbar-color: var(--rpg-border) transparent;
} }
@@ -1983,7 +1981,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
} }
.rpg-character-stat .rpg-stat-name { .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; font-weight: 600 !important;
white-space: nowrap !important; white-space: nowrap !important;
} }
@@ -4813,6 +4811,7 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
border-bottom: 2px solid var(--SmartThemeBorderColor); border-bottom: 2px solid var(--SmartThemeBorderColor);
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: auto;
} }
.rpg-mobile-tab { .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 */ /* Info tab contains Info Box and Characters with 50/50 split */
.rpg-mobile-tab-content[data-tab-content="info"].active { .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; gap: 0;
height: 100%; height: 100%;
min-height: 0; min-height: 0;
overflow-y: auto;
} }
/* 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 100% !important;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding-bottom: 16px; padding-bottom: 16px;
@@ -4892,7 +4892,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Characters section takes 50% of vertical space */ /* 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,
.rpg-mobile-tab-content[data-tab-content="info"] > .rpg-thoughts-section { .rpg-mobile-tab-content[data-tab-content="info"] > .rpg-thoughts-section {
flex: 1 1 50% !important;
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding-bottom: 16px; padding-bottom: 16px;
@@ -5340,7 +5339,6 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* 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: 100px !important; max-height: 100px !important;
overflow-y: auto !important;
} }
/* Compact the notebook lines container */ /* Compact the notebook lines container */