From 7adaedcb5813128dae4eaa2c036c39e24d89866e Mon Sep 17 00:00:00 2001
From: Spicy_Marinara <mgrabower97@gmail.com>
Date: Wed, 15 Oct 2025 02:52:20 +0200
Subject: [PATCH] Make panel fill available margin space instead of fixed width
 - panel now expands to use all available space in margins

---
 style.css | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/style.css b/style.css
index cf1c4d2..173a516 100644
--- a/style.css
+++ b/style.css
@@ -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;