From a3047f142f64fc961426e7f258726b73e9df0749 Mon Sep 17 00:00:00 2001
From: Joachim Krieger <joachim.13@gmx.de>
Date: Tue, 6 Jan 2026 16:07:15 +0100
Subject: [PATCH 1/2] Add vertical divider to buttons with dropdown triggers

---
 web/src/index.css | 33 +++++++++++++++++++++++++++++++++
 web/src/main.tsx  |  7 +++++++
 2 files changed, 40 insertions(+)

diff --git a/web/src/index.css b/web/src/index.css
index 9f68b0ec5..ca2041d56 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -369,4 +369,37 @@
   .leaflet-popup-tip {
     background-color: var(--background) !important;
   }
+
+  /* ========================================
+   * Button Icon Divider Styles
+   * Adds vertical divider to buttons with dropdown triggers
+   * ======================================== */
+
+  /* Scope to buttons with dropdown menu triggers */
+  button[data-slot="button"] [data-slot="dropdown-menu-trigger"] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin-left: 6px;      /* space before divider */
+    padding-left: 8px;     /* space after divider */
+  }
+
+  /* Vertical divider */
+  button[data-slot="button"] [data-slot="dropdown-menu-trigger"]::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 1.25em;        /* tweak to taste */
+    background-color: currentColor; /* matches text color */
+    opacity: 0.4;          /* subtle */
+    pointer-events: none;
+  }
+
+  /* Ensure scrollbar space is always reserved */
+  html {
+    overflow-y: scroll;
+  }
 }
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 3b3f525d0..b34ab76c1 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -52,6 +52,13 @@ function AppInitializer({ children }: { children: React.ReactNode }) {
 }
 
 function Main() {
+  useEffect(() => {
+    // Add has-icon-divider class to buttons with dropdown triggers for styling
+    document
+      .querySelectorAll('button[data-slot="button"]')
+      .forEach((btn) => btn.classList.add('has-icon-divider'));
+  }, []);
+
   return (
     <ErrorBoundary>
       <QueryClientProvider client={queryClient}>

From dc26f199f51dd257b3cec4b42fdc4f51669d14a4 Mon Sep 17 00:00:00 2001
From: Joachim Krieger <joachim.13@gmx.de>
Date: Tue, 6 Jan 2026 16:11:33 +0100
Subject: [PATCH 2/2] Refactor button divider to component-based approach

---
 .../components/ui/button-with-dropdown.tsx    | 43 +++++++++++++++++++
 web/src/components/ui/button.tsx              | 12 +++++-
 web/src/main.tsx                              |  7 ---
 3 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 web/src/components/ui/button-with-dropdown.tsx

diff --git a/web/src/components/ui/button-with-dropdown.tsx b/web/src/components/ui/button-with-dropdown.tsx
new file mode 100644
index 000000000..2b98f325a
--- /dev/null
+++ b/web/src/components/ui/button-with-dropdown.tsx
@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Button, type VariantProps } from "./button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  type DropdownMenuContentProps,
+} from "./dropdown-menu";
+
+interface ButtonWithDropdownProps extends VariantProps<typeof Button> {
+  children: React.ReactNode;
+  menuContent: React.ReactNode;
+  dropdownContentProps?: Omit<DropdownMenuContentProps, "children">;
+  className?: string;
+}
+
+const ButtonWithDropdown = React.forwardRef<HTMLButtonElement, ButtonWithDropdownProps>(
+  ({ children, menuContent, variant, size, dropdownContentProps, className, ...props }, ref) => {
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            ref={ref}
+            variant={variant}
+            size={size}
+            className={className}
+            hasIconDivider
+            {...props}
+          >
+            {children}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent {...dropdownContentProps}>
+          {menuContent}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  }
+);
+
+ButtonWithDropdown.displayName = "ButtonWithDropdown";
+
+export { ButtonWithDropdown };
\ No newline at end of file
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index 13fc5d825..6c7543b23 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -34,11 +34,19 @@ const Button = React.forwardRef<
   React.ComponentProps<"button"> &
     VariantProps<typeof buttonVariants> & {
       asChild?: boolean;
+      hasIconDivider?: boolean;
     }
->(({ className, variant, size, asChild = false, ...props }, ref) => {
+>(({ className, variant, size, asChild = false, hasIconDivider = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button";
 
-  return <Comp ref={ref} data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }), hasIconDivider && "has-icon-divider")}
+      {...props}
+    />
+  );
 });
 Button.displayName = "Button";
 
diff --git a/web/src/main.tsx b/web/src/main.tsx
index b34ab76c1..3b3f525d0 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -52,13 +52,6 @@ function AppInitializer({ children }: { children: React.ReactNode }) {
 }
 
 function Main() {
-  useEffect(() => {
-    // Add has-icon-divider class to buttons with dropdown triggers for styling
-    document
-      .querySelectorAll('button[data-slot="button"]')
-      .forEach((btn) => btn.classList.add('has-icon-divider'));
-  }, []);
-
   return (
     <ErrorBoundary>
       <QueryClientProvider client={queryClient}>