From edbc74d66ad588a7460afcab235a024bd8661a0d Mon Sep 17 00:00:00 2001
From: maxtara <max.tarasuik@gmail.com>
Date: Thu, 12 Feb 2026 21:17:20 +1100
Subject: [PATCH 1/2] fix: settings modal scrolling and viewport clipping

- Add overflow-y-auto to settings content area to enable scrolling
- Add max-h-[90vh] and my-4 to Modal component to prevent clipping
- Make Modal a flex container for proper height distribution
- Fixes issue where settings content was not scrollable on small windows
---
 src/renderer/components/Modal/Modal.tsx                 | 2 +-
 src/renderer/components/SettingsModal/SettingsModal.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/Modal/Modal.tsx b/src/renderer/components/Modal/Modal.tsx
index 36b182cd..a901c465 100644
--- a/src/renderer/components/Modal/Modal.tsx
+++ b/src/renderer/components/Modal/Modal.tsx
@@ -92,7 +92,7 @@ export const Modal: React.FC<ModalProps> & {
       data-testid={testId}
     >
       <div
-        className="bg-copilot-surface border border-copilot-border rounded-lg shadow-xl max-w-[90%]"
+        className="bg-copilot-surface border border-copilot-border rounded-lg shadow-xl max-w-[90%] max-h-[90vh] flex flex-col my-4"
         style={{ width, WebkitAppRegion: 'no-drag' } as React.CSSProperties}
         role="dialog"
         aria-modal="true"
diff --git a/src/renderer/components/SettingsModal/SettingsModal.tsx b/src/renderer/components/SettingsModal/SettingsModal.tsx
index be51bd10..7d0ca9f0 100644
--- a/src/renderer/components/SettingsModal/SettingsModal.tsx
+++ b/src/renderer/components/SettingsModal/SettingsModal.tsx
@@ -684,7 +684,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Settings" width="600px" testId="settings-modal">
-      <div className="flex min-h-[400px]">
+      <div className="flex min-h-[400px] flex-1 overflow-hidden">
         {/* Sidebar */}
         <div className="w-40 border-r border-copilot-border p-2 shrink-0">
           {sections.map((section) => (
@@ -704,7 +704,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
         </div>
 
         {/* Content */}
-        <div className="flex-1 p-4">{renderContent()}</div>
+        <div className="flex-1 p-4 overflow-y-auto">{renderContent()}</div>
       </div>
     </Modal>
   );

From 1e178e2fe53f8f98be7f019ca2f5b42eaff9fa9c Mon Sep 17 00:00:00 2001
From: maxtara <max.tarasuik@gmail.com>
Date: Thu, 19 Feb 2026 19:34:59 +1100
Subject: [PATCH 2/2] fix: avoid clipping in settings modal layout

---
 src/renderer/components/SettingsModal/SettingsModal.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/SettingsModal/SettingsModal.tsx b/src/renderer/components/SettingsModal/SettingsModal.tsx
index 7d0ca9f0..bb7e5ebd 100644
--- a/src/renderer/components/SettingsModal/SettingsModal.tsx
+++ b/src/renderer/components/SettingsModal/SettingsModal.tsx
@@ -684,9 +684,9 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose} title="Settings" width="600px" testId="settings-modal">
-      <div className="flex min-h-[400px] flex-1 overflow-hidden">
+      <div className="flex min-h-[400px] flex-1 min-h-0">
         {/* Sidebar */}
-        <div className="w-40 border-r border-copilot-border p-2 shrink-0">
+        <div className="w-40 border-r border-copilot-border p-2 shrink-0 overflow-y-auto">
           {sections.map((section) => (
             <button
               key={section.id}
@@ -704,7 +704,7 @@ export const SettingsModal: React.FC<SettingsModalProps> = ({
         </div>
 
         {/* Content */}
-        <div className="flex-1 p-4 overflow-y-auto">{renderContent()}</div>
+        <div className="flex-1 p-4 overflow-y-auto min-h-0">{renderContent()}</div>
       </div>
     </Modal>
   );