From ada2c840b983da0639d809c8a08d826238a09ea9 Mon Sep 17 00:00:00 2001
From: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
Date: Fri, 20 Mar 2026 11:52:23 +0000
Subject: [PATCH 1/5] fix: keep settings dialog within viewport with hidden
 scrollbar

---
 app/globals.css                | 8 ++++++++
 components/settings-dialog.tsx | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index f475439..54312ed 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -257,6 +257,14 @@
     .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
         background-color: oklch(0.45 0.015 260);
     }
+    .scrollbar-hidden {
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+    }
+
+    .scrollbar-hidden::-webkit-scrollbar {
+        display: none;
+    }
 }
 
 /* Smooth page transitions */
diff --git a/components/settings-dialog.tsx b/components/settings-dialog.tsx
index ce548f7..8ce5aaa 100644
--- a/components/settings-dialog.tsx
+++ b/components/settings-dialog.tsx
@@ -279,7 +279,7 @@ function SettingsContent({
     }
 
     return (
-        <DialogContent className="sm:max-w-lg p-0 gap-0">
+        <DialogContent className="sm:max-w-lg p-0 gap-0 max-h-[90vh] flex flex-col">
             {/* Header */}
             <DialogHeader className="px-6 pt-6 pb-4">
                 <DialogTitle>{dict.settings.title}</DialogTitle>
@@ -289,7 +289,7 @@ function SettingsContent({
             </DialogHeader>
 
             {/* Content */}
-            <div className="px-6 pb-6">
+            <div className="px-6 pb-6 overflow-y-auto flex-1 scrollbar-hidden">
                 <div className="divide-y divide-border-subtle">
                     {/* API Keys & Models */}
                     {onOpenModelConfig && (

From 9b9a291e2bd4b35a7a08888cc7eda2f20f0ca7a5 Mon Sep 17 00:00:00 2001
From: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
Date: Fri, 20 Mar 2026 12:31:16 +0000
Subject: [PATCH 2/5] scrollbar hidden to thin

---
 components/settings-dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/settings-dialog.tsx b/components/settings-dialog.tsx
index 8ce5aaa..4cdda6f 100644
--- a/components/settings-dialog.tsx
+++ b/components/settings-dialog.tsx
@@ -289,7 +289,7 @@ function SettingsContent({
             </DialogHeader>
 
             {/* Content */}
-            <div className="px-6 pb-6 overflow-y-auto flex-1 scrollbar-hidden">
+            <div className="px-6 pb-6 overflow-y-auto flex-1 scrollbar-thin">
                 <div className="divide-y divide-border-subtle">
                     {/* API Keys & Models */}
                     {onOpenModelConfig && (

From 529a3fe2e597448aa9a1c590a2b814f6be8dcd60 Mon Sep 17 00:00:00 2001
From: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
Date: Tue, 24 Mar 2026 12:00:13 +0000
Subject: [PATCH 3/5] git commit -m "Remove unintended global.css changes from
 PR"

---
 app/globals.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 54312ed..f475439 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -257,14 +257,6 @@
     .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
         background-color: oklch(0.45 0.015 260);
     }
-    .scrollbar-hidden {
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-    }
-
-    .scrollbar-hidden::-webkit-scrollbar {
-        display: none;
-    }
 }
 
 /* Smooth page transitions */

From 9efec68cbcad91eaddb498b206289ea511324769 Mon Sep 17 00:00:00 2001
From: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
Date: Tue, 24 Mar 2026 12:11:36 +0000
Subject: [PATCH 4/5] change `scrollbar-hidden` to `scrollbar-thin` in
 `ModelSelector` and `AI Model Configuration Right Panel`

---
 components/model-config-dialog.tsx | 2 +-
 components/model-selector.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/model-config-dialog.tsx b/components/model-config-dialog.tsx
index 32db95f..5f82ef7 100644
--- a/components/model-config-dialog.tsx
+++ b/components/model-config-dialog.tsx
@@ -513,7 +513,7 @@ export function ModelConfigDialog({
                     </div>
 
                     {/* Provider Details (Right Panel) */}
-                    <div className="flex-1 min-w-0 flex flex-col overflow-auto [&::-webkit-scrollbar]:hidden ">
+                    <div className="flex-1 min-w-0 flex flex-col overflow-auto scrollbar-thin">
                         {selectedProvider ? (
                             <ScrollArea className="flex-1" ref={scrollRef}>
                                 <div className="p-6 space-y-8">
diff --git a/components/model-selector.tsx b/components/model-selector.tsx
index a2f36c9..dc5faed 100644
--- a/components/model-selector.tsx
+++ b/components/model-selector.tsx
@@ -199,7 +199,7 @@ export function ModelSelector({
                     />
                     <div className="flex flex-1 flex-col min-h-0 overflow-hidden">
                         <div className="flex-1 min-h-0 overflow-hidden">
-                            <ModelSelectorList className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+                            <ModelSelectorList className="overflow-y-auto scrollbar-thin">
                                 <ModelSelectorEmpty>
                                     {displayModels.length === 0 &&
                                     models.length > 0

From c3ff41ce72b91658f1b949ec13ab3162b0144b7e Mon Sep 17 00:00:00 2001
From: Biki Kalita <86558912+Biki-dev@users.noreply.github.com>
Date: Tue, 24 Mar 2026 17:43:53 +0530
Subject: [PATCH 5/5] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 components/settings-dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/settings-dialog.tsx b/components/settings-dialog.tsx
index 4cdda6f..de9b107 100644
--- a/components/settings-dialog.tsx
+++ b/components/settings-dialog.tsx
@@ -279,7 +279,7 @@ function SettingsContent({
     }
 
     return (
-        <DialogContent className="sm:max-w-lg p-0 gap-0 max-h-[90vh] flex flex-col">
+        <DialogContent className="sm:max-w-lg p-0 gap-0 max-h-[90vh] flex flex-col overflow-hidden">
             {/* Header */}
             <DialogHeader className="px-6 pt-6 pb-4">
                 <DialogTitle>{dict.settings.title}</DialogTitle>