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 (