From d6d419a12e93e5de222bb51366e92b24aa90df15 Mon Sep 17 00:00:00 2001
From: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Date: Thu, 12 Mar 2026 08:58:26 +0100
Subject: [PATCH] fix: improve table editor truncated texts display (#43630)

Fixes #41579
Supersedes #42342 and #41580

## Problem

In the table editor, when the column type is long, it is truncated which
makes it hard to disambiguate `timestamp` from `timestampz` for
instance.

<img width="1310" height="360" alt="image"
src="https://github.com/user-attachments/assets/668b4022-944e-4d10-90b6-8b5173ec45e3"
/>

## Solution

- make the table editor a bit larger
- add a tooltip on the column type input
- I also added a tooltip on the default value input which suffers from
the same issue

Note: the column name already have a tooltip

<img width="623" height="418" alt="image"
src="https://github.com/user-attachments/assets/9aa5bc10-d627-42ee-b91a-1f8d83911ee0"
/>

<img width="640" height="357" alt="image"
src="https://github.com/user-attachments/assets/c6af4780-8308-4073-bf5c-937ff5822884"
/>
---
 .../SidePanelEditor/ColumnEditor/ColumnType.tsx                | 3 ++-
 .../SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx      | 1 +
 .../SidePanelEditor/TableEditor/TableEditor.tsx                | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
index 860e8ab29fb..5d9588cc8ba 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/ColumnType.tsx
@@ -177,11 +177,12 @@ const ColumnType = ({
             aria-controls={listboxId}
             className={cn('w-full justify-between', !value && 'text-foreground-lighter')}
             iconRight={<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />}
+            title={value && value.replaceAll('"', '')}
           >
             {value ? (
               <div className="flex gap-2 items-center">
                 <span>{inferIcon(getOptionByName(value)?.type ?? '')}</span>
-                {value.replaceAll('"', '')}
+                <span className="block truncate">{value.replaceAll('"', '')}</span>
               </div>
             ) : (
               'Choose a column type...'
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
index 7e9f642e6e0..6021d099399 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ColumnEditor/InputWithSuggestions.tsx
@@ -92,6 +92,7 @@ const InputWithSuggestions = ({
         inputClassName="pr-10"
         type="text"
         value={value}
+        title={value}
         onChange={onInputChange}
         data-testid={dataTestId}
         actions={
diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
index 5c10d88a481..9ff0aa34781 100644
--- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/TableEditor.tsx
@@ -337,7 +337,7 @@ export const TableEditor = ({
   return (
     <SidePanel
       data-testid="table-editor-side-panel"
-      size="large"
+      size="xlarge"
       key="TableEditor"
       visible={visible}
       header={<HeaderTitle schema={selectedSchema} table={table} isDuplicating={isDuplicating} />}