handle panel-switching on mobile

Nostr-Signature: 1b65fafbc3cef0e06fc9fd9e7c2478f3028ecea0974173cbac59a9afcb1defe9 573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc fe917e8c371c9567bf677ac5f21175ee4f3783e8a9a0b0cb4f43f17f235041306422e73ec048b7a3638ba4268faaca6bf415593cea4cd89761f43edb51184bca

nostr/commit-signatures.jsonl

@@ -48,3 +48,4 @@
 {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771705699,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","bug-fixes"]],"content":"Signed commit: bug-fixes","id":"59d0c409196dccb8109a29829002df69dbca43c5e95c1fdc1e7baa0b88ee5927","sig":"af8726a86e30c64b098ad13946d5bc84cb08d5ea8b75f08641c03fbdd8b9c91683e8091b206159dde2239ea8964cb3589bcb4ec2892541d2980f186a0fb09af9"}
 {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771708933,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","bug-fixes"]],"content":"Signed commit: bug-fixes","id":"6d8832125b76095b2e7ed57b71e26a6c05d9b19a14dfa76724c71f392147fe95","sig":"6ddebfa995b5b3f469db5f3cdbd7d13fa2307d7988c2667479015d6bc2ff442be357ee97e51340a944eb34fed73522db3930016d343810927486bdbcabddae5c"}
 {"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771742489,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","bug-fixes"]],"content":"Signed commit: bug-fixes","id":"6fd5146b5f5980987adc5e6b93a1bcb31cfbb6a2e4fce6f1dbe5c7fdf54b717a","sig":"41422b07b63fc494c0aba22b85f1b56a6a5527f9df48d49816f7be417ad74608f8d1dff8302f562b2f47690720c089aab76db948f5bf1ecdda68741b256d7a2b"}
+{"kind":1640,"pubkey":"573634b648634cbad10f2451776089ea21090d9407f715e83c577b4611ae6edc","created_at":1771745084,"tags":[["author","Silberengel","silberengel7@protonmail.com"],["message","fix the menus and implement the patch page"]],"content":"Signed commit: fix the menus and implement the patch page","id":"b4e946a2acfc7c71b7c3d3a533186dc500edcd4e3f277aa5f83fa08fe5d2ffa7","sig":"226f5ae08cd5dd27baf8cca64889d27bcd40aa4655a274ba19ef068e394be99c916bdf86569169800e4dfdfe89e34f834bb95a4a404bda7712cbbf537633a6f5"}

src/lib/components/RepoHeaderEnhanced.svelte

@@ -91,6 +91,27 @@
   let showMoreMenu = $state(false);
   let showBranchMenu = $state(false);
   let showOwnerMenu = $state(false);
+  let moreMenuElement = $state<HTMLDivElement | null>(null);
+  
+  // Adjust menu position to expand leftward on mobile if needed
+  $effect(() => {
+    if (showMoreMenu && moreMenuElement) {
+      // Use requestAnimationFrame to ensure DOM is updated
+      requestAnimationFrame(() => {
+        if (!moreMenuElement) return;
+        const rect = moreMenuElement.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        
+        // If menu would overflow on the right, position it to expand leftward
+        if (rect.right > viewportWidth - 10) {
+          const overflow = rect.right - (viewportWidth - 10);
+          moreMenuElement.style.transform = `translateX(-${overflow}px)`;
+        } else {
+          moreMenuElement.style.transform = 'translateX(0)';
+        }
+      });
+    }
+  });
 </script>
 
 <header class="repo-header">
@@ -139,7 +160,7 @@
               tabindex="0"
               aria-label="Close menu"
             ></div>
-            <div class="more-menu">
+            <div class="more-menu" bind:this={moreMenuElement}>
               {#if onFork}
                 <button class="menu-item" onclick={() => { onFork(); showMoreMenu = false; }} disabled={forking}>
                   {forking ? 'Forking...' : 'Fork'}

src/lib/styles/components.css

@@ -414,25 +414,33 @@
   border-radius: 0.375rem;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   z-index: 100;
-  min-width: 240px;
-  max-width: min(90vw, 360px);
+  min-width: 280px;
+  max-width: min(90vw, 400px);
 }
 
