diff --git a/packages/app/src/components/ui/combobox.tsx b/packages/app/src/components/ui/combobox.tsx
index be6b84472..46d89a95b 100644
--- a/packages/app/src/components/ui/combobox.tsx
+++ b/packages/app/src/components/ui/combobox.tsx
@@ -106,19 +106,19 @@ function toNumericStyleValue(value: unknown): number | null {
function ComboboxSheetBackground({ style }: BottomSheetBackgroundProps) {
const { theme } = useUnistyles();
- return (
-
+ const combinedStyle = useMemo(
+ () => [
+ style,
+ {
+ backgroundColor: theme.colors.surface0,
+ borderTopLeftRadius: theme.borderRadius["2xl"],
+ borderTopRightRadius: theme.borderRadius["2xl"],
+ },
+ ],
+ [style, theme.colors.surface0, theme.borderRadius],
);
+
+ return ;
}
export interface SearchInputProps {
@@ -157,7 +157,7 @@ export function SearchInput({
[styles.comboboxItemContent, description && styles.comboboxItemContentInline],
+ [description],
+ );
+
return (
{leadingContent}
-
+
{label}
@@ -722,6 +727,48 @@ export function Combobox({
const content = children ?? defaultContent;
+ const handleIndicatorStyle = useMemo(
+ () => ({ backgroundColor: theme.colors.palette.zinc[600] }),
+ [theme.colors.palette.zinc],
+ );
+
+ const comboboxTitleStyle = useMemo(
+ () => [styles.comboboxTitle, { color: titleColor }],
+ [titleColor],
+ );
+
+ const desktopContainerStyle = useMemo(
+ () => [
+ styles.desktopContainer,
+ {
+ position: "absolute" as const,
+ minWidth: desktopMinWidth ?? referenceWidth ?? 200,
+ maxWidth: Math.max(400, desktopMinWidth ?? 0),
+ },
+ desktopFixedHeight != null
+ ? { minHeight: desktopFixedHeight, maxHeight: desktopFixedHeight }
+ : null,
+ desktopPositionStyle,
+ shouldHideDesktopContent ? { opacity: 0 } : null,
+ typeof availableSize?.height === "number"
+ ? { maxHeight: Math.min(availableSize.height, desktopFixedHeight ?? 400) }
+ : null,
+ ],
+ [
+ desktopMinWidth,
+ referenceWidth,
+ desktopFixedHeight,
+ desktopPositionStyle,
+ shouldHideDesktopContent,
+ availableSize?.height,
+ ],
+ );
+
+ const desktopAboveSearchContentContainerStyle = useMemo(
+ () => [styles.desktopScrollContent, styles.desktopScrollContentAboveSearch],
+ [],
+ );
+
if (isMobile) {
return (
-
+
{title}
@@ -765,22 +812,7 @@ export function Combobox({
testID="combobox-desktop-container"
entering={shouldUseDesktopFade ? FadeIn.duration(100) : undefined}
exiting={shouldUseDesktopFade ? FadeOut.duration(100) : undefined}
- style={[
- styles.desktopContainer,
- {
- position: "absolute",
- minWidth: desktopMinWidth ?? referenceWidth ?? 200,
- maxWidth: Math.max(400, desktopMinWidth ?? 0),
- },
- desktopFixedHeight != null
- ? { minHeight: desktopFixedHeight, maxHeight: desktopFixedHeight }
- : null,
- desktopPositionStyle,
- shouldHideDesktopContent ? { opacity: 0 } : null,
- typeof availableSize?.height === "number"
- ? { maxHeight: Math.min(availableSize.height, desktopFixedHeight ?? 400) }
- : null,
- ]}
+ style={desktopContainerStyle}
ref={refs.setFloating}
collapsable={false}
onLayout={handleDesktopContentLayout}
@@ -804,10 +836,7 @@ export function Combobox({
{effectiveOptionsPosition === "above-search" ? (
({
justifyContent: "flex-end",
},
}));
+
+const SEARCH_INPUT_STYLE = [styles.searchInput, IS_WEB && { outlineStyle: "none" }];