From 85bf421d319ae3b4b67c1a49c19dabfb25114514 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Thu, 9 Mar 2023 15:32:11 +0800
Subject: [PATCH] More minor fixes

---
 .../SidePanelEditor/ColumnEditor/ColumnEditor.tsx            | 4 +---
 .../RowEditor/ForeignRowSelector/ForeignRowSelector.tsx      | 4 ++--
 .../RowEditor/ForeignRowSelector/SelectorGrid.tsx            | 5 +++--
 .../TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx  | 1 -
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
index 69ee72b3b1a..c5097858d28 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnEditor.tsx
@@ -199,9 +199,7 @@ const ColumnEditor: FC<Props> = ({
       }
       onInteractOutside={(event) => {
         const isToast = (event.target as Element)?.closest('#toast')
-        if (isToast) {
-          event.preventDefault()
-        }
+        if (isToast) event.preventDefault()
       }}
     >
       <FormSection header={<FormSectionLabel className="lg:!col-span-4">General</FormSectionLabel>}>
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx
index 472703ee19f..156eccfac01 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/ForeignRowSelector.tsx
@@ -87,14 +87,14 @@ const ForeignRowSelector = ({
       size="large"
       header={
         <div>
-          Selecting a record to reference from{' '}
+          Select a record to reference from{' '}
           <code className="font-mono text-sm">
             {schemaName}.{tableName}
           </code>
         </div>
       }
       onCancel={closePanel}
-      customFooter={<ActionBar hideApply backButtonLabel="Close" closePanel={closePanel} />}
+      customFooter={<ActionBar hideApply backButtonLabel="Cancel" closePanel={closePanel} />}
     >
       <SidePanel.Content className="h-full !px-0">
         <div className="h-full">
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
index 2e9e7e5f3d0..f57ba551d13 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/ForeignRowSelector/SelectorGrid.tsx
@@ -33,15 +33,16 @@ const columnRender = (name: string, isPrimaryKey = false) => {
         </Tooltip.Root>
       )}
 
-      <span className="font-mono">{name}</span>
+      <span className="sb-grid-column-header__inner__name">{name}</span>
     </div>
   )
 }
 
 const formatter = (column: string, row: any) => {
+  const formattedValue = typeof row[column] === 'object' ? JSON.stringify(row[column]) : row[column]
   return (
     <div className="group sb-grid-select-cell__formatter overflow-hidden">
-      <span className="font-mono text-xs truncate">{JSON.stringify(row[column])}</span>
+      <span className="text-sm truncate">{formattedValue}</span>
     </div>
   )
 }
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
index d16fe723025..84152699751 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/RowEditor.tsx
@@ -201,7 +201,6 @@ const RowEditor = ({
       </form>
 
       <ForeignRowSelector
-        key={`foreign-row-selector-${referenceRow?.name}`}
         visible={isSelectingForeignKey}
         referenceRow={referenceRow}
         onSelect={onSelectForeignRowValue}