joakim/gems
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): use CSS grid-areas layout with anchor-positioned report picker

Browse Source 
Replace flexbox layout with CSS grid using named grid-areas for responsive
content containment. Gutters collapse naturally on small screens via
min(--content-max-width, 100%). Anchor ReportPicker to its trigger button
using CSS anchor positioning instead of fixed viewport offsets.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Joakim
2026-02-15 14:08:41 +01:00
parent 78881e1b07
commit d86501e4e6
5 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
opal-web/src/lib/components/ReportPicker.svelte
+2 -3
View File
@@ -83,9 +83,8 @@
<style>
.report-picker {
position: fixed;
top: 48px;
left: var(--spacing-md);
right: auto;
position-anchor: --report-btn;
position-area: bottom span-right;
margin: 0;
padding: var(--spacing-sm);
background-color: var(--bg-primary);