From b09f8694efddbcbf1b61b265cd5a79370c1bca3a Mon Sep 17 00:00:00 2001
From: Ivan Starkov <istarkov@gmail.com>
Date: Fri, 10 Jan 2025 14:56:45 +0300
Subject: [PATCH] fix: Items in combobox have zero height (#4737)

## Description


![image](https://github.com/user-attachments/assets/64314411-1dd5-49c2-84b0-23815dabb88f)

That's because LI items collapsed under Flex

## Steps for reproduction

1. click button
2. expect xyz

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 packages/design-system/src/components/combobox.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/design-system/src/components/combobox.tsx b/packages/design-system/src/components/combobox.tsx
index 6d10185048..0e94ea322c 100644
--- a/packages/design-system/src/components/combobox.tsx
+++ b/packages/design-system/src/components/combobox.tsx
@@ -39,6 +39,7 @@ import { Box } from "./box";
 import { Flex } from "./flex";
 import { NestedInputButton } from "./nested-input-button";
 import { InputField } from "./input-field";
+import { Grid } from "./grid";
 
 export const ComboboxListbox = styled(
   "ul",
@@ -62,13 +63,9 @@ export const ComboboxScrollArea = forwardRef(
   ) => {
     return (
       <ScrollArea css={{ order: 1 }} {...props}>
-        <Flex
-          ref={forwardRef}
-          direction="column"
-          css={{ maxHeight: theme.spacing[34] }}
-        >
+        <Grid ref={forwardRef} css={{ maxHeight: theme.spacing[34] }}>
           {children}
-        </Flex>
+        </Grid>
       </ScrollArea>
     );
   }