DiogoVieira14/lr-openwrt-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added responsiveness + custom scrollbar

Browse Source
This commit is contained in:
litoral05
2026-05-18 13:58:40 +01:00
parent 8feb5213cf
commit 522f56b95f
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/controllers/ControllersRoute.tsx
+5 -5
View File
@@ -290,7 +290,7 @@ export function ControllersRoute() {
} }
} }
return ( 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="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"> <div className="min-w-0">
<h1 className="truncate text-3xl font-black tracking-tight text-white"> <h1 className="truncate text-3xl font-black tracking-tight text-white">
@@ -320,8 +320,8 @@ export function ControllersRoute() {
</div> </div>
)} )}
<div className="grid min-h-0 flex-1 gap-4 overflow-hidden xl:grid-cols-12"> <div className="grid gap-4 2xl:grid-cols-12">
<Card className="flex min-h-0 flex-col overflow-hidden xl:col-span-5"> <Card className="flex flex-col 2xl:col-span-5">
<div className="mb-5 flex shrink-0 items-start justify-between gap-4"> <div className="mb-5 flex shrink-0 items-start justify-between gap-4">
<div> <div>
<h3 className="font-bold text-white">Clientes</h3> <h3 className="font-bold text-white">Clientes</h3>
@@ -387,7 +387,7 @@ export function ControllersRoute() {
</div> </div>
<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 && ( {loading && clients.length === 0 && (
<div className="rounded-2xl border border-white/10 bg-white/[0.025] p-4 text-sm text-slate-400"> <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>
<Card className="flex min-h-0 flex-1 flex-col overflow-hidden"> <Card className="flex flex-col">
{selectedClient ? ( {selectedClient ? (
<> <>
<div className="mb-4 flex shrink-0 items-center justify-between gap-4"> <div className="mb-4 flex shrink-0 items-center justify-between gap-4">
src/components/layout/AppShell.tsx
+4 -1
View File
@@ -8,6 +8,9 @@ type AppShellProps = PropsWithChildren<{
onLogout: () => void; 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({ export function AppShell({
active, active,
onSelect, onSelect,
@@ -22,7 +25,7 @@ export function AppShell({
onLogout={onLogout} 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} {children}
</main> </main>
</div> </div>
src/services/apiClient.ts
+2 -2
View File
@@ -1,9 +1,9 @@
import type { AppSettings } from '@/types/api'; import type { AppSettings } from '@/types/api';
const defaults: AppSettings = { // FOR DEBUG AND DEV PURPOSES ONLY ==========================> 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 ==========================> 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 = const SETTINGS_KEY =