armando/sinka
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop the admin clients table from scrolling sideways.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
armando 2026-09-16 04:21:01 -03:00
parent 6e48ac7804
commit 5a355ce3cb
2 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/app/admin/(panel)/clientes/page.tsx
View File

@ -40,9 +40,9 @@ function TenantRowActions({
onUsers: () => void; onUsers: () => void;
}) { }) {
const hostRef = useRef<HTMLDivElement>(null); const hostRef = useRef<HTMLDivElement>(null);
const rowRef = useRef<HTMLDivElement>(null); const sizerRef = useRef<HTMLDivElement>(null);
const neededRef = useRef(0); const neededRef = useRef(0);
const [compact, setCompact] = useState(false); const [compact, setCompact] = useState(true);
const [menu, setMenu] = useState<{ top: number; right: number } | null>(null); const [menu, setMenu] = useState<{ top: number; right: number } | null>(null);
useLayoutEffect(() => { useLayoutEffect(() => {
@ -53,14 +53,14 @@ function TenantRowActions({
function measure() { function measure() {
const node = hostRef.current; const node = hostRef.current;
const row = rowRef.current; const sizer = sizerRef.current;
if (!node) { if (!node) {
return; return;
} }
if (row) { if (sizer) {
neededRef.current = row.scrollWidth; neededRef.current = sizer.scrollWidth;
} }
setCompact(node.clientWidth < neededRef.current); setCompact(node.clientWidth < neededRef.current + 8);
} }
measure(); measure();
@ -121,11 +121,11 @@ function TenantRowActions({
); );
return ( return (
<div ref={hostRef} className="relative min-w-0"> <div ref={hostRef} className="relative min-w-0 overflow-hidden">
<div <div
ref={rowRef} ref={sizerRef}
className={`flex flex-nowrap items-center gap-2 ${compact ? "pointer-events-none invisible absolute" : ""}`} className="pointer-events-none invisible fixed top-0 left-0 flex w-max flex-nowrap items-center gap-2"
aria-hidden={compact} aria-hidden
> >
{buttons} {buttons}
</div> </div>
@ -185,7 +185,9 @@ function TenantRowActions({
</div> </div>
) : null} ) : null}
</> </>
) : null} ) : (
<div className="flex min-w-0 flex-nowrap items-center gap-2 overflow-hidden">{buttons}</div>
)}
</div> </div>
); );
} }
@ -299,6 +301,7 @@ export default function PlatformClientesPage() {
{error && !open ? <p className="mt-4 text-sm text-red-300">{error}</p> : null} {error && !open ? <p className="mt-4 text-sm text-red-300">{error}</p> : null}
<RegistryTable <RegistryTable
scroll={false}
countLabel={`${tenants.length} cliente${tenants.length === 1 ? "" : "s"}`} countLabel={`${tenants.length} cliente${tenants.length === 1 ? "" : "s"}`}
columns={["Cliente", "Endereço", "Situação", "Acesso"]} columns={["Cliente", "Endereço", "Situação", "Acesso"]}
isEmpty={tenants.length === 0} isEmpty={tenants.length === 0}
@ -311,10 +314,10 @@ export default function PlatformClientesPage() {
> >
{tenants.map((tenant) => ( {tenants.map((tenant) => (
<tr key={tenant.id} className="border-t border-white/10"> <tr key={tenant.id} className="border-t border-white/10">
<td className="px-5 py-3 font-medium">{tenant.name}</td> <td className="truncate px-5 py-3 font-medium">{tenant.name}</td>
<td className="px-5 py-3 text-[#E8F4E5]/70">/{tenant.slug}</td> <td className="truncate px-5 py-3 text-[#E8F4E5]/70">/{tenant.slug}</td>
<td className="px-5 py-3 text-[#E8F4E5]/70">{tenant.status === "ACTIVE" ? "Ativo" : "Suspenso"}</td> <td className="truncate px-5 py-3 text-[#E8F4E5]/70">{tenant.status === "ACTIVE" ? "Ativo" : "Suspenso"}</td>
<td className="px-5 py-3"> <td className="overflow-hidden px-5 py-3">
<TenantRowActions <TenantRowActions
tenant={tenant} tenant={tenant}
chatCount={chatCounts[tenant.slug] ?? 0} chatCount={chatCounts[tenant.slug] ?? 0}

6
web/src/components/registry-table.tsx
View File

@ -7,6 +7,7 @@ export function RegistryTable({
empty, empty,
isEmpty, isEmpty,
children, children,
scroll = true,
}: { }: {
countLabel: string; countLabel: string;
action?: ReactNode; action?: ReactNode;
@ -14,6 +15,7 @@ export function RegistryTable({
empty?: string; empty?: string;
isEmpty: boolean; isEmpty: boolean;
children: ReactNode; children: ReactNode;
scroll?: boolean;
}) { }) {
return ( return (
<div className="mt-8 overflow-hidden rounded-2xl border border-white/10"> <div className="mt-8 overflow-hidden rounded-2xl border border-white/10">
@ -21,8 +23,8 @@ export function RegistryTable({
<p className="text-sm text-[#E8F4E5]/60">{countLabel}</p> <p className="text-sm text-[#E8F4E5]/60">{countLabel}</p>
{action ?? <span />} {action ?? <span />}
</div> </div>
<div className="overflow-x-auto border-t border-white/10"> <div className={`border-t border-white/10 ${scroll ? "overflow-x-auto" : "overflow-hidden"}`}>
<table className="w-full table-fixed min-w-[36rem] text-left text-sm"> <table className={`w-full table-fixed text-left text-sm ${scroll ? "min-w-[36rem]" : ""}`}>
<thead className="bg-white/5 text-xs uppercase tracking-wider text-[#E8F4E5]/50"> <thead className="bg-white/5 text-xs uppercase tracking-wider text-[#E8F4E5]/50">
<tr> <tr>
{columns.map((column) => ( {columns.map((column) => (