Skip to content

fix: prevent horizontal scroll on expanded audit log rows #49

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TerrifiedBug merged 1 commit into from
Mar 7, 2026
Merged

fix: prevent horizontal scroll on expanded audit log rows #49

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 41 additions & 30 deletions src/app/(dashboard)/audit/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -335,7 +335,8 @@ export default function AuditPage() {
</div>
) : (
<>
<Table>
<div className="overflow-x-auto">
<Table className="table-fixed w-full">
<TableHeader>
<TableRow>
<TableHead className="w-[30px]" />
Expand Down Expand Up @@ -411,21 +412,25 @@ export default function AuditPage() {
{isExpanded && hasDetails && (
<TableRow className="bg-muted/30 hover:bg-muted/30">
<TableCell colSpan={8} className="p-4">
<div className="space-y-3">
<div className="space-y-3 min-w-0">
{hasMetadata && (
<div>
<p className="text-xs font-medium text-muted-foreground mb-2">Details</p>
<div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-xs">
<div className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-xs">
{Object.entries(entry.metadata as Record<string, unknown>).map(([key, value]) => (
<Fragment key={key}>
<span className="font-medium text-muted-foreground capitalize">
<span className="font-medium text-muted-foreground capitalize whitespace-nowrap">
{key.replace(/([A-Z])/g, " $1").replace(/_/g, " ").trim()}
</span>
<span className="font-mono">
{typeof value === "object" && value !== null
? JSON.stringify(value, null, 2)
: String(value ?? "\u2014")}
</span>
{typeof value === "object" && value !== null ? (
<pre className="font-mono whitespace-pre-wrap break-all overflow-hidden">
{JSON.stringify(value, null, 2)}
</pre>
) : (
<span className="font-mono break-all">
{String(value ?? "\u2014")}
</span>
)}
</Fragment>
))}
</div>
Expand All @@ -434,17 +439,21 @@ export default function AuditPage() {
{hasDiff && (
<div>
<p className="text-xs font-medium text-muted-foreground mb-2">Changes</p>
<div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5 text-xs">
<div className="grid grid-cols-[auto_minmax(0,1fr)] gap-x-4 gap-y-1.5 text-xs">
{Object.entries(entry.diff as Record<string, unknown>).map(([key, value]) => (
<Fragment key={key}>
<span className="font-medium text-muted-foreground capitalize">
<span className="font-medium text-muted-foreground capitalize whitespace-nowrap">
{key.replace(/([A-Z])/g, " $1").replace(/_/g, " ").trim()}
</span>
<span className="font-mono">
{typeof value === "object" && value !== null
? JSON.stringify(value, null, 2)
: String(value ?? "\u2014")}
</span>
{typeof value === "object" && value !== null ? (
<pre className="font-mono whitespace-pre-wrap break-all overflow-hidden">
{JSON.stringify(value, null, 2)}
</pre>
) : (
<span className="font-mono break-all">
{String(value ?? "\u2014")}
</span>
)}
</Fragment>
))}
</div>
Expand All @@ -460,20 +469,22 @@ export default function AuditPage() {
</TableBody>
</Table>

{/* Load more */}
{logsQuery.hasNextPage && (
<div className="flex justify-center pt-4">
<Button
variant="outline"
onClick={() => logsQuery.fetchNextPage()}
disabled={logsQuery.isFetchingNextPage}
>
{logsQuery.isFetchingNextPage
? "Loading more..."
: "Load more"}
</Button>
</div>
)}
</div>

{/* Load more */}
{logsQuery.hasNextPage && (
<div className="flex justify-center pt-4">
<Button
variant="outline"
onClick={() => logsQuery.fetchNextPage()}
disabled={logsQuery.isFetchingNextPage}
>
{logsQuery.isFetchingNextPage
? "Loading more..."
: "Load more"}
</Button>
</div>
)}
</>
)}
</div>
Expand Down
Loading