diff --git a/frontend/src/components/audit/SqlAuditWorkbench.css b/frontend/src/components/audit/SqlAuditWorkbench.css index d68aaa2f..1f55556d 100644 --- a/frontend/src/components/audit/SqlAuditWorkbench.css +++ b/frontend/src/components/audit/SqlAuditWorkbench.css @@ -95,14 +95,15 @@ .gn-sql-audit-filter-time { display: grid; - grid-column: span 2; + grid-column: 1 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .gn-sql-audit-toolbar-actions { display: flex; - grid-column: span 2; + grid-column: -3 / -1; + align-items: center; justify-content: flex-end; gap: 8px; } @@ -350,14 +351,21 @@ font-size: 12px; } -@media (max-width: 1280px) { +@media (max-width: 1600px) { .gn-sql-audit-toolbar { grid-template-columns: repeat(4, minmax(150px, 1fr)); } +} + +@media (max-width: 1100px) { + .gn-sql-audit-toolbar { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } .gn-sql-audit-filter-search, - .gn-sql-audit-filter-time { - grid-column: span 2; + .gn-sql-audit-filter-time, + .gn-sql-audit-toolbar-actions { + grid-column: 1 / -1; } } @@ -373,10 +381,6 @@ flex-direction: column; } - .gn-sql-audit-toolbar { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .gn-sql-audit-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } diff --git a/frontend/src/components/audit/SqlAuditWorkbench.test.tsx b/frontend/src/components/audit/SqlAuditWorkbench.test.tsx index da89d56c..62f0e9be 100644 --- a/frontend/src/components/audit/SqlAuditWorkbench.test.tsx +++ b/frontend/src/components/audit/SqlAuditWorkbench.test.tsx @@ -83,6 +83,21 @@ describe('SqlAuditWorkbench', () => { ); }); + it('anchors filter actions opposite the time range instead of leaving them in the middle', () => { + const styleSource = readFileSync(new URL('./SqlAuditWorkbench.css', import.meta.url), 'utf8'); + + expect(styleSource).toMatch( + /\.gn-sql-audit-filter-time\s*\{[^}]*grid-column:\s*1 \/ span 2;/, + ); + expect(styleSource).toMatch( + /\.gn-sql-audit-toolbar-actions\s*\{[^}]*grid-column:\s*-3 \/ -1;[^}]*justify-content:\s*flex-end;/, + ); + expect(styleSource).toMatch( + /@media \(max-width: 1100px\)[\s\S]*?\.gn-sql-audit-filter-search,[\s\S]*?\.gn-sql-audit-toolbar-actions\s*\{[^}]*grid-column:\s*1 \/ -1;/, + ); + expect(styleSource).toContain('@media (max-width: 1600px)'); + }); + it('keeps the fixed action column opaque while rows are hovered', () => { const styleSource = readFileSync(new URL('./SqlAuditWorkbench.css', import.meta.url), 'utf8');