Skip to content

Commit 74712d6

Browse files
chadgauthchadgauth
committed
clean up style
1 parent d83668c commit 74712d6

File tree

1 file changed

+79
-73
lines changed

1 file changed

+79
-73
lines changed

‎webview-ui/src/components/ui/select-dropdown.tsx‎

Lines changed: 79 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -94,84 +94,90 @@ export const SelectDropdown = React.forwardRef<React.ElementRef<typeof DropdownM
9494
// }
9595

9696
return (
97-
<DropdownMenu open={open} onOpenChange={setOpen}>
98-
<DropdownMenuTrigger
99-
ref={ref}
100-
disabled={disabled}
101-
title={title}
102-
className={cn(
103-
"inline-flex items-center gap-1 relative whitespace-nowrap rounded text-xs outline-none",
104-
"bg-vscode-input-background border border-[color:color-mix(in_srgb,var(--vscode-input-foreground)_35%,var(--vscode-input-background))]",
105-
"text-vscode-input-foreground px-2 py-1 min-h-[20px] max-w-[120px] truncate",
106-
"hover:border-vscode-input-border hover:bg-vscode-input-background",
107-
"focus:outline-1 focus:outline-vscode-focusBorder focus:outline-offset-1",
108-
disabled ? "opacity-50 cursor-not-allowed" : "opacity-80 cursor-pointer hover:opacity-100",
109-
triggerClassName,
110-
)}
111-
style={{
112-
width: "100%", // Take full width of parent.
113-
minWidth: "0",
114-
maxWidth: "100%",
115-
}}>
116-
{shouldShowCaret && (
117-
<div className="pointer-events-none opacity-80 flex-shrink-0">
118-
<svg
119-
fill="none"
120-
height="10"
121-
stroke="currentColor"
122-
strokeLinecap="round"
123-
strokeLinejoin="round"
124-
strokeWidth="2"
125-
viewBox="0 0 24 24"
126-
width="10">
127-
<polyline points="18 15 12 9 6 15" />
128-
</svg>
129-
</div>
130-
)}
131-
<span className="truncate">{displayText}</span>
132-
</DropdownMenuTrigger>
97+
<div
98+
className="relative inline-block min-w-0 flex-[0_1_auto]" // Select container styles
99+
>
100+
<DropdownMenu open={open} onOpenChange={setOpen}>
101+
<DropdownMenuTrigger
102+
ref={ref}
103+
disabled={disabled}
104+
title={title}
105+
className={cn(
106+
"inline-flex items-center gap-1 relative whitespace-nowrap rounded text-xs outline-none",
107+
"bg-vscode-input-background border border-[color:color-mix(in_srgb,var(--vscode-input-foreground)_35%,var(--vscode-input-background))]",
108+
"text-vscode-input-foreground px-2 py-1 min-h-[20px] max-w-[120px] truncate",
109+
"hover:border-vscode-input-border hover:bg-vscode-input-background",
110+
"focus:outline-1 focus:outline-vscode-focusBorder focus:outline-offset-1",
111+
disabled ? "opacity-50 cursor-not-allowed" : "opacity-80 cursor-pointer hover:opacity-100",
112+
triggerClassName,
113+
)}
114+
style={{
115+
width: "100%", // Take full width of parent.
116+
minWidth: "0",
117+
maxWidth: "100%",
118+
}}>
119+
{shouldShowCaret && (
120+
<div
121+
className="pointer-events-none opacity-60 text-[10px]" // Caret container styles
122+
>
123+
<svg
124+
fill="none"
125+
height="10"
126+
stroke="currentColor"
127+
strokeLinecap="round"
128+
strokeLinejoin="round"
129+
strokeWidth="2"
130+
viewBox="0 0 24 24"
131+
width="10">
132+
<polyline points="18 15 12 9 6 15" />
133+
</svg>
134+
</div>
135+
)}
136+
<span className="truncate">{displayText}</span>
137+
</DropdownMenuTrigger>
133138

134-
<DropdownMenuContent
135-
align={align}
136-
sideOffset={sideOffset}
137-
onEscapeKeyDown={() => setOpen(false)}
138-
onInteractOutside={() => setOpen(false)}
139-
container={portalContainer}
140-
className={cn(
141-
"bg-vscode-dropdown-background text-vscode-dropdown-foreground border border-vscode-dropdown-border z-50",
142-
contentClassName,
143-
)}>
144-
{options.map((option, index) => {
145-
if (option.type === DropdownOptionType.SEPARATOR) {
146-
return <DropdownMenuSeparator key={`sep-${index}`} />
147-
}
139+
<DropdownMenuContent
140+
align={align}
141+
sideOffset={sideOffset}
142+
onEscapeKeyDown={() => setOpen(false)}
143+
onInteractOutside={() => setOpen(false)}
144+
container={portalContainer}
145+
className={cn(
146+
"bg-vscode-dropdown-background text-vscode-dropdown-foreground border border-vscode-dropdown-border z-50",
147+
contentClassName,
148+
)}>
149+
{options.map((option, index) => {
150+
if (option.type === DropdownOptionType.SEPARATOR) {
151+
return <DropdownMenuSeparator key={`sep-${index}`} />
152+
}
153+
154+
if (
155+
option.type === DropdownOptionType.SHORTCUT ||
156+
(option.disabled && shortcutText && option.label.includes(shortcutText))
157+
) {
158+
return (
159+
<div key={`label-${index}`} className="px-2 py-1.5 text-xs opacity-50">
160+
{option.label}
161+
</div>
162+
)
163+
}
148164

149-
if (
150-
option.type === DropdownOptionType.SHORTCUT ||
151-
(option.disabled && shortcutText && option.label.includes(shortcutText))
152-
) {
153165
return (
154-
<div key={`label-${index}`} className="px-2 py-1.5 text-xs opacity-50">
166+
<DropdownMenuItem
167+
key={`item-${option.value}`}
168+
disabled={option.disabled}
169+
className={cn(
170+
"cursor-pointer text-xs focus:bg-vscode-list-hoverBackground focus:text-vscode-list-hoverForeground",
171+
option.value === value && "bg-vscode-list-focusBackground",
172+
)}
173+
onClick={() => handleSelect(option)}>
155174
{option.label}
156-
</div>
175+
</DropdownMenuItem>
157176
)
158-
}
159-
160-
return (
161-
<DropdownMenuItem
162-
key={`item-${option.value}`}
163-
disabled={option.disabled}
164-
className={cn(
165-
"cursor-pointer text-xs focus:bg-vscode-list-hoverBackground focus:text-vscode-list-hoverForeground",
166-
option.value === value && "bg-vscode-list-focusBackground",
167-
)}
168-
onClick={() => handleSelect(option)}>
169-
{option.label}
170-
</DropdownMenuItem>
171-
)
172-
})}
173-
</DropdownMenuContent>
174-
</DropdownMenu>
177+
})}
178+
</DropdownMenuContent>
179+
</DropdownMenu>
180+
</div>
175181
)
176182
},
177183
)

0 commit comments

Comments
 (0)