change settings container to NonOverflowScrollArea

src/components/Settings.tsx

@@ -76,7 +76,7 @@ import {
 } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
 import { Slider } from "@/components/ui/slider";
-import { ScrollArea } from "@/components/ui/scroll-area";
+import { NonOverflowScrollArea, ScrollArea } from "@/components/ui/scroll-area";
 import { AppContext } from "@/pages/App";
 
 const TTS_VOICES: string[] = [
@@ -520,8 +520,8 @@ export default (props: { setShow: Dispatch<boolean> }) => {
           {Tr("Settings")}
         </Button>
       </SheetTrigger>
-      <SheetContent className="flex flex-col">
+      <SheetContent className="flex flex-col overflow-scroll">
-        <ScrollArea>
+        <NonOverflowScrollArea>
           <SheetHeader>
             <SheetTitle>{Tr("Settings")}</SheetTitle>
             <SheetDescription>
@@ -1142,7 +1142,7 @@ export default (props: { setShow: Dispatch<boolean> }) => {
               </a>
             </p>
           </div>
-        </ScrollArea>
+        </NonOverflowScrollArea>
       </SheetContent>
     </Sheet>
   );

src/components/ui/scroll-area.tsx

@@ -3,6 +3,24 @@ import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
 import { cn } from "@/lib/utils";
 
+const NonOverflowScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative", className)}
+    {...props}
+  >
+    aaa
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
@@ -12,6 +30,7 @@ const ScrollArea = React.forwardRef<
     className={cn("relative overflow-hidden", className)}
     {...props}
   >
+    aaa
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
@@ -43,4 +62,4 @@ const ScrollBar = React.forwardRef<
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar };
+export { NonOverflowScrollArea, ScrollArea, ScrollBar };