From e7ee5fc2f1cda93f23c56e7e80081b182c2c5397 Mon Sep 17 00:00:00 2001
From: Abhijay Jain <abhijay007j@gmail.com>
Date: Mon, 25 Aug 2025 23:01:51 +0530
Subject: [PATCH] fix: fixed chat mode extension list modal scroll (#4305)

Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>
---
 .../settings/permission/PermissionRulesModal.tsx  | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/ui/desktop/src/components/settings/permission/PermissionRulesModal.tsx b/ui/desktop/src/components/settings/permission/PermissionRulesModal.tsx
index a8c97e20..a9bfc267 100644
--- a/ui/desktop/src/components/settings/permission/PermissionRulesModal.tsx
+++ b/ui/desktop/src/components/settings/permission/PermissionRulesModal.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../../ui/dialog';
-import { ScrollArea } from '../../ui/scroll-area';
 import { FixedExtensionEntry, useConfig } from '../../ConfigContext';
 import { ChevronRight } from 'lucide-react';
 import PermissionModal from './PermissionModal';
@@ -86,8 +85,8 @@ export default function PermissionRulesModal({ isOpen, onClose }: PermissionRule
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[800px] max-h-[80vh] p-0">
-        <DialogHeader className="px-8 pt-6 pb-4">
+      <DialogContent className="sm:max-w-[800px] max-h-[80vh] p-0 flex flex-col overflow-hidden">
+        <DialogHeader className="px-8 pt-6 pb-4 flex-shrink-0">
           <div className="flex items-center gap-4">
             <div className="rounded-full bg-background-inverse w-16 h-16 flex items-center justify-center">
               <svg
@@ -117,13 +116,13 @@ export default function PermissionRulesModal({ isOpen, onClose }: PermissionRule
           </div>
         </DialogHeader>
 
-        <ScrollArea className="flex-1 px-8 pb-8">
-          <div className="space-y-8">
+        <div className="flex-1 overflow-y-auto px-8 pb-8 min-h-0">
+          <div className="space-y-4">
             {/* Extension Rules Section */}
             <RulesSection
               title="Extension rules"
               rules={
-                <>
+                <div className="space-y-2">
                   {extensions.map((extension) => (
                     <RuleItem
                       key={extension.name}
@@ -131,11 +130,11 @@ export default function PermissionRulesModal({ isOpen, onClose }: PermissionRule
                       description={'description' in extension ? extension.description || '' : ''}
                     />
                   ))}
-                </>
+                </div>
               }
             />
           </div>
-        </ScrollArea>
+        </div>
       </DialogContent>
     </Dialog>
   );