From e077b5866f4b94d9f0a08b9fb634c51de291bb0c Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Thu, 25 Dec 2025 12:38:25 +0530
Subject: [PATCH] fix: select atom component relative style

Signed-off-by: Piyush Gupta <piyushguptaa2z123@gmail.com>
---
 packages/ui/src/Atoms/Select/Select.tsx | 120 ++++++++++++------------
 1 file changed, 62 insertions(+), 58 deletions(-)

diff --git a/packages/ui/src/Atoms/Select/Select.tsx b/packages/ui/src/Atoms/Select/Select.tsx
index 926aeeb54..553652574 100644
--- a/packages/ui/src/Atoms/Select/Select.tsx
+++ b/packages/ui/src/Atoms/Select/Select.tsx
@@ -119,66 +119,70 @@ export function Select<T>({
     });
 
     return (
-        <Root
-            defaultOpen={defaultOpen}
-            open={open}
-            onOpenChange={onOpenChange}
-            onValueChange={onValueChange}
-            value={value as string}
-        >
-            <Trigger
-                {...props}
-                className={trigger({
-                    className: props.className,
-                    disabled: props.disabled,
-                })}
+        <div className="relative">
+            <Root
+                defaultOpen={defaultOpen}
+                open={open}
+                onOpenChange={onOpenChange}
+                onValueChange={onValueChange}
+                value={value as string}
             >
-                <Value placeholder={placeholder} />
-                <Icon className={icon()}>
-                    {loading ? (
-                        <Spinner size={16} />
-                    ) : (
-                        <IconChevronGrabberVertical size={16} />
-                    )}
-                </Icon>
-            </Trigger>
-            <Portal>
-                <Content
-                    position="popper"
-                    sideOffset={5}
-                    {...dropdownProps}
-                    style={{
-                        minWidth: "var(--radix-select-trigger-width)",
-                        maxHeight:
-                        "var(--radix-select-content-available-height)",
-                        ...dropdownProps?.style,
-                    }}
-                    className={content({ className: dropdownProps?.className })}
+                <Trigger
+                    {...props}
+                    className={trigger({
+                        className: props.className,
+                        disabled: props.disabled,
+                    })}
                 >
-                    {onSearch && (
-                        <Input
-                            // Prevent radix behaviour
-                            onBlurCapture={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                            }}
-                            autoFocus
-                            icon={IconMagnifyingGlass}
-                            placeholder={searchPlaceholder}
-                            value={searchValue}
-                            onChange={(e) => onSearch(e.target.value)}
-                        />
-                    )}
-                    <ScrollArea.Root className="ScrollAreaRoot" type="auto">
-                        <Viewport asChild>
-                            <ScrollArea.Viewport className="ScrollAreaViewport">
-                                {children}
-                            </ScrollArea.Viewport>
-                        </Viewport>
-                    </ScrollArea.Root>
-                </Content>
-            </Portal>
-        </Root>
+                    <Value placeholder={placeholder} />
+                    <Icon className={icon()}>
+                        {loading ? (
+                            <Spinner size={16} />
+                        ) : (
+                            <IconChevronGrabberVertical size={16} />
+                        )}
+                    </Icon>
+                </Trigger>
+                <Portal>
+                    <Content
+                        position="popper"
+                        sideOffset={5}
+                        {...dropdownProps}
+                        style={{
+                            minWidth: "var(--radix-select-trigger-width)",
+                            maxHeight:
+                                "var(--radix-select-content-available-height)",
+                            ...dropdownProps?.style,
+                        }}
+                        className={content({
+                            className: dropdownProps?.className,
+                        })}
+                    >
+                        {onSearch && (
+                            <Input
+                                // Prevent radix behaviour
+                                onBlurCapture={(e) => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                }}
+                                autoFocus
+                                icon={IconMagnifyingGlass}
+                                placeholder={searchPlaceholder}
+                                value={searchValue}
+                                onChange={(e) => onSearch(e.target.value)}
+                            />
+                        )}
+                        <ScrollArea.Root className="ScrollAreaRoot" type="auto">
+                            <Viewport asChild>
+                                <ScrollArea.Viewport className="ScrollAreaViewport">
+                                    {children}
+                                </ScrollArea.Viewport>
+                            </Viewport>
+                        </ScrollArea.Root>
+                    </Content>
+                </Portal>
+            </Root>
+        </div>
     );
 }