fix: scrollbar is not visible; scrollarea is not wholly clickable (#1974)

Author: HichamELBSI

packages/design-system/src/components/Combobox/Combobox.tsx

@@ -292,47 +292,49 @@ const Combobox = React.forwardRef<ComboboxInputElement, ComboboxProps>(
         </Trigger>
         <ComboboxPrimitive.Portal>
           <Content sideOffset={4}>
-            <ComboboxPrimitive.Viewport ref={viewportRef}>
-              <ScrollAreaCombobox>
-                {shouldVirtualizeOptions ? (
-                  <VirtualizedList itemCount={childrenCount}>{children}</VirtualizedList>
-                ) : (
-                  children
-                )}
-                {creatable !== true && !loading ? (
-                  <ComboboxPrimitive.NoValueFound asChild>
-                    <OptionBox $hasHover={false}>
-                      <Typography>{noOptionsMessage(internalTextValue ?? '')}</Typography>
-                    </OptionBox>
-                  </ComboboxPrimitive.NoValueFound>
-                ) : null}
-                {loading ? (
-                  <Flex justifyContent="center" alignItems="center" paddingTop={2} paddingBottom={2}>
-                    <Loader small>{loadingMessage}</Loader>
-                  </Flex>
-                ) : null}
-                <Box id={intersectionId} width="100%" height="1px" />
-              </ScrollAreaCombobox>
-              {creatable ? (
-                <ComboboxCreateItem
-                  onPointerUp={handleCreateItemClick}
-                  onClick={handleCreateItemClick}
-                  disabled={creatableDisabled}
-                  asChild
-                >
-                  <OptionBox>
-                    <Flex gap={2}>
-                      {creatableStartIcon && (
-                        <Box tag="span" aria-hidden display={'inline-flex'}>
-                          {creatableStartIcon}
-                        </Box>
-                      )}
-                      <Typography>{createMessage(internalTextValue ?? '')}</Typography>
+            <ScrollArea>
+              <ComboboxPrimitive.Viewport ref={viewportRef}>
+                <Box padding={1}>
+                  {shouldVirtualizeOptions ? (
+                    <VirtualizedList itemCount={childrenCount}>{children}</VirtualizedList>
+                  ) : (
+                    children
+                  )}
+                  {creatable !== true && !loading ? (
+                    <ComboboxPrimitive.NoValueFound asChild>
+                      <OptionBox $hasHover={false}>
+                        <Typography>{noOptionsMessage(internalTextValue ?? '')}</Typography>
+                      </OptionBox>
+                    </ComboboxPrimitive.NoValueFound>
+                  ) : null}
+                  {loading ? (
+                    <Flex justifyContent="center" alignItems="center" paddingTop={2} paddingBottom={2}>
+                      <Loader small>{loadingMessage}</Loader>
                     </Flex>
-                  </OptionBox>
-                </ComboboxCreateItem>
-              ) : null}
-            </ComboboxPrimitive.Viewport>
+                  ) : null}
+                  <Box id={intersectionId} width="100%" height="1px" />
+                </Box>
+              </ComboboxPrimitive.Viewport>
+            </ScrollArea>
+            {creatable ? (
+              <ComboboxCreateItem
+                onPointerUp={handleCreateItemClick}
+                onClick={handleCreateItemClick}
+                disabled={creatableDisabled}
+                asChild
+              >
+                <OptionBox>
+                  <Flex gap={2}>
+                    {creatableStartIcon && (
+                      <Box tag="span" aria-hidden display={'inline-flex'}>
+                        {creatableStartIcon}
+                      </Box>
+                    )}
+                    <Typography>{createMessage(internalTextValue ?? '')}</Typography>
+                  </Flex>
+                </OptionBox>
+              </ComboboxCreateItem>
+            ) : null}
           </Content>
         </ComboboxPrimitive.Portal>
       </ComboboxPrimitive.Root>
@@ -489,10 +491,6 @@ const ComboboxCreateItem = styled(ComboboxPrimitive.CreateItem)`
   }
 `;
 
-const ScrollAreaCombobox = styled(ScrollArea)`
-  padding: ${({ theme }) => theme.spaces[1]};
-`;
-
 /* -------------------------------------------------------------------------------------------------
  * ComboboxOption
  * -----------------------------------------------------------------------------------------------*/

packages/design-system/src/utilities/ScrollArea/ScrollArea.tsx

@@ -67,16 +67,18 @@ const Thumb = styled(ScrollArea.Thumb)`
   border-radius: 0.4rem;
 
   /* increase target size for touch devices https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
-  &::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-    height: 100%;
-    min-width: 44px;
-    min-height: 44px;
+  @media (hover: none), (pointer: coarse) {
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+      height: 100%;
+      min-width: 44px;
+      min-height: 44px;
+    }
   }
 `;