-/* On mobile, ensure menu doesn't overflow screen */
+/* On mobile, ensure menu doesn't overflow screen and expands leftward */
 @media (max-width: 768px) {
-  .more-menu {
+  .repo-header-actions .more-menu {
     right: 0;
-    max-width: calc(100vw - 2rem);
-    min-width: 220px;
+    left: auto;
+    max-width: calc(100vw - 1rem);
+    min-width: 280px;
+    /* Ensure menu aligns to right edge of button but doesn't overflow */
+    transform: translateX(0);
   }
+  
+  /* If menu would overflow, it will be constrained by max-width */
+  /* The menu will naturally expand leftward when constrained */
 }
 
-/* On very small screens, position menu to not overflow */
+/* On very small screens, ensure menu expands leftward */
 @media (max-width: 480px) {
-  .more-menu {
+  .repo-header-actions .more-menu {
     right: 0;
-    max-width: calc(100vw - 1rem);
-    min-width: auto;
+    left: auto;
+    max-width: calc(100vw - 0.5rem);
+    min-width: 260px;
+    /* Menu will expand leftward when width is constrained */
   }
 }
 

src/lib/styles/repo.css

@@ -89,10 +89,14 @@
   padding: 1rem;
   border-bottom: 1px solid var(--border-color);
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
   gap: 0.75rem;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  position: relative;
+  overflow: visible;
+  z-index: 1;
 }
 
 .file-tree-header h2 {
@@ -100,6 +104,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .file-list {
@@ -474,14 +480,58 @@
 
 /* Mobile responsive */
 @media (max-width: 768px) {
-  .file-tree {
+  .repo-layout {
+    flex-direction: column;
+    position: relative;
     width: 100%;
-    flex: 1 1 auto;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .file-tree,
+  .issues-sidebar,
+  .prs-sidebar,
+  .patches-sidebar,
+  .discussions-sidebar,
+  .docs-sidebar,
+  .history-sidebar,
+  .tags-sidebar {
+    width: 100% !important;
+    max-width: 100% !important;
+    height: 100%;
+    flex: 1 1 100%;
+    min-height: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    box-sizing: border-box;
+  }
+  
+  .issues-header,
+  .prs-header,
+  .patches-header,
+  .discussions-header,
+  .docs-header,
+  .history-header,
+  .tags-header,
+  .file-tree-header {
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
   }
 
   .editor-area {
     width: 100%;
-    flex: 1;
+    height: 100%;
+    flex: 1 1 100%;
+    min-height: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
   }
 
   .file-tree.hide-on-mobile {
@@ -492,17 +542,68 @@
     display: none !important;
   }
 
-  .repo-layout {
-    flex-direction: column;
+  .issues-sidebar.hide-on-mobile,
+  .prs-sidebar.hide-on-mobile,
+  .patches-sidebar.hide-on-mobile,
+  .discussions-sidebar.hide-on-mobile,
+  .docs-sidebar.hide-on-mobile,
+  .history-sidebar.hide-on-mobile,
+  .tags-sidebar.hide-on-mobile {
+    display: none !important;
+  }
+
+  .issues-content.hide-on-mobile,
+  .prs-content.hide-on-mobile,
+  .patches-content.hide-on-mobile,
+  .discussions-content.hide-on-mobile,
+  .docs-content.hide-on-mobile {
+    display: none !important;
   }
 
   .mobile-toggle-button {
     display: inline-flex;
-    padding: 0.5rem;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
     background: var(--bg-tertiary);
     border: 1px solid var(--border-color);
     border-radius: 4px;
     cursor: pointer;
+    width: 2rem;
+    height: 2rem;
+    flex-shrink: 0;
+  }
+  
+  .mobile-toggle-button:hover {
+    background: var(--bg-hover);
+  }
+  
+  .mobile-toggle-button .icon-inline {
+    width: 18px;
+    height: 18px;
+  }
+  
+  .mobile-toggle-left {
+    transform: rotate(180deg);
+  }
+
+  .content-header-mobile {
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--border-color);
+    display: flex !important;
+    align-items: center;
+    background: var(--bg-secondary);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+@media (min-width: 769px) {
+  .content-header-mobile {
+    display: none;
   }
 }
 
@@ -713,6 +814,8 @@
 .file-tree-actions {
   display: flex;
   gap: 0.5rem;
+  margin-left: auto;
+  flex-shrink: 0;
 }
 
 .word-wrap-button {
@@ -723,8 +826,9 @@
   border-radius: 0.25rem;
   cursor: pointer;
   color: var(--text-primary);
-  margin-left: 0.5rem;
   transition: background 0.2s ease;
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 
 .word-wrap-button:hover {
@@ -783,7 +887,11 @@
 
 .patches-header h2,
 .discussions-header h2,
-.docs-header h2 {
+.docs-header h2,
+.prs-header h2,
+.issues-header h2,
+.history-header h2,
+.tags-header h2 {
   margin: 0;
   white-space: nowrap;
   flex-shrink: 0;

src/routes/repos/[npub]/[repo]/+page.svelte

@@ -731,6 +731,8 @@
 
   // Mobile view toggle for file list/file viewer
   let showFileListOnMobile = $state(true);
+  // Mobile view toggle for all left/right panels (issues, PRs, patches, discussions, docs, history, tags)
+  let showLeftPanelOnMobile = $state(true);
   // Mobile collapse for clone URLs
   let cloneUrlsExpanded = $state(false);
   
@@ -4005,13 +4007,9 @@
             <button 
               onclick={() => showFileListOnMobile = !showFileListOnMobile} 
               class="mobile-toggle-button"
-              title={showFileListOnMobile ? 'Show file viewer' : 'Show file list'}
+              title="Show file viewer"
             >
-              {#if showFileListOnMobile}
-                <img src="/icons/file-text.svg" alt="Show file viewer" class="icon-inline" />
-              {:else}
-                <img src="/icons/package.svg" alt="Show file list" class="icon-inline" />
-              {/if}
+              <img src="/icons/arrow-right.svg" alt="Show file viewer" class="icon-inline" />
             </button>
           </div>
         </div>
@@ -4054,7 +4052,7 @@
 
       <!-- Commit History View -->
       {#if activeTab === 'history'}
-      <aside class="history-sidebar">
+      <aside class="history-sidebar" class:hide-on-mobile={!showLeftPanelOnMobile && activeTab === 'history'}>
         <div class="history-header">
           <TabsMenu 
             activeTab={activeTab} 
@@ -4062,12 +4060,17 @@
             onTabChange={(tab) => activeTab = tab as typeof activeTab}
           />
           <h2>Commits</h2>
+          <button 
+            onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+            class="mobile-toggle-button"
+            title="Show content"
+          >
+            <img src="/icons/arrow-right.svg" alt="Show content" class="icon-inline" />
+          </button>
         </div>
         {#if loadingCommits}
           <div class="loading">Loading commits...</div>
-        {:else if commits.length === 0}
-          <div class="empty">No commits found</div>
-        {:else}
+        {:else if commits.length > 0}
           <ul class="commit-list">
             {#each commits as commit}
               {@const commitHash = commit.hash || (commit as any).sha || ''}
@@ -4091,7 +4094,7 @@
 
       <!-- Tags View -->
       {#if activeTab === 'tags'}
-      <aside class="tags-sidebar">
+      <aside class="tags-sidebar" class:hide-on-mobile={!showLeftPanelOnMobile && activeTab === 'tags'}>
         <div class="tags-header">
           <TabsMenu 
             activeTab={activeTab} 
@@ -4112,10 +4115,15 @@
               <img src="/icons/plus.svg" alt="New Tag" class="icon" />
             </button>
           {/if}
+          <button 
+            onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+            class="mobile-toggle-button"
+            title="Show content"
+          >
+            <img src="/icons/arrow-right.svg" alt="Show content" class="icon-inline" />
+          </button>
         </div>
-        {#if tags.length === 0}
-          <div class="empty">No tags found</div>
-        {:else}
+        {#if tags.length > 0}
           <ul class="tag-list">
             {#each tags as tag}
               {@const tagHash = tag.hash || ''}
@@ -4136,7 +4144,7 @@
 
       <!-- Issues View -->
       {#if activeTab === 'issues'}
-      <aside class="issues-sidebar">
+      <aside class="issues-sidebar" class:hide-on-mobile={!showLeftPanelOnMobile && activeTab === 'issues'}>
         <div class="issues-header">
           <TabsMenu 
             activeTab={activeTab} 
@@ -4152,12 +4160,17 @@
               <img src="/icons/plus.svg" alt="New Issue" class="icon" />
             </button>
           {/if}
+          <button 
+            onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+            class="mobile-toggle-button"
+            title="Show content"
+          >
+            <img src="/icons/arrow-right.svg" alt="Show content" class="icon-inline" />
+          </button>
         </div>
         {#if loadingIssues}
           <div class="loading">Loading issues...</div>
-        {:else if issues.length === 0}
-          <div class="empty">No issues found</div>
-        {:else}
+        {:else if issues.length > 0}
           <ul class="issue-list">
             {#each issues as issue}
               <li class="issue-item">
@@ -4197,7 +4210,7 @@
 
       <!-- Pull Requests View -->
       {#if activeTab === 'prs'}
-      <aside class="prs-sidebar">
+      <aside class="prs-sidebar" class:hide-on-mobile={!showLeftPanelOnMobile && activeTab === 'prs'}>
         <div class="prs-header">
           <TabsMenu 
             activeTab={activeTab} 
@@ -4213,12 +4226,17 @@
               <img src="/icons/plus.svg" alt="New PR" class="icon" />
             </button>
           {/if}
+          <button 
+            onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+            class="mobile-toggle-button"
+            title="Show content"
+          >
+            <img src="/icons/arrow-right.svg" alt="Show content" class="icon-inline" />
+          </button>
         </div>
         {#if loadingPRs}
           <div class="loading">Loading pull requests...</div>
-        {:else if prs.length === 0}
-          <div class="empty">No pull requests found</div>
-        {:else}
+        {:else if prs.length > 0}
           <ul class="pr-list">
             {#each prs as pr}
               <li class="pr-item">
@@ -4245,7 +4263,7 @@
 
       <!-- Patches View -->
       {#if activeTab === 'patches'}
-      <aside class="patches-sidebar">
+      <aside class="patches-sidebar" class:hide-on-mobile={!showLeftPanelOnMobile && activeTab === 'patches'}>
         <div class="patches-header">
           <TabsMenu 
             activeTab={activeTab} 
@@ -4262,12 +4280,17 @@
               <img src="/icons/plus.svg" alt="New Patch" class="icon" />
             </button>
           {/if}
+          <button 
+            onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+            class="mobile-toggle-button"
+            title="Show content"
+          >
+            <img src="/icons/arrow-right.svg" alt="Show content" class="icon-inline" />
+          </button>
         </div>
         {#if loadingPatches}
           <div class="loading">Loading patches...</div>
-        {:else if patches.length === 0}
-          <div class="empty">No patches found</div>
-        {:else}
+        {:else if patches.length > 0}
           <ul class="patch-list">
             {#each patches as patch}
               <li class="patch-item" class:selected={selectedPatch === patch.id}>
@@ -4293,7 +4316,7 @@
 
       <!-- Discussions View -->
       {#if activeTab === 'discussions'}
-      <aside class="discussions-sidebar">
+      <aside class="discussions-sidebar" class:hide-on-mobile={!showLeftPanelOnMobile && activeTab === 'discussions'}>
         <div class="discussions-header">
           <TabsMenu 
             activeTab={activeTab} 
@@ -4311,12 +4334,17 @@
               <img src="/icons/plus.svg" alt="New Discussion" class="icon" />
             </button>
           {/if}
+          <button 
+            onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+            class="mobile-toggle-button"
+            title="Show content"
+          >
+            <img src="/icons/arrow-right.svg" alt="Show content" class="icon-inline" />
+          </button>
         </div>
         {#if loadingDiscussions}
           <div class="loading">Loading discussions...</div>
-        {:else if discussions.length === 0}
-          <div class="empty">No discussions found</div>
-        {:else}
+        {:else if discussions.length > 0}
           <ul class="discussion-list">
             {#each discussions as discussion}
               {@const hasComments = discussion.comments && discussion.comments.length > 0}
@@ -4351,7 +4379,7 @@
 
       <!-- Docs View -->
       {#if activeTab === 'docs'}
-      <aside class="docs-sidebar">
+      <aside class="docs-sidebar" class:hide-on-mobile={!showLeftPanelOnMobile && activeTab === 'docs'}>
         <div class="docs-header">
           <TabsMenu 
             activeTab={activeTab} 
@@ -4359,13 +4387,19 @@
             onTabChange={(tab) => activeTab = tab as typeof activeTab}
           />
           <h2>Docs</h2>
+          <button 
+            onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+            class="mobile-toggle-button"
+            title="Show content"
+          >
+            <img src="/icons/arrow-right.svg" alt="Show content" class="icon-inline" />
+          </button>
         </div>
-        <div class="empty">Documentation</div>
       </aside>
       {/if}
 
       <!-- Editor Area / Diff View / README -->
-      <div class="editor-area" class:hide-on-mobile={showFileListOnMobile && activeTab === 'files'}>
+      <div class="editor-area" class:hide-on-mobile={(showFileListOnMobile && activeTab === 'files') || (showLeftPanelOnMobile && activeTab !== 'files')}>
         {#if activeTab === 'files' && readmeContent && !currentFile}
           <div class="readme-section">
             <div class="readme-header">
@@ -4376,13 +4410,9 @@
                 <button 
                   onclick={() => showFileListOnMobile = !showFileListOnMobile} 
                   class="mobile-toggle-button"
-                  title={showFileListOnMobile ? 'Show file viewer' : 'Show file list'}
+                  title="Show file list"
                 >
-                  {#if showFileListOnMobile}
-                    <img src="/icons/file-text.svg" alt="Show file viewer" class="icon-inline" />
-                  {:else}
-                    <img src="/icons/package.svg" alt="Show file list" class="icon-inline" />
-                  {/if}
+                  <img src="/icons/arrow-right.svg" alt="Show file list" class="icon-inline mobile-toggle-left" />
                 </button>
               </div>
             </div>
@@ -4425,13 +4455,9 @@
               <button 
                 onclick={() => showFileListOnMobile = !showFileListOnMobile} 
                 class="mobile-toggle-button"
-                title={showFileListOnMobile ? 'Show file viewer' : 'Show file list'}
+                title="Show file list"
               >
-                {#if showFileListOnMobile}
-                  <img src="/icons/file-text.svg" alt="Show file viewer" class="icon-inline" />
-                {:else}
-                  <img src="/icons/package.svg" alt="Show file list" class="icon-inline" />
-                {/if}
+                <img src="/icons/arrow-right.svg" alt="Show file list" class="icon-inline mobile-toggle-left" />
               </button>
             </div>
           </div>
@@ -4459,12 +4485,30 @@
             </div>
           {/if}
         {:else if activeTab === 'files'}
+          <div class="content-header-mobile">
+            <button 
+              onclick={() => showFileListOnMobile = !showFileListOnMobile} 
+              class="mobile-toggle-button"
+              title="Show file list"
+            >
+              <img src="/icons/arrow-right.svg" alt="Show file list" class="icon-inline mobile-toggle-left" />
+            </button>
+          </div>
           <div class="empty-state">
             <p>Select a file from the sidebar to view and edit it</p>
           </div>
         {/if}
 
         {#if activeTab === 'history' && showDiff}
+          <div class="content-header-mobile">
+            <button 
+              onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+              class="mobile-toggle-button"
+              title="Show list"
+            >
+              <img src="/icons/arrow-right.svg" alt="Show list" class="icon-inline mobile-toggle-left" />
+            </button>
+          </div>
           <div class="diff-view">
             <div class="diff-header">
               <h3>Diff for commit {selectedCommit?.slice(0, 7)}</h3>
@@ -4484,19 +4528,46 @@
             {/each}
           </div>
         {:else if activeTab === 'history'}
+          <div class="content-header-mobile">
+            <button 
+              onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+              class="mobile-toggle-button"
+              title="Show list"
+            >
+              <img src="/icons/arrow-right.svg" alt="Show list" class="icon-inline mobile-toggle-left" />
+            </button>
+          </div>
           <div class="empty-state">
             <p>Select a commit to view its diff</p>
           </div>
         {/if}
 
         {#if activeTab === 'tags'}
+          <div class="content-header-mobile">
+            <button 
+              onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+              class="mobile-toggle-button"
+              title="Show list"
+            >
+              <img src="/icons/arrow-right.svg" alt="Show list" class="icon-inline mobile-toggle-left" />
+            </button>
+          </div>
           <div class="empty-state">
             <p>Tags are displayed in the sidebar</p>
           </div>
         {/if}
 
         {#if activeTab === 'issues'}
-          <div class="issues-content">
+          <div class="issues-content" class:hide-on-mobile={showLeftPanelOnMobile && activeTab === 'issues'}>
+            <div class="content-header-mobile">
+              <button 
+                onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+                class="mobile-toggle-button"
+                title="Show list"
+              >
+                <img src="/icons/arrow-right.svg" alt="Show list" class="icon-inline mobile-toggle-left" />
+              </button>
+            </div>
             {#if issues.length === 0}
               <div class="empty-state">
                 <p>No issues found. Create one to get started!</p>
@@ -4521,7 +4592,16 @@
         {/if}
 
         {#if activeTab === 'prs'}
-          <div class="prs-content">
+          <div class="prs-content" class:hide-on-mobile={showLeftPanelOnMobile && activeTab === 'prs'}>
+            <div class="content-header-mobile">
+              <button 
+                onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+                class="mobile-toggle-button"
+                title="Show list"
+              >
+                <img src="/icons/arrow-right.svg" alt="Show list" class="icon-inline mobile-toggle-left" />
+              </button>
+            </div>
             {#if prs.length === 0}
               <div class="empty-state">
                 <p>No pull requests found. Create one to get started!</p>
@@ -4577,7 +4657,16 @@
         {/if}
 
         {#if activeTab === 'patches'}
-          <div class="patches-content">
+          <div class="patches-content" class:hide-on-mobile={showLeftPanelOnMobile && activeTab === 'patches'}>
+            <div class="content-header-mobile">
+              <button 
+                onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+                class="mobile-toggle-button"
+                title="Show list"
+              >
+                <img src="/icons/arrow-right.svg" alt="Show list" class="icon-inline mobile-toggle-left" />
+              </button>
+            </div>
             {#if patches.length === 0}
               <div class="empty-state">
                 <p>No patches found. Create one to get started!</p>
@@ -4605,7 +4694,16 @@
         {/if}
 
         {#if activeTab === 'discussions'}
-          <div class="discussions-content">
+          <div class="discussions-content" class:hide-on-mobile={showLeftPanelOnMobile && activeTab === 'discussions'}>
+            <div class="content-header-mobile">
+              <button 
+                onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+                class="mobile-toggle-button"
+                title="Show list"
+              >
+                <img src="/icons/arrow-right.svg" alt="Show list" class="icon-inline mobile-toggle-left" />
+              </button>
+            </div>
             {#if discussions.length === 0}
               <div class="empty-state">
                 <p>No discussions found. {#if userPubkey}Create a new discussion thread to get started!{:else}Log in to create a discussion thread.{/if}</p>
@@ -4843,7 +4941,16 @@
         {/if}
 
         {#if activeTab === 'docs'}
-          <div class="docs-content">
+          <div class="docs-content" class:hide-on-mobile={showLeftPanelOnMobile && activeTab === 'docs'}>
+            <div class="content-header-mobile">
+              <button 
+                onclick={() => showLeftPanelOnMobile = !showLeftPanelOnMobile} 
+                class="mobile-toggle-button"
+                title="Show list"
+              >
+                <img src="/icons/arrow-right.svg" alt="Show list" class="icon-inline mobile-toggle-left" />
+              </button>
+            </div>
             {#if loadingDocs}
               <div class="loading">Loading documentation...</div>
             {:else if documentationHtml}