mirror of
https://github.com/OpenHands/OpenHands.git
synced 2026-10-07 16:38:34 +08:00
1b03dbac43
The sidebar filter dropdown had no max height, so on small windows its Organize/Sort/Show sections extended past the viewport with no way to reach items at the bottom. Cap height to available viewport space and use overflow-y-auto with the custom scrollbar only when content overflows. Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: hieptl <hieptl.developer@gmail.com>
91 lines
3.5 KiB
TypeScript
91 lines
3.5 KiB
TypeScript
import { cn } from "#/utils/utils";
|
|
import { formControlShellClassName } from "#/utils/form-control-classes";
|
|
|
|
/** Snap hover colors instantly — no transition-colors delay on menus/dropdowns. */
|
|
export const dropdownInstantColorClassName = "transition-none";
|
|
|
|
/** 2px vertical gap between rows in a dropdown/context menu list. */
|
|
export const dropdownMenuListGapClassName = "gap-0.5";
|
|
|
|
/** Standard horizontal gap between a row icon and its label. */
|
|
export const dropdownMenuRowGapClassName = "gap-2";
|
|
|
|
/** Flex column shell for a dropdown menu item list. */
|
|
export const dropdownMenuListClassName = cn(
|
|
"flex flex-col",
|
|
dropdownMenuListGapClassName,
|
|
);
|
|
|
|
/** Combobox/select trigger shell with instant hover colors. */
|
|
export const dropdownTriggerShellClassName = cn(
|
|
"bg-tertiary border border-[var(--oh-border-input)] rounded p-2",
|
|
"flex items-center gap-2",
|
|
formControlShellClassName,
|
|
dropdownInstantColorClassName,
|
|
"group w-full gap-2 px-3 text-[var(--oh-muted)] hover:text-white",
|
|
);
|
|
|
|
/** Standard white-label menu row. */
|
|
export const dropdownMenuRowClassName = cn(
|
|
"group flex w-full cursor-pointer items-center rounded px-2 py-2 text-left text-sm font-normal text-white",
|
|
dropdownMenuRowGapClassName,
|
|
"hover:bg-[var(--oh-interactive-hover)] disabled:cursor-not-allowed disabled:opacity-60",
|
|
dropdownInstantColorClassName,
|
|
);
|
|
|
|
/** Menu row using foreground token (context menus). */
|
|
export const dropdownMenuRowForegroundClassName = cn(
|
|
"group flex w-full cursor-pointer items-center rounded px-2 py-2 text-start text-sm font-normal",
|
|
dropdownMenuRowGapClassName,
|
|
"text-[var(--oh-foreground)] hover:bg-[var(--oh-interactive-hover)]",
|
|
"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent",
|
|
dropdownInstantColorClassName,
|
|
);
|
|
|
|
/** Icon inside a menu row — muted until row hover/focus. */
|
|
export const dropdownMenuRowIconClassName = cn(
|
|
"shrink-0 text-[var(--oh-muted)] group-hover:text-white group-focus-visible:text-white",
|
|
dropdownInstantColorClassName,
|
|
);
|
|
|
|
/** Wrapper for SVG/React icon nodes inside a menu row. */
|
|
export const dropdownMenuRowIconWrapperClassName = cn(
|
|
"flex size-4 shrink-0 items-center justify-center [&_svg]:text-current",
|
|
dropdownMenuRowIconClassName,
|
|
);
|
|
|
|
/** Enum/filter dropdown trigger chip. */
|
|
export const dropdownFilterTriggerClassName = cn(
|
|
"inline-flex cursor-pointer items-center gap-1.5 rounded-lg border px-3 py-2 text-sm font-medium",
|
|
"border-[var(--oh-border)] bg-base-secondary text-white",
|
|
"focus-visible:border-white/40 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-white/20",
|
|
dropdownInstantColorClassName,
|
|
);
|
|
|
|
/**
|
|
* Scroll cap for the switch-profile menu: four two-line rows
|
|
* (p-2 + leading-5 title + gap-0.5 + leading-4 subtitle) plus list gaps.
|
|
*/
|
|
export const switchProfileMenuListScrollClassName = cn(
|
|
dropdownMenuListClassName,
|
|
"overflow-y-auto custom-scrollbar-always",
|
|
"max-h-[13.875rem]",
|
|
);
|
|
|
|
/**
|
|
* Tall sidebar/context menus: cap height to the viewport and scroll with the
|
|
* custom scrollbar when content overflows (no scrollbar when everything fits).
|
|
*/
|
|
export const dropdownMenuViewportScrollClassName = cn(
|
|
"overflow-y-auto custom-scrollbar",
|
|
"max-h-[min(60vh,calc(100dvh-5rem))]",
|
|
);
|
|
|
|
/** Footer action row inside a dropdown panel. */
|
|
export const dropdownFooterActionClassName = cn(
|
|
"group flex w-full items-center rounded-md px-2 py-2 text-sm font-normal text-white",
|
|
dropdownMenuRowGapClassName,
|
|
"hover:bg-[var(--oh-interactive-hover)]",
|
|
dropdownInstantColorClassName,
|
|
);
|