From 122cabcbca4aba340bd1b0d37359ece318b11dd3 Mon Sep 17 00:00:00 2001
From: Abdou TOP <top.abdou100@outlook.fr>
Date: Thu, 15 Jan 2026 14:16:40 +0000
Subject: [PATCH] refactor: Refactor `columnsMap` to a plain object and adjust
 its usage, alongside various UI layout and overflow fixes.

---
 api/routes.ts                        | 10 +++-------
 api/sql.ts                           |  8 ++++----
 web/components/BackgroundPattern.tsx |  2 +-
 web/components/SideBar.tsx           |  2 +-
 web/pages/DeploymentPage.tsx         |  2 +-
 5 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/api/routes.ts b/api/routes.ts
index 51e3485..600b209 100644
--- a/api/routes.ts
+++ b/api/routes.ts
@@ -23,12 +23,7 @@ import {
   LogsInputSchema,
 } from '/api/clickhouse-client.ts'
 import { decodeSession, decryptMessage, encryptMessage } from '/api/user.ts'
-import {
-  type ColumnInfo,
-  fetchTablesData,
-  runSQL,
-  SQLQueryError,
-} from '/api/sql.ts'
+import { fetchTablesData, runSQL, SQLQueryError } from '/api/sql.ts'
 
 const withUserSession = async ({ cookies }: RequestContext) => {
   const session = await decodeSession(cookies.session)
@@ -471,9 +466,10 @@ const defs = {
       }
 
       try {
+        const columnsMap = new Map(tableDef.columns.map((c) => [c.name, c]))
         return fetchTablesData(
           { ...input, deployment: dep, table },
-          tableDef.columnsMap as unknown as Map<string, ColumnInfo>,
+          columnsMap,
         )
       } catch (err) {
         log.error('fetchTablesData-error', { stack: (err as Error)?.stack })
diff --git a/api/sql.ts b/api/sql.ts
index 42e10b5..82f02b2 100644
--- a/api/sql.ts
+++ b/api/sql.ts
@@ -118,10 +118,10 @@ export async function refreshOneSchema(
     const tables = [...tableMap.values()].map((t) => ({
       ...t,
       columns: t.columns.sort((a, b) => a.ordinal - b.ordinal),
-      columnsMap: t.columns.reduce((map, col) => {
-        map.set(col.name, col)
-        return map
-      }, new Map<string, ColumnInfo>()),
+      columnsMap: t.columns.reduce((obj, col) => {
+        obj[col.name] = col
+        return obj
+      }, {} as Record<string, ColumnInfo>),
     }))
     const payload = {
       deploymentUrl: dep.url,
diff --git a/web/components/BackgroundPattern.tsx b/web/components/BackgroundPattern.tsx
index f2e4c78..c87f3d9 100644
--- a/web/components/BackgroundPattern.tsx
+++ b/web/components/BackgroundPattern.tsx
@@ -246,7 +246,7 @@ export const BackgroundPattern = () => {
   }
 
   return (
-    <div class='fixed inset-0 overflow-hidden pointer-events-none z-0'>
+    <div class='fixed inset-0 w-full h-full max-w-[100vw] overflow-hidden pointer-events-none z-0'>
       <div
         class='absolute inset-0 opacity-10'
         style={{
diff --git a/web/components/SideBar.tsx b/web/components/SideBar.tsx
index b1b5f79..ba853c7 100644
--- a/web/components/SideBar.tsx
+++ b/web/components/SideBar.tsx
@@ -23,7 +23,7 @@ export function Sidebar(
 ) {
   const sb = url.params.sb
   return (
-    <div class='drawer-side'>
+    <div class='drawer-side overflow-hidden'>
       <div
         class={`${
           sb ? 'w-64' : 'w-16'
diff --git a/web/pages/DeploymentPage.tsx b/web/pages/DeploymentPage.tsx
index 18a6e73..f399768 100644
--- a/web/pages/DeploymentPage.tsx
+++ b/web/pages/DeploymentPage.tsx
@@ -416,7 +416,7 @@ const TableFooter = ({ rows }: { rows: AnyRecord[] }) => {
 const TableContent = ({ rows }: { rows: AnyRecord[] }) => {
   const columns = Object.keys(rows[0] || {})
   return (
-    <table class='table table-zebra w-full'>
+    <table class='table table-zebra min-w-full'>
       <TableHeader columns={columns} />
       <tbody>
         {rows.length === 0