Skip to content

Fix/reports drag resize #69

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
WhiteMuush merged 9 commits into from
Jun 19, 2026
Merged

Fix/reports drag resize #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
27240c2
fix(reports): hard-block widget resize at content-fit minimum
WhiteMuush Jun 19, 2026
18b3da7
fix(reports): hard-block widget resize at content-fit width too
WhiteMuush Jun 19, 2026
7a2724c
fix(reports): auto-fit section height to content
WhiteMuush Jun 19, 2026
3bd1601
fix(reports): observe section element to stop resize loop
WhiteMuush Jun 19, 2026
ecc7776
fix(reports): stop container width resize loop
WhiteMuush Jun 19, 2026
e92caef
revert(reports): drop content auto-fit, restore stable resize floors
WhiteMuush Jun 19, 2026
cc34b48
fix(reports): measure intrinsic content for resize floor
WhiteMuush Jun 19, 2026
427daba
feat(reports): responsive widget content via container queries
WhiteMuush Jun 19, 2026
a513c6a
fix(reports): auto-fit widget height to content
WhiteMuush Jun 19, 2026
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
11 changes: 11 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
},
"devDependencies": {
"@eslint/eslintrc": "^3.3.5",
"@tailwindcss/container-queries": "^0.1.1",
"@types/bcryptjs": "^3.0.0",
"@types/node": "^25.9.3",
"@types/pg": "^8.20.0",
Expand Down
2 changes: 1 addition & 1 deletion src/app/(dashboard)/reports/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export default async function ReportsPage({ searchParams }: { searchParams: Prom
]

return (
<div id="report-root" className="flex h-full flex-col overflow-y-auto p-6">
<div id="report-root" className="flex h-full flex-col overflow-y-auto p-6 [scrollbar-gutter:stable]">
<div className="mb-6 hidden print:block">
<h1 className="text-xl font-semibold text-foreground">DataShield Security Report</h1>
<p className="text-sm text-muted-foreground">
Expand Down
2 changes: 1 addition & 1 deletion src/components/reports/ComplianceSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export function ComplianceSection({ data, deltas }: { data: ComplianceSummary; d
title="Compliance and audit"
description="Monitoring coverage and alert handling status"
>
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div className="grid grid-cols-1 gap-4 @lg:grid-cols-2 @4xl:grid-cols-4">
<StatCard
label="Monitored"
value={data.monitoredEmployees}
Expand Down
6 changes: 3 additions & 3 deletions src/components/reports/DataTypeSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function DataTypeSection({ rows }: { rows: DataTypeExposure[] }) {
<tr>
<th className="px-3 py-2 font-medium">Data type</th>
<th className="px-3 py-2 text-right font-medium">Records</th>
<th className="px-3 py-2 font-medium">Share</th>
<th className="hidden px-3 py-2 font-medium @[480px]:table-cell">Share</th>
</tr>
</thead>
<tbody>
Expand All @@ -25,13 +25,13 @@ export function DataTypeSection({ rows }: { rows: DataTypeExposure[] }) {
<td className="px-3 py-2">
<span className="text-foreground">{t.label}</span>
{t.critical && (
<span className="ml-2 rounded-md bg-severity-high/10 px-1.5 py-0.5 text-xs font-medium text-severity-high">
<span className="ml-2 hidden rounded-md bg-severity-high/10 px-1.5 py-0.5 text-xs font-medium text-severity-high @[400px]:inline">
Sensitive
</span>
)}
</td>
<td className="px-3 py-2 text-right tabular-nums text-foreground">{t.count}</td>
<td className="px-3 py-2">
<td className="hidden px-3 py-2 @[480px]:table-cell">
<div className="flex items-center gap-2">
<div className="h-1.5 w-24 overflow-hidden rounded-full bg-muted">
<div
Expand Down
6 changes: 3 additions & 3 deletions src/components/reports/DepartmentSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export function DepartmentSection({ rows }: { rows: DepartmentRow[] }) {
<thead className="bg-muted/50 text-left text-xs text-muted-foreground">
<tr>
<th className="px-3 py-2 font-medium">Department</th>
<th className="px-3 py-2 text-right font-medium">Employees</th>
<th className="hidden px-3 py-2 text-right font-medium @[520px]:table-cell">Employees</th>
<th className="px-3 py-2 text-right font-medium">Exposed</th>
<th className="px-3 py-2 font-medium">Exposure rate</th>
</tr>
Expand All @@ -25,11 +25,11 @@ export function DepartmentSection({ rows }: { rows: DepartmentRow[] }) {
{rows.map((r) => (
<tr key={r.department} className="border-t border-border">
<td className="px-3 py-2 text-foreground">{r.department}</td>
<td className="px-3 py-2 text-right tabular-nums text-foreground">{r.total}</td>
<td className="hidden px-3 py-2 text-right tabular-nums text-foreground @[520px]:table-cell">{r.total}</td>
<td className="px-3 py-2 text-right tabular-nums text-foreground">{r.exposed}</td>
<td className="px-3 py-2">
<div className="flex items-center gap-2">
<div className="h-1.5 w-24 overflow-hidden rounded-full bg-muted">
<div className="hidden h-1.5 w-24 overflow-hidden rounded-full bg-muted @[420px]:block">
<div
className={cn(
"h-full rounded-full",
Expand Down
10 changes: 5 additions & 5 deletions src/components/reports/EmployeeSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ export function EmployeeSection({ rows }: { rows: EmployeeReportRow[] }) {
<thead className="bg-muted/50 text-left text-xs text-muted-foreground">
<tr>
<th className="px-3 py-2 font-medium">Employee</th>
<th className="px-3 py-2 font-medium">Department</th>
<th className="hidden px-3 py-2 font-medium @[640px]:table-cell">Department</th>
<th className="px-3 py-2 text-right font-medium">Breaches</th>
<th className="px-3 py-2 font-medium">Last detected</th>
<th className="hidden px-3 py-2 font-medium @[520px]:table-cell">Last detected</th>
<th className="px-3 py-2 font-medium">Risk</th>
</tr>
</thead>
Expand All @@ -51,15 +51,15 @@ export function EmployeeSection({ rows }: { rows: EmployeeReportRow[] }) {
<tr key={e.email} className="border-t border-border">
<td className="px-3 py-2">
<span className="text-foreground">{e.name}</span>
<span className="block text-xs text-muted-foreground">{e.email}</span>
<span className="hidden text-xs text-muted-foreground @[440px]:block">{e.email}</span>
</td>
<td className="px-3 py-2 text-muted-foreground">
<td className="hidden px-3 py-2 text-muted-foreground @[640px]:table-cell">
{e.department ?? "Unknown"}
</td>
<td className="px-3 py-2 text-right tabular-nums text-foreground">
{e.breachCount}
</td>
<td className="px-3 py-2 text-muted-foreground">
<td className="hidden px-3 py-2 text-muted-foreground @[520px]:table-cell">
{formatDate(e.lastDetectedAt)}
</td>
<td className="px-3 py-2">
Expand Down
6 changes: 3 additions & 3 deletions src/components/reports/ExposureSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function ExposureSection({ data, deltas }: { data: ExposureSummary; delta
title="Company exposure"
description="Overall breach exposure across the workforce"
>
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div className="grid grid-cols-1 gap-4 @lg:grid-cols-2 @4xl:grid-cols-4">
<StatCard label="Employees" value={data.totalEmployees} icon={Users} />
<StatCard
label="Exposed"
Expand Down Expand Up @@ -47,15 +47,15 @@ export function ExposureSection({ data, deltas }: { data: ExposureSummary; delta
<thead className="bg-muted/50 text-left text-xs text-muted-foreground">
<tr>
<th className="px-3 py-2 font-medium">Breach</th>
<th className="px-3 py-2 font-medium">Source</th>
<th className="hidden px-3 py-2 font-medium @[420px]:table-cell">Source</th>
<th className="px-3 py-2 text-right font-medium">Affected</th>
</tr>
</thead>
<tbody>
{data.topBreaches.map((b) => (
<tr key={b.name} className="border-t border-border">
<td className="px-3 py-2 text-foreground">{b.name}</td>
<td className="px-3 py-2 text-muted-foreground">{b.source}</td>
<td className="hidden px-3 py-2 text-muted-foreground @[420px]:table-cell">{b.source}</td>
<td className="px-3 py-2 text-right tabular-nums text-foreground">
{b.affectedEmployees}
</td>
Expand Down
Loading
Loading