style: add modern-scrollbar class to improve scrollbar appearance

Introduce the modern-scrollbar class to enhance the visual consistency of scrollbars across the application. This class provides a cleaner and more modern look for scrollbars in WebKit and Firefox browsers.

app/components/@settings/core/ControlPanel.tsx

@@ -413,7 +413,7 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
   return (
     <RadixDialog.Root open={open}>
       <RadixDialog.Portal>
-        <div className="fixed inset-0 flex items-center justify-center z-[100]">
+        <div className="fixed inset-0 flex items-center justify-center z-[100] modern-scrollbar">
           <RadixDialog.Overlay asChild>
             <motion.div
               className="absolute inset-0 bg-black/70 dark:bg-black/80 backdrop-blur-sm"

app/components/chat/BaseChat.tsx

@@ -348,7 +348,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
               </div>
             )}
             <StickToBottom
-              className={classNames('pt-6 px-2 sm:px-6 relative', {
+              className={classNames('modern-scrollbar pt-6 px-2 sm:px-6 relative', {
                 'h-full flex flex-col': chatStarted,
               })}
               resize="smooth"

app/components/workbench/EditorPanel.tsx

@@ -114,7 +114,7 @@ export const EditorPanel = memo(
                   </div>
                 )}
               </PanelHeader>
-              <div className="h-full flex-1 overflow-hidden">
+              <div className="h-full flex-1 overflow-hidden modern-scrollbar">
                 <CodeMirrorEditor
                   theme={theme}
                   editable={!isStreaming && editorDocument !== undefined}

app/components/workbench/FileTree.tsx

@@ -143,7 +143,7 @@ export const FileTree = memo(
     };
 
     return (
-      <div className={classNames('text-sm', className, 'overflow-y-auto')}>
+      <div className={classNames('text-sm', className, 'overflow-y-auto modern-scrollbar')}>
         {filteredFileList.map((fileOrFolder) => {
           switch (fileOrFolder.kind) {
             case 'file': {

app/components/workbench/terminal/TerminalTabs.tsx

@@ -150,7 +150,7 @@ export const TerminalTabs = memo(() => {
                 <Terminal
                   key={index}
                   id={`terminal_${index}`}
-                  className={classNames('h-full overflow-hidden', {
+                  className={classNames('h-full overflow-hidden modern-scrollbar-invert', {
                     hidden: !isActive,
                   })}
                   ref={(ref) => {
@@ -166,7 +166,7 @@ export const TerminalTabs = memo(() => {
                 <Terminal
                   key={index}
                   id={`terminal_${index}`}
-                  className={classNames('h-full overflow-hidden', {
+                  className={classNames('modern-scrollbar h-full overflow-hidden', {
                     hidden: !isActive,
                   })}
                   ref={(ref) => {