(chore): Fix AI history dark mode bug

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/.env.local

@@ -110,15 +110,15 @@ export const ChatLayout = ({
                   <Trash2 className='size-4' />
                 </Button>
               </AlertDialogTrigger>
-              <AlertDialogContent>
+              <AlertDialogContent className='border-border'>
                 <AlertDialogHeader>
-                  <AlertDialogTitle>Clear Chat History</AlertDialogTitle>
+                  <AlertDialogTitle className='text-primary'>Clear Chat History</AlertDialogTitle>
                   <AlertDialogDescription>
                     Are you sure you want to clear the chat history? This action cannot be undone.
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogCancel className='text-primary'>Cancel</AlertDialogCancel>
                   <AlertDialogAction onClick={onClearHistory}>Clear History</AlertDialogAction>
                 </AlertDialogFooter>
               </AlertDialogContent>

frontend/src/components/blocks/interview/chat/chat-layout.tsx

@@ -4,6 +4,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
 import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 type ICodeProps = {
   code: string;
@@ -24,7 +25,7 @@ export const CodeViewer: FC<ICodeProps> = ({ code, language }) => {
   };
 
   return (
-    <div className='flex size-full flex-col overflow-y-auto rounded-md'>
+    <div className='flex size-full flex-col text-clip rounded-md'>
       <div className='bg-muted-foreground text-muted dark:bg-muted dark:text-muted-foreground flex w-full items-center justify-between px-3 py-2'>
         <span className='text-sm font-medium'>{language}</span>
         <Button
@@ -41,18 +42,20 @@ export const CodeViewer: FC<ICodeProps> = ({ code, language }) => {
           )}
         </Button>
       </div>
-      <SyntaxHighlighter
-        customStyle={{
-          borderRadius: '0 0 0.3em 0.3em',
-          margin: 0,
-          minHeight: '100px',
-        }}
-        PreTag='div'
-        style={oneDark}
-        language={language}
-      >
-        {code}
-      </SyntaxHighlighter>
+      <ScrollArea className='flex h-full max-h-[calc(100dvh-160px)] flex-col'>
+        <SyntaxHighlighter
+          customStyle={{
+            borderRadius: '0 0 0.3em 0.3em',
+            margin: 0,
+            minHeight: '100px',
+          }}
+          PreTag='div'
+          style={oneDark}
+          language={language}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </ScrollArea>
     </div>
   );
 };

frontend/src/components/blocks/interview/question-attempts/attempt-details/code-viewer.tsx

@@ -31,7 +31,7 @@ export const AttemptDetailsDialog: FC<PropsWithChildren<AttemptDetailsPaneProps>
       ) : (
         <DialogTrigger>{triggerText}</DialogTrigger>
       )}
-      <DialogContent className='border-border text-primary'>
+      <DialogContent className='border-border text-primary flex max-h-dvh flex-col'>
         <DialogHeader>
           <DialogTitle className=''>
             Attempt&nbsp;<span className='font-mono'>{attemptId}</span>