From 8c9abb9362f1b5b44177971f9397254050d9f9b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Melo?= <viniciusldemelo@gmail.com>
Date: Tue, 30 Jun 2026 17:11:02 -0300
Subject: [PATCH] fix(sidebar): prevent clear button (X) from overlapping
 scrollbar in table filter

- Increased right padding on filter inputs (`pr-10`)
- Adjusted X button position (`right-3` + vertical centering)
- Applied consistently across ExplorerSidebar, SidebarSchemaItem and SidebarDatabaseItem
---
 src/components/layout/ExplorerSidebar.tsx             | 4 ++--
 src/components/layout/sidebar/SidebarDatabaseItem.tsx | 4 ++--
 src/components/layout/sidebar/SidebarSchemaItem.tsx   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/layout/ExplorerSidebar.tsx b/src/components/layout/ExplorerSidebar.tsx
index b6f9c842..ddf18508 100644
--- a/src/components/layout/ExplorerSidebar.tsx
+++ b/src/components/layout/ExplorerSidebar.tsx
@@ -1432,12 +1432,12 @@ export const ExplorerSidebar = ({ sidebarWidth, startResize, onCollapse, sidebar
                             value={tableFilter}
                             onChange={(e) => setTableFilter(e.target.value)}
                             placeholder={t("sidebar.filterTables")}
-                            className="w-full bg-surface-secondary text-xs text-secondary placeholder:text-muted rounded pl-6 pr-6 py-1 border border-default focus:outline-none focus:border-blue-500/50"
+                            className="w-full bg-surface-secondary text-xs text-secondary placeholder:text-muted rounded pl-6 pr-10 py-1 border border-default focus:outline-none focus:border-blue-500/50"
                           />
                           {tableFilter && (
                             <button
                               onClick={() => setTableFilter("")}
-                              className="absolute right-1.5 text-muted hover:text-primary"
+                              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-primary p-0.5 rounded hover:bg-surface-secondary"
                             >
                               <X size={11} />
                             </button>
diff --git a/src/components/layout/sidebar/SidebarDatabaseItem.tsx b/src/components/layout/sidebar/SidebarDatabaseItem.tsx
index a19b3cf2..ea7e9d1e 100644
--- a/src/components/layout/sidebar/SidebarDatabaseItem.tsx
+++ b/src/components/layout/sidebar/SidebarDatabaseItem.tsx
@@ -268,13 +268,13 @@ export const SidebarDatabaseItem = ({
                         value={tableFilter}
                         onChange={(e) => setTableFilter(e.target.value)}
                         placeholder={t("sidebar.filterTables")}
-                        className="w-full bg-surface-secondary text-xs text-secondary placeholder:text-muted rounded pl-6 pr-6 py-1 border border-default focus:outline-none focus:border-blue-500/50"
+                        className="w-full bg-surface-secondary text-xs text-secondary placeholder:text-muted rounded pl-6 pr-10 py-1 border border-default focus:outline-none focus:border-blue-500/50"
                         onClick={(e) => e.stopPropagation()}
                       />
                       {tableFilter && (
                         <button
                           onClick={(e) => { e.stopPropagation(); setTableFilter(""); }}
-                          className="absolute right-1.5 text-muted hover:text-primary"
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-primary p-0.5 rounded hover:bg-surface-secondary"
                         >
                           <X size={11} />
                         </button>
diff --git a/src/components/layout/sidebar/SidebarSchemaItem.tsx b/src/components/layout/sidebar/SidebarSchemaItem.tsx
index 7c630c02..580c4da6 100644
--- a/src/components/layout/sidebar/SidebarSchemaItem.tsx
+++ b/src/components/layout/sidebar/SidebarSchemaItem.tsx
@@ -218,13 +218,13 @@ export const SidebarSchemaItem = ({
                         value={tableFilter}
                         onChange={(e) => setTableFilter(e.target.value)}
                         placeholder={t("sidebar.filterTables")}
-                        className="w-full bg-surface-secondary text-xs text-secondary placeholder:text-muted rounded pl-6 pr-6 py-1 border border-default focus:outline-none focus:border-blue-500/50"
+                        className="w-full bg-surface-secondary text-xs text-secondary placeholder:text-muted rounded pl-6 pr-10 py-1 border border-default focus:outline-none focus:border-blue-500/50"
                         onClick={(e) => e.stopPropagation()}
                       />
                       {tableFilter && (
                         <button
                           onClick={(e) => { e.stopPropagation(); setTableFilter(""); }}
-                          className="absolute right-1.5 text-muted hover:text-primary"
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-primary p-0.5 rounded hover:bg-surface-secondary"
                         >
                           <X size={11} />
                         </button>