From a29152aa76164052d99a251b6a5d3c0a2684cd33 Mon Sep 17 00:00:00 2001
From: Faisal Amir <urmauur@gmail.com>
Date: Sun, 25 May 2025 01:09:07 +0700
Subject: [PATCH] fix: text component scaling (#5090)

* fix: text component scaling

* chore: update scaling text xs to 0.75
---
 web-app/src/containers/ThreadContent.tsx             | 2 +-
 web-app/src/containers/dialogs/EditJsonMCPserver.tsx | 2 +-
 web-app/src/index.css                                | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web-app/src/containers/ThreadContent.tsx b/web-app/src/containers/ThreadContent.tsx
index 3089a3014..711543868 100644
--- a/web-app/src/containers/ThreadContent.tsx
+++ b/web-app/src/containers/ThreadContent.tsx
@@ -358,7 +358,7 @@ export const ThreadContent = memo(
                                 backgroundColor: 'transparent',
                                 height: '100%',
                               }}
-                              className="w-full h-full"
+                              className="w-full h-full !text-sm"
                             />
                           </div>
                         </div>
diff --git a/web-app/src/containers/dialogs/EditJsonMCPserver.tsx b/web-app/src/containers/dialogs/EditJsonMCPserver.tsx
index d825217f5..1720868df 100644
--- a/web-app/src/containers/dialogs/EditJsonMCPserver.tsx
+++ b/web-app/src/containers/dialogs/EditJsonMCPserver.tsx
@@ -73,7 +73,7 @@ export default function EditJsonMCPserver({
                 fontFamily: 'ui-monospace',
                 backgroundColor: 'transparent',
               }}
-              className="w-full "
+              className="w-full !text-sm "
             />
           </div>
           {error && <div className="text-destructive text-sm">{error}</div>}
diff --git a/web-app/src/index.css b/web-app/src/index.css
index 70c62d823..cb59f3459 100644
--- a/web-app/src/index.css
+++ b/web-app/src/index.css
@@ -22,6 +22,7 @@
   --color-destructive-fg: var(--app-destructive-fg);
 
   /* Font scale based on --font-size-base */
+  --text-xs: calc(var(--font-size-base) * 0.75); /* ~12px */
   --text-sm: calc(var(--font-size-base) * 0.875); /* ~14px */
   --text-base: var(--font-size-base); /* ~16px */
   --text-lg: calc(var(--font-size-base) * 1.125); /* ~18px */