From 8158eb2089892708a6d5d7c7eab0136752af8131 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 6 Oct 2025 13:40:44 -0400
Subject: [PATCH 1/2] Adjust desktop sidebar collapse styles

---
 css/style.css | 79 ++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 69 insertions(+), 10 deletions(-)

diff --git a/css/style.css b/css/style.css
index b3bc275f..5701604e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1506,6 +1506,9 @@ body.sidebar-open #sidebarOverlay {
 @media (min-width: 768px) {
   #sidebar {
     transform: translateX(0) !important;
+    width: 16rem;
+    overflow-x: hidden;
+    transition: width 200ms ease, transform 0.3s ease, box-shadow 0.3s ease;
   }
 
   #sidebar.sidebar-open {
@@ -1515,17 +1518,73 @@ body.sidebar-open #sidebarOverlay {
   #sidebarOverlay {
     display: none;
   }
-}
 
-/* Collapsed/expanded classes if needed on desktop */
-.sidebar-collapsed {
-  width: 4rem;
-}
-.sidebar-expanded {
-  width: 16rem;
-}
-.sidebar-collapsed .sidebar-text {
-  display: none;
+  body.sidebar-collapsed #sidebar,
+  #sidebar.sidebar-collapsed {
+    width: 4rem;
+  }
+
+  body.sidebar-expanded #sidebar,
+  #sidebar.sidebar-expanded {
+    width: 16rem;
+  }
+
+  body.sidebar-collapsed #sidebar a,
+  #sidebar.sidebar-collapsed a {
+    justify-content: center;
+    padding-inline: 1rem;
+  }
+
+  body.sidebar-expanded #sidebar a,
+  #sidebar.sidebar-expanded a {
+    justify-content: flex-start;
+    padding-inline: 1rem;
+  }
+
+  body.sidebar-collapsed #sidebar a > img,
+  body.sidebar-collapsed #sidebar a svg,
+  #sidebar.sidebar-collapsed a > img,
+  #sidebar.sidebar-collapsed a svg {
+    margin-right: 0;
+    margin-inline-end: 0;
+  }
+
+  body.sidebar-expanded #sidebar a > img,
+  body.sidebar-expanded #sidebar a svg,
+  #sidebar.sidebar-expanded a > img,
+  #sidebar.sidebar-expanded a svg {
+    margin-right: 0.75rem;
+    margin-inline-end: 0.75rem;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-text,
+  body.sidebar-collapsed #sidebar .sidebar-toggle-label,
+  #sidebar.sidebar-collapsed .sidebar-text,
+  #sidebar.sidebar-collapsed .sidebar-toggle-label {
+    display: none;
+  }
+
+  #sidebar.sidebar-expanded .sidebar-toggle-label {
+    display: inline;
+  }
+
+  body.sidebar-collapsed #sidebar .sidebar-toggle-icon--rotated,
+  #sidebar.sidebar-collapsed .sidebar-toggle-icon--rotated {
+    transform: rotate(0deg);
+  }
+
+  body.sidebar-expanded #sidebar .sidebar-toggle-icon--rotated,
+  #sidebar.sidebar-expanded .sidebar-toggle-icon--rotated {
+    transform: rotate(180deg);
+  }
+
+  body.sidebar-collapsed #app {
+    margin-left: 4rem !important;
+  }
+
+  body.sidebar-expanded #app {
+    margin-left: 16rem !important;
+  }
 }
 
 /* Example: customizing the border & background in the sidebar */

From 38ec169b22429763eac9141969d4b8f2705122e5 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Mon, 6 Oct 2025 13:47:44 -0400
Subject: [PATCH 2/2] Lower sidebar z-index below modals

---
 AGENTS.md     | 1 +
 css/style.css | 5 +++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 1a255fc0..67df8071 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -69,6 +69,7 @@ Document the run in PR descriptions so QA can cross-reference results.
 * **Nostr interoperability:** Keep kind `30078` events as the source of truth and optionally mirror to kind `1063` so external clients see the hosted URL.
 * **Probing:** Lightweight `HEAD`/`GET` requests should back `probeUrl()` so dead URLs can be hidden or flagged without blocking the UI.
 * **Extensibility:** Future work (live streams, NIP-96 uploads, analytics) should preserve the URL-first strategy and magnet safety rules above.
+* **Sidebar layering:** Keep the fixed sidebar below every modal and overlay. Respect the `--z-sidebar*` tokens so dialogs always render on top of the navigation.
 
 ---
 
diff --git a/css/style.css b/css/style.css
index 5701604e..17310431 100644
--- a/css/style.css
+++ b/css/style.css
@@ -14,8 +14,9 @@
   --scrollbar-track: rgba(255, 255, 255, 0.1);
   --scrollbar-thumb: rgba(255, 255, 255, 0.3);
   --scrollbar-thumb-hover: rgba(255, 255, 255, 0.4);
-  --z-sidebar: 40;
-  --z-sidebar-overlay: 30;
+  /* Sidebar stack must remain below modal overlays. */
+  --z-sidebar: 30;
+  --z-sidebar-overlay: 20;
   --z-modal-root: 80;
   --z-modal-overlay: 70;
   --z-modal-content: 90;