From 6942b0b0a45e6c8d069d5763c798aa902c47c862 Mon Sep 17 00:00:00 2001
From: Bhavesh Kshatriya <bhavesh.kshatriya@gmail.com>
Date: Sat, 19 Jul 2025 18:32:33 +0530
Subject: [PATCH] fix(ui): improve code editor styling to match MUI components

---
 src/components/input/ToolCodeInput.tsx | 65 ++++++++++++++++++++++----
 src/config/uiConfig.ts                 |  1 +
 2 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/components/input/ToolCodeInput.tsx b/src/components/input/ToolCodeInput.tsx
index c23553b..18f5ee8 100644
--- a/src/components/input/ToolCodeInput.tsx
+++ b/src/components/input/ToolCodeInput.tsx
@@ -5,7 +5,10 @@ import InputHeader from '../InputHeader';
 import InputFooter from './InputFooter';
 import { useTranslation } from 'react-i18next';
 import Editor from '@monaco-editor/react';
-import { globalInputHeight } from '../../config/uiConfig';
+import {
+  globalInputHeight,
+  codeInputHeightOffset
+} from '../../config/uiConfig';
 
 export default function ToolCodeInput({
   value,
@@ -53,14 +56,58 @@ export default function ToolCodeInput({
   return (
     <Box>
       <InputHeader title={title || t('toolTextInput.input')} />
-      <Box height={globalInputHeight}>
-        <Editor
-          height={'87%'}
-          language={language}
-          theme={theme.palette.mode === 'dark' ? 'vs-dark' : 'light'}
-          value={value}
-          onChange={(value) => onChange(value ?? '')}
-        />
+      <Box
+        height={`${globalInputHeight + codeInputHeightOffset}px`} // The +codeInputHeightOffset compensates for internal padding/border differences between Monaco Editor and MUI TextField
+        sx={{
+          display: 'flex',
+          flexDirection: 'column'
+        }}
+      >
+        <Box
+          sx={(theme) => ({
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            backgroundColor: 'background.paper',
+            '.monaco-editor': {
+              height: '100% !important',
+              outline: 'none !important',
+              '.overflow-guard': {
+                height: '100% !important',
+                border:
+                  theme.palette.mode === 'light'
+                    ? '1px solid rgba(0, 0, 0, 0.23)'
+                    : '1px solid rgba(255, 255, 255, 0.23)',
+                borderRadius: 1,
+                transition: theme.transitions.create(
+                  ['border-color', 'background-color'],
+                  {
+                    duration: theme.transitions.duration.shorter
+                  }
+                )
+              },
+              '&:hover .overflow-guard': {
+                borderColor: theme.palette.text.primary
+              }
+            },
+            '.decorationsOverviewRuler': {
+              display: 'none !important'
+            }
+          })}
+        >
+          <Editor
+            height="100%"
+            language={language}
+            theme={theme.palette.mode === 'dark' ? 'vs-dark' : 'light'}
+            value={value}
+            onChange={(value) => onChange(value ?? '')}
+            options={{
+              overviewRuler: {
+                enabled: false
+              }
+            }}
+          />
+        </Box>
         <InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
         <input
           type="file"
diff --git a/src/config/uiConfig.ts b/src/config/uiConfig.ts
index ef6f148..ecc005c 100644
--- a/src/config/uiConfig.ts
+++ b/src/config/uiConfig.ts
@@ -1,4 +1,5 @@
 export const globalInputHeight = 300;
+export const codeInputHeightOffset = 7; // Offset to visually match Monaco and MUI TextField heights
 export const globalDescriptionFontSize = 12;
 export const categoriesColors: string[] = [
   '#8FBC5D',