From 37d2152fcdbf99a2473612fc43ca2d7216be63e9 Mon Sep 17 00:00:00 2001
From: Christoph Brandau <c.brandau91@gmail.com>
Date: Sat, 15 Aug 2026 17:15:13 +0200
Subject: [PATCH] feat(branch-panel): improve context menu positioning and
 styling

This update enhances the context menu for branches and tags by
ensuring it fits within the viewport, preventing overflow and
improving usability. Additionally, the styling of the branch
context menu has been adjusted for better visibility and
interaction.

- Added dynamic positioning for context menus to avoid overflow
- Updated CSS for branch context menu to improve layout and usability
- Simplified context menu opening logic for better performance
---
 src/app.css                           |  6 ++-
 src/lib/components/BranchPanel.svelte | 55 +++++++++++++++++----------
 2 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/app.css b/src/app.css
index f998837..31a81c4 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2212,7 +2212,11 @@
     box-shadow: 0 18px 50px rgba(0,0,0,0.5);
   }
 
-  .branch-context-menu,
+  .branch-context-menu {
+    position: fixed;
+    max-height: calc(100vh - 16px);
+    overflow-y: auto;
+  }
   .history-context-menu { position: absolute; }
   .explorer-context-menu,
   .repo-tab-context-menu { position: fixed; }
diff --git a/src/lib/components/BranchPanel.svelte b/src/lib/components/BranchPanel.svelte
index c0888e3..18bae37 100644
--- a/src/lib/components/BranchPanel.svelte
+++ b/src/lib/components/BranchPanel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Check, ChevronDown, ChevronRight, Folder, FolderOpen, GitBranch, GitCompare, GitMerge, HardDrive, Pencil, Plus, Tag as TagIcon, Trash2, Upload, X } from "@lucide/svelte";
+  import { tick } from "svelte";
   import type { GitBranch as GitBranchInfo, GitTag } from "../types";
 
   type BranchTreeNode = BranchFolderNode | BranchLeafNode;
@@ -99,11 +100,12 @@
   let newTagName = $state("");
   let newTagMessage = $state("");
   let tagCreateInput = $state<HTMLInputElement | null>(null);
-  let panelElement = $state<HTMLElement | null>(null);
   let contextBranch = $state<GitBranchInfo | null>(null);
+  let branchContextMenuElement = $state<HTMLElement | null>(null);
   let contextMenuX = $state(0);
   let contextMenuY = $state(0);
   let contextTag = $state<GitTag | null>(null);
+  let tagContextMenuElement = $state<HTMLElement | null>(null);
   let tagContextMenuX = $state(0);
   let tagContextMenuY = $state(0);
   let collapsedBranchFolders = $state<Set<string>>(new Set());
@@ -243,20 +245,31 @@
     onCheckout(branch);
   }
 
-  function openBranchContextMenu(event: MouseEvent, branch: GitBranchInfo) {
+  function fitContextMenuToViewport(element: HTMLElement | null, x: number, y: number) {
+    const rect = element?.getBoundingClientRect();
+    const width = rect?.width ?? 184;
+    const height = rect?.height ?? 0;
+
+    return {
+      x: Math.max(8, Math.min(x + 2, window.innerWidth - width - 8)),
+      y: Math.max(8, Math.min(y + 2, window.innerHeight - height - 8)),
+    };
+  }
+
+  async function openBranchContextMenu(event: MouseEvent, branch: GitBranchInfo) {
     event.preventDefault();
     event.stopPropagation();
     if (isBusy) return;
 
-    const rect = panelElement?.getBoundingClientRect();
-    const rawX = rect ? event.clientX - rect.left : event.offsetX;
-    const rawY = rect ? event.clientY - rect.top : event.offsetY;
-    const maxX = Math.max(8, (rect?.width ?? window.innerWidth) - 192);
-    const maxY = Math.max(8, (rect?.height ?? window.innerHeight) - 226);
-
     contextBranch = branch;
-    contextMenuX = Math.max(8, Math.min(rawX, maxX));
-    contextMenuY = Math.max(8, Math.min(rawY, maxY));
+    contextMenuX = event.clientX + 2;
+    contextMenuY = event.clientY + 2;
+    await tick();
+    if (contextBranch !== branch) return;
+
+    const position = fitContextMenuToViewport(branchContextMenuElement, event.clientX, event.clientY);
+    contextMenuX = position.x;
+    contextMenuY = position.y;
   }
 
   function closeBranchContextMenu() {
@@ -335,20 +348,20 @@
     tagsOpen = true;
   }
 
-  function openTagContextMenu(event: MouseEvent, tag: GitTag) {
+  async function openTagContextMenu(event: MouseEvent, tag: GitTag) {
     event.preventDefault();
     event.stopPropagation();
     if (isBusy) return;
 
-    const rect = panelElement?.getBoundingClientRect();
-    const rawX = rect ? event.clientX - rect.left : event.offsetX;
-    const rawY = rect ? event.clientY - rect.top : event.offsetY;
-    const maxX = Math.max(8, (rect?.width ?? window.innerWidth) - 192);
-    const maxY = Math.max(8, (rect?.height ?? window.innerHeight) - 130);
-
     contextTag = tag;
-    tagContextMenuX = Math.max(8, Math.min(rawX, maxX));
-    tagContextMenuY = Math.max(8, Math.min(rawY, maxY));
+    tagContextMenuX = event.clientX + 2;
+    tagContextMenuY = event.clientY + 2;
+    await tick();
+    if (contextTag !== tag) return;
+
+    const position = fitContextMenuToViewport(tagContextMenuElement, event.clientX, event.clientY);
+    tagContextMenuX = position.x;
+    tagContextMenuY = position.y;
   }
 
   function closeTagContextMenu() {
@@ -381,7 +394,7 @@
 
 <svelte:window on:click={closeAllContextMenus} on:keydown={handleWindowKeydown} on:contextmenu|capture={closeAllContextMenus} />
 
-<section bind:this={panelElement} class="panel branch-panel grid grid-rows-[auto_1fr] overflow-hidden" class:collapsed aria-label="Branches">
+<section class="panel branch-panel grid grid-rows-[auto_1fr] overflow-hidden" class:collapsed aria-label="Branches">
   <div class="section-head">
     <div>
       <span class="eyebrow">Branches</span>
@@ -676,6 +689,7 @@
 
   {#if contextBranch}
     <div
+      bind:this={branchContextMenuElement}
       class="branch-context-menu"
       style={`left: ${contextMenuX}px; top: ${contextMenuY}px;`}
       role="menu"
@@ -723,6 +737,7 @@
 
   {#if contextTag}
     <div
+      bind:this={tagContextMenuElement}
       class="branch-context-menu"
       style={`left: ${tagContextMenuX}px; top: ${tagContextMenuY}px;`}
       role="menu"