setting overflow scroll to outer element

src/components/Settings.tsx

@@ -520,7 +520,7 @@ export default (props: { setShow: Dispatch<boolean> }) => {
           {Tr("Settings")}
         </Button>
       </SheetTrigger>
-      <SheetContent className="flex flex-col">
+      <SheetContent className="flex flex-col overflow-scroll">
         <ScrollArea>
           <SheetHeader>
             <SheetTitle>{Tr("Settings")}</SheetTitle>

src/components/ui/scroll-area.tsx

@@ -9,7 +9,7 @@ const ScrollArea = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
-    className={cn("relative overflow-hidden", className)}
+    className={cn("relative", className)}
     {...props}
   >
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">

src/pages/Chatbox.tsx

@@ -430,7 +430,7 @@ export default function ChatBOX() {
     <>
       <div className="flex flex-col p-2 gap-2 w-full">
         <div className="flex items-center gap-2 justify-between">
-          {true && <Settings setShow={setShowSettings} />}
+          <Settings setShow={setShowSettings} />
           <Button
             variant="outline"
             size="icon"