From f8d9178ab03095ade2d33d3ee9293907842d2ec7 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Tue, 28 Jan 2025 12:41:49 +0100
Subject: [PATCH] Fix the width of the popover in JSONEditor. Set a min width
 to 166 px.

---
 .../grid/components/editor/JsonEditor.tsx      | 18 +++---------------
 1 file changed, 3 insertions(+), 15 deletions(-)

diff --git a/apps/studio/components/grid/components/editor/JsonEditor.tsx b/apps/studio/components/grid/components/editor/JsonEditor.tsx
index 599a219656b..b7b78ec3263 100644
--- a/apps/studio/components/grid/components/editor/JsonEditor.tsx
+++ b/apps/studio/components/grid/components/editor/JsonEditor.tsx
@@ -71,8 +71,6 @@ export const JsonEditor = <TRow, TSummaryRow = unknown>({
     id,
   })
 
-  const gridColumn = state.gridColumns.find((x) => x.name == column.key)
-
   const rawInitialValue = row[column.key as keyof TRow] as unknown
   const initialValue =
     rawInitialValue === null || rawInitialValue === undefined || typeof rawInitialValue === 'string'
@@ -180,27 +178,17 @@ export const JsonEditor = <TRow, TSummaryRow = unknown>({
         side="bottom"
         align="start"
         sideOffset={-35}
-        className="rounded-none p-0"
+        className="rounded-none p-0 min-w-[166px]"
         sameWidthAsTrigger
       >
         {isTruncated && !isSuccess ? (
-          <div
-            style={{ width: `${gridColumn?.width || column.width}px` }}
-            className="flex items-center justify-center flex-col relative"
-          >
-            <MonacoEditor
-              readOnly
-              onChange={() => {}}
-              width={`${gridColumn?.width || column.width}px`}
-              value={value ?? ''}
-              language="markdown"
-            />
+          <div className="flex items-center justify-center flex-col relative">
+            <MonacoEditor readOnly onChange={() => {}} value={value ?? ''} language="markdown" />
             <TruncatedWarningOverlay isLoading={isLoading} loadFullValue={loadFullValue} />
           </div>
         ) : (
           <BlockKeys value={value} onEscape={cancelChanges} onEnter={saveChanges}>
             <MonacoEditor
-              width={`${gridColumn?.width || column.width}px`}
               value={value ?? ''}
               language="json"
               readOnly={!isEditable}