From dcad23316d378383ae472472733a6c155a2e8225 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 4 Jul 2025 18:26:24 +0300
Subject: [PATCH] style(views/table): improve autocomplete styling

---
 apps/client/src/widgets/view_widgets/table_view/index.ts  | 8 ++++++++
 .../widgets/view_widgets/table_view/relation_editor.ts    | 8 ++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts
index bd65176d1..a16cbb9c5 100644
--- a/apps/client/src/widgets/view_widgets/table_view/index.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/index.ts
@@ -34,6 +34,14 @@ const TPL = /*html*/`
         right: 0;
         bottom: 0;
     }
+
+    .tabulator-cell .autocomplete {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        background: transparent;
+        outline: none !important;
+    }
     </style>
 
     <div class="header">
diff --git a/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts b/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts
index 9db63af14..6a1bc334b 100644
--- a/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/relation_editor.ts
@@ -12,6 +12,7 @@ export function RelationEditor(cell: CellComponent, onRendered, success, cancel,
 
     //create and style editor
     const editor = document.createElement("input");
+
     const $editor = $(editor);
     editor.classList.add("form-control");
 
@@ -43,8 +44,11 @@ export function RelationEditor(cell: CellComponent, onRendered, success, cancel,
         editor.focus();
     });
 
-    //return the editor element
-    return editor;
+    const container = document.createElement("div");
+    container.classList.add("input-group");
+    container.classList.add("autocomplete");
+    container.appendChild(editor);
+    return container;
 };
 
 export function RelationFormatter(cell: CellComponent, formatterParams, onRendered) {