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/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) => {