add scrollarea to settings

src/app/(home)/admin/stream/obs-control-panel/_components/obs-control-panel-client.tsx

@@ -12,6 +12,7 @@ import {
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { ScrollArea } from '@/components/ui/scroll-area'
 import {
   Select,
   SelectContent,
@@ -450,13 +451,13 @@ function Settings() {
 
   return (
     <div className='space-y-4'>
-      <div className='flex items-center justify-between'>
+      <div className='flex items-center justify-between px-4'>
         <h3 className='font-medium text-lg'>Field Mappings</h3>
         <Button onClick={addMapping} size='sm'>
           Add Mapping
         </Button>
       </div>
-
+      <ScrollArea className='h-[500px] p-4'>
         <div className='space-y-2'>
           {mappings.map((mapping, index) => (
             <div key={index} className='flex items-center gap-2'>
@@ -468,8 +469,8 @@ function Settings() {
               >
                 <SelectTrigger className='w-[200px]'>
                   <SelectValue placeholder='Select field'>
-                  {formFields.find((f) => f.id === mapping.formField)?.label ||
-                    'Select field'}
+                    {formFields.find((f) => f.id === mapping.formField)
+                      ?.label || 'Select field'}
                   </SelectValue>
                 </SelectTrigger>
                 <SelectContent>
@@ -551,6 +552,7 @@ function Settings() {
             ))}
           </div>
         </div>
+      </ScrollArea>
     </div>
   )
 }