From 522f56b95f7bbb9816625d3777a32992af9c0054 Mon Sep 17 00:00:00 2001
From: litoral05 <tiagolitoral05@gmail.com>
Date: Mon, 18 May 2026 13:58:40 +0100
Subject: [PATCH] Added responsiveness + custom scrollbar

---
 src/components/controllers/ControllersRoute.tsx | 10 +++++-----
 src/components/layout/AppShell.tsx              |  5 ++++-
 src/services/apiClient.ts                       |  4 ++--
 3 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/controllers/ControllersRoute.tsx b/src/components/controllers/ControllersRoute.tsx
index c69356f..3a237bf 100644
--- a/src/components/controllers/ControllersRoute.tsx
+++ b/src/components/controllers/ControllersRoute.tsx
@@ -290,7 +290,7 @@ export function ControllersRoute() {
         }
     }
     return (
-        <div className="flex h-full min-h-0 flex-col overflow-hidden">
+        <div className={`flex min-h-full flex-col overflow-y-auto overflow-x-hidden pr-2 ${scrollClass}`}>
             <div className="mb-4 flex shrink-0 items-start justify-between gap-4 rounded-3xl border border-white/10 bg-white/[0.025] px-5 py-4">
                 <div className="min-w-0">
                     <h1 className="truncate text-3xl font-black tracking-tight text-white">
@@ -320,8 +320,8 @@ export function ControllersRoute() {
                 </div>
             )}
 
-            <div className="grid min-h-0 flex-1 gap-4 overflow-hidden xl:grid-cols-12">
-                <Card className="flex min-h-0 flex-col overflow-hidden xl:col-span-5">
+            <div className="grid gap-4 2xl:grid-cols-12">
+                <Card className="flex flex-col 2xl:col-span-5">
                     <div className="mb-5 flex shrink-0 items-start justify-between gap-4">
                         <div>
                             <h3 className="font-bold text-white">Clientes</h3>
@@ -387,7 +387,7 @@ export function ControllersRoute() {
                     </div>
 
                     <div
-                        className={`min-h-0 flex-1 space-y-2 overflow-y-auto pr-2 ${scrollClass}`}
+                        className={`h-[420px] space-y-2 overflow-y-auto pr-2 lg:h-[500px] 2xl:h-[620px] ${scrollClass}`}
                     >
                         {loading && clients.length === 0 && (
                             <div className="rounded-2xl border border-white/10 bg-white/[0.025] p-4 text-sm text-slate-400">
@@ -552,7 +552,7 @@ export function ControllersRoute() {
                         )}
                     </Card>
 
-                    <Card className="flex min-h-0 flex-1 flex-col overflow-hidden">
+                    <Card className="flex flex-col">
                         {selectedClient ? (
                             <>
                                 <div className="mb-4 flex shrink-0 items-center justify-between gap-4">
diff --git a/src/components/layout/AppShell.tsx b/src/components/layout/AppShell.tsx
index 2322687..f8d9457 100644
--- a/src/components/layout/AppShell.tsx
+++ b/src/components/layout/AppShell.tsx
@@ -8,6 +8,9 @@ type AppShellProps = PropsWithChildren<{
   onLogout: () => void;
 }>;
 
+const scrollClass =
+  '[scrollbar-width:thin] [scrollbar-color:rgba(59,130,246,0.55)_transparent] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-blue-500/45 hover:[&::-webkit-scrollbar-thumb]:bg-blue-500/65';
+
 export function AppShell({
   active,
   onSelect,
@@ -22,7 +25,7 @@ export function AppShell({
         onLogout={onLogout}
       />
 
-      <main className="min-w-0 flex-1 overflow-auto p-4">
+      <main className={`min-w-0 flex-1 overflow-auto p-4 ${scrollClass}`}>
         {children}
       </main>
     </div>
diff --git a/src/services/apiClient.ts b/src/services/apiClient.ts
index 03c82ec..17e5cb9 100644
--- a/src/services/apiClient.ts
+++ b/src/services/apiClient.ts
@@ -1,9 +1,9 @@
 import type { AppSettings } from '@/types/api';
 
 const defaults: AppSettings = { // FOR DEBUG AND DEV PURPOSES ONLY ==========================>
-  backendUrl: 'http://localhost:8080',// FOR DEBUG AND DEV PURPOSES ONLY ==========================>
+  backendUrl: 'http://146.59.230.190:8080',// FOR DEBUG AND DEV PURPOSES ONLY ==========================>
   apiKey:// FOR DEBUG AND DEV PURPOSES ONLY ==========================>
-    'dev-api-key',// FOR DEBUG AND DEV PURPOSES ONLY ==========================>
+    'b8184608fcab419da2ce9a220ee6017daaff637b627e43ebac31b6b7c3344349',// FOR DEBUG AND DEV PURPOSES ONLY ==========================>
 };
 
 const SETTINGS_KEY =