More minor fixes

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>}>

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">

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>
   )
 }

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}