Skip to content

Commit 65d56b4

Browse files
sudomaggiesudomaggie
authored
Merge pull request #1067 from org2AI/dev/fix-compact-dropdown-separators
fix(dropdowns): tighten menu separator spacing
2 parents 25aa5a5 + c9aa142 commit 65d56b4

30 files changed

Lines changed: 80 additions & 51 deletions

File tree

‎docs/frontend-ui-audit-2026-08-29/DropdownGroupSpacing.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Dropdown group spacing UI audit
2+
3+
| Line | Element | Verdict | Reason | Suggested change |
4+
| ------------------------------------------------------------------------------------------------- | -------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
5+
| `src/components/Dropdown/tokens.ts:402` | Menu group separator token | keep with reason | A single design-system token owns the visible inset rule and reduces its local offset from 4px to 2px. | None. |
6+
| `src/scaffold/NavigationSidebar/connectors/SessionFilterButton.tsx:206` | Sidebar filter groups | keep with reason | The menu shown in the reference image consumes the shared compact separator instead of defining local spacing. | None. |
7+
| 32 uses across 24 dropdown/context-menu components | Repeated menu group separators | keep with reason | Standard and custom list-group boundaries consume `menuGroupSeparator`; the central token prevents per-menu spacing drift. | None. |
8+
| `src/components/Dropdown/tokens.ts:412` | Search, section, and footer boundaries | keep with reason | Shared dropdown headers, grouped sections, and footers keep their structural rules without adding list-style margins. | None. |
9+
| `src/engines/ChatPanel/InputArea/components/SlashCommandPortal/MenuRows.tsx:219` | Custom slash-command groups | keep with reason | The custom renderer now uses the same compact inset separator as standard dropdown menus. | None. |
10+
| `src/modules/ProjectManager/WorkItems/components/WorkItemContextMenu/index.tsx:330` | Project/work-item context menus | keep with reason | Divider records remain logical group markers and render with the shared compact separator token. | None. |
11+
| `src/scaffold/NavigationSidebar/connectors/SidebarRamMonitorButton/index.tsx:276` | RAM monitor sections | keep with reason | The shared separator is retained, with an explicit compact margin override so the parent `space-y-2` does not recreate the oversized gap. | None. |
12+
| `src/scaffold/NavigationSidebar/connectors/SidebarRamMonitorButton/MemoryBreakdownSection.tsx:31` | RAM breakdown groups | keep with reason | The nested breakdown uses the same separator and compact override for consistent visible grouping. | None. |
13+
14+
Verdict totals: **0 fix**, **8 keep with reason**, **0 abstract**.

‎src/components/Dropdown/tokens.test.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { describe, expect, it } from "vitest";
2+
3+
import { DROPDOWN_CLASSES } from "./tokens";
4+
5+
describe("dropdown menu group spacing", () => {
6+
it("renders a visible separator with a compact local offset", () => {
7+
expect(DROPDOWN_CLASSES.menuGroupSeparator).toContain("my-0.5");
8+
expect(DROPDOWN_CLASSES.menuGroupSeparator).toContain("border-t");
9+
expect(DROPDOWN_CLASSES.menuGroupSeparator).toContain("border-border-2");
10+
expect(DROPDOWN_CLASSES.menuGroupSeparator).not.toContain("my-1");
11+
});
12+
});

‎src/components/Dropdown/tokens.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -399,13 +399,11 @@ export const DROPDOWN_CLASSES = {
399399
DROPDOWN_ITEM.hoverBgClass,
400400
].join(" "),
401401

