History

fix(web): align thread details panel controls and menus (#3606)

maria committed 4 months ago

Commit 7bf0a2c1 parent 2f774f811 files · +81 −19Browse files

Showing the changes to apps/web/src/components/ProjectScriptsControl.tsx (1 of 11 files). Show all

Unified · Split

apps/web/src/components/ProjectScriptsControl.tsx+10−2
@@ -63,6 +63,7 @@ import { cn } from "~/lib/utils"; · 62 unmodified lines
63import {63import {
64 THREAD_DETAILS_PANEL_CHEVRON_CLASS,64 THREAD_DETAILS_PANEL_CHEVRON_CLASS,
65 THREAD_DETAILS_PANEL_ICON_CLASS,65 THREAD_DETAILS_PANEL_ICON_CLASS,
66 THREAD_DETAILS_PANEL_ROW_POPUP_CLASS,
66 THREAD_DETAILS_PANEL_ROW_CLASS,67 THREAD_DETAILS_PANEL_ROW_CLASS,
67 THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS,68 THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS,
68 THREAD_DETAILS_PANEL_SPLIT_PRIMARY_CLASS,69 THREAD_DETAILS_PANEL_SPLIT_PRIMARY_CLASS,
@@ -134,6 +135,7 @@ export default function ProjectScriptsControl({ · 65 unmodified lines
134}: ProjectScriptsControlProps) {135}: ProjectScriptsControlProps) {
135 const isPanel = displayMode === "panel";136 const isPanel = displayMode === "panel";
136 const ActionGroup = isPanel ? "div" : Group;137 const ActionGroup = isPanel ? "div" : Group;
138 const panelAnchorRef = React.useRef<HTMLDivElement | null>(null);
137 const addScriptFormId = React.useId();139 const addScriptFormId = React.useId();
138 const [editingScriptId, setEditingScriptId] = useState<string | null>(null);140 const [editingScriptId, setEditingScriptId] = useState<string | null>(null);
139 const [dialogOpen, setDialogOpen] = useState(false);141 const [dialogOpen, setDialogOpen] = useState(false);
@@ -267,7 +269,9 @@ export default function ProjectScriptsControl({ · 127 unmodified lines
267 <ActionGroup269 <ActionGroup
268 role="group"270 role="group"
269 aria-label="Project scripts"271 aria-label="Project scripts"
270 {...(isPanel ? { className: THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS } : {})}272 {...(isPanel
273 ? { className: THREAD_DETAILS_PANEL_SPLIT_GROUP_CLASS, ref: panelAnchorRef }
274 : {})}
271 >275 >
272 <Tooltip>276 <Tooltip>
273 <TooltipTrigger277 <TooltipTrigger
@@ -316,7 +320,11 @@ export default function ProjectScriptsControl({ · 42 unmodified lines
316 className={isPanel ? THREAD_DETAILS_PANEL_CHEVRON_CLASS : "size-4"}320 className={isPanel ? THREAD_DETAILS_PANEL_CHEVRON_CLASS : "size-4"}
317 />321 />
318 </MenuTrigger>322 </MenuTrigger>
319 <MenuPopup align="end">323 <MenuPopup
324 align="end"
325 {...(isPanel ? { anchor: panelAnchorRef } : {})}
326 className={isPanel ? THREAD_DETAILS_PANEL_ROW_POPUP_CLASS : undefined}
327 >
320 {scripts.map((script) => {328 {scripts.map((script) => {
321 const shortcutLabel = shortcutLabelForCommand(329 const shortcutLabel = shortcutLabelForCommand(
322 keybindings,330 keybindings,