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

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

@ -7,6 +7,7 @@ export function RegistryTable({
empty,
isEmpty,
children,
scroll = true,
}: {
countLabel: string;
action?: ReactNode;
@ -14,6 +15,7 @@ export function RegistryTable({
empty?: string;
isEmpty: boolean;
children: ReactNode;
scroll?: boolean;
}) {
return (
<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>
{action ?? <span />}
</div>
<div className="overflow-x-auto border-t border-white/10">
<table className="w-full table-fixed min-w-[36rem] text-left text-sm">
<div className={`border-t border-white/10 ${scroll ? "overflow-x-auto" : "overflow-hidden"}`}>
<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">
<tr>
{columns.map((column) => (