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

Make panel fill available margin space instead of fixed width - panel now expands to use all available space in margins

Browse Source
This commit is contained in:
Spicy_Marinara
2025-10-15 02:52:20 +02:00
parent 8f67decea3
commit 7adaedcb58
1 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+14 -13
View File
@@ -23,14 +23,12 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
--rpg-shadow: rgba(0, 0, 0, 0.5);
}
/* Main Panel Container - Flexible width, responsive */
/* Main Panel Container - Fills available margin space */
.rpg-panel {
position: fixed;
top: var(--topBarBlockSize);
bottom: 0;
width: 380px;
max-width: 30vw;
min-width: 280px;
width: auto;
background: var(--rpg-bg);
box-shadow: 0 0 20px var(--rpg-shadow);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -98,16 +96,20 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
display: none;
}
/* Right Position (Default) - Panel overlays on the right */
/* Right Position (Default) - Panel fills right margin */
.rpg-panel.rpg-position-right {
right: 0;
left: var(--sheldWidth, calc(100vw - 380px));
min-width: 280px;
border-left: 3px solid var(--rpg-border);
box-shadow: -5px 0 20px var(--rpg-shadow);
}
/* Left Position - Panel overlays on the left */
/* Left Position - Panel fills left margin */
.rpg-panel.rpg-position-left {
left: 0;
right: var(--sheldWidth, calc(100vw - 380px));
min-width: 280px;
border-right: 3px solid var(--rpg-border);
box-shadow: 5px 0 20px var(--rpg-shadow);
}
@@ -159,17 +161,15 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
/* Mobile Responsiveness */
@media (max-width: 1024px) {
.rpg-panel {
width: 320px;
max-width: 35vw;
.rpg-panel.rpg-position-right,
.rpg-panel.rpg-position-left {
min-width: 260px;
}
}
@media (max-width: 768px) {
.rpg-panel {
width: 280px;
max-width: 40vw;
.rpg-panel.rpg-position-right,
.rpg-panel.rpg-position-left {
min-width: 240px;
}
@@ -181,8 +181,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
@media (max-width: 480px) {
.rpg-panel.rpg-position-right,
.rpg-panel.rpg-position-left {
left: 0 !important;
right: 0 !important;
width: 100%;
max-width: 100%;
height: 50vh;
top: auto;
bottom: 0;