402-
/** Full-width structural separator. Row groups use `menuSeparatorInset`. */
403-
menuSeparator: ["border-t", "border-solid", "border-border-2"].join(" "),
404-
405-
/** Inset separator between dropdown list groups. */
406-
menuSeparatorInset: [
402+
/** Inset rule between menu-item groups with a tight 2px local offset. */
403+
menuGroupSeparator: [
407404
"mx-1.5",
408-
"my-1",
405+
"my-0.5",
406+
"shrink-0",
409407
"border-t",
410408
"border-solid",
411409
"border-border-2",

‎src/engines/ChatPanel/ChatHistory/components/TurnPaginationControls.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,9 @@ const TurnPaginationControls: React.FC<TurnPaginationControlsProps> = memo(
306306
{groupChatLabel}
307307
</span>
308308
</button>
309-
<div className="my-1 h-px bg-border-1" />
309+
<div
310+
className={DROPDOWN_CLASSES.menuGroupSeparator}
311+
/>
310312
</>
311313
)}
312314
{switchableMembers.map((member) => {

‎src/engines/ChatPanel/InputArea/components/GitDiffActionsMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ const GitDiffActionsMenu: React.FC<GitDiffActionsMenuProps> = ({
107107
</DropdownItem>
108108
</DropdownItemGroup>
109109

110-
<div className={DROPDOWN_CLASSES.menuSeparatorInset} />
110+
<div className={DROPDOWN_CLASSES.menuGroupSeparator} />
111111

112112
<DropdownItemGroup
113113
label={t("creator.diffMenu.review", { defaultValue: "Review" })}

‎src/engines/ChatPanel/InputArea/components/SlashCommandPortal/MenuRows.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -214,13 +214,13 @@ export const SlashItemRow: React.FC<SlashItemRowProps> = React.memo(
214214

215215
SlashItemRow.displayName = "SlashItemRow";
216216

217-
// ── DividerRow ────────────────────────────────────────────────────────────────
217+
// ── MenuGroupSeparatorRow ────────────────────────────────────────────────────
218218

219-
export const DividerRow: React.FC = () => (
220-
<div className="mx-2 my-1 h-px bg-border-1" />
219+
export const MenuGroupSeparatorRow: React.FC = () => (
220+
<div className={DROPDOWN_CLASSES.menuGroupSeparator} />
221221
);
222222

223-
DividerRow.displayName = "DividerRow";
223+
MenuGroupSeparatorRow.displayName = "MenuGroupSeparatorRow";
224224
// ── Re-export AgentExecMode for callers that need it ──────────────────────────
225225

226226
export type { AgentExecMode };

‎src/engines/ChatPanel/InputArea/components/SlashCommandPortal/SlashCommandMenu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,9 @@ import { useMouseMoved } from "@src/hooks/ui/useMouseMoved";
2626
import { useFloatingPortalPosition } from "../useFloatingPortalPosition";
2727
import FlyoutSubmenu from "./FlyoutSubmenu";
2828
import {
29-
DividerRow,
3029
FlyoutTriggerRow,
3130
ImageRow,
31+
MenuGroupSeparatorRow,
3232
ModeRow,
3333
SectionHeaderRow,
3434
SlashItemRow,
@@ -308,7 +308,7 @@ const SlashCommandMenu: React.FC<SlashCommandPortalProps> = ({
308308
>
309309
{entries.map((entry, mapIdx) => {
310310
if (entry.kind === "divider") {
311-
return <DividerRow key={`divider-${mapIdx}`} />;
311+
return <MenuGroupSeparatorRow key={`divider-${mapIdx}`} />;
312312
}
313313

314314
if (entry.kind === "header") {

‎src/engines/ChatPanel/InputArea/components/SlashCommandPortal/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ export interface ImageEntry {
8484
flatIndex: number;
8585
}
8686

87-
/** Visual separator between sections. */
87+
/** Logical break between sections, rendered as a compact inset rule. */
8888
export interface DividerEntry {
8989
kind: "divider";
9090
}

‎src/engines/ChatPanel/components/SessionHeaderActionsMenu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,7 @@ export const SessionHeaderActionsMenu: React.FC<
411411
{t("chat.importExport.exportAction")}
412412
</span>
413413
</button>
414-
<div className={DROPDOWN_CLASSES.menuSeparatorInset} />
414+
<div className={DROPDOWN_CLASSES.menuGroupSeparator} />
415415
<div
416416
className={`${DROPDOWN_CLASSES.item} w-full justify-between text-left`}
417417
>

‎src/engines/Simulator/components/SimulatorStatusBar/EventFilterDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@ export const EventFilterDropdown: React.FC<EventFilterDropdownProps> = ({
177177
</span>
178178
</div>
179179
<div
180-
className={DROPDOWN_CLASSES.menuSeparatorInset}
180+
className={DROPDOWN_CLASSES.menuGroupSeparator}
181181
role="separator"
182182
/>
183183
{SIMULATOR_EVENT_FILTER_VALUES.map((filter) => {

0 commit comments

Comments
 (0)