Added responsiveness + custom scrollbar

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">

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>

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 =