oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2026-08-08 10:12:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Chart builder: data-aware defaults, one-click hint fixes, canvas preview, fullscreen modal

Browse Source
This commit is contained in:
Oleh Omelchenko
2026-06-10 17:10:18 +03:00
parent 68a044752f
commit 62d0697f0e
20 changed files with 1133 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/ChartBuilderModal.module.css
+60 -3
View File
@@ -3,7 +3,13 @@
.builder {
display: grid;
grid-template-columns: minmax(320px, 360px) 1fr;
min-height: 480px;
/* Fill the modal body and never exceed it, so each pane scrolls internally rather
than the whole modal growing past the viewport (otherwise a tall chart pushes the
Create/Cancel actions below the fold). The `minmax(0, 1fr)` row lets the panes
shrink below their content height so their own overflow kicks in. */
grid-template-rows: minmax(0, 1fr);
height: 100%;
min-height: 0;
min-width: 0;
}
@@ -24,6 +30,7 @@
border-right: var(--border-width) solid var(--border);
overflow-y: auto;
min-width: 0;
min-height: 0;
}
.datasetName {
@@ -213,6 +220,13 @@
border-radius: var(--radius);
}
/* These take focus only programmatically (tabIndex -1) after a hint fix is applied,
to keep focus off <body>; no visible ring for that script-driven move. */
.warnings:focus,
.configPane:focus {
outline: none;
}
.warning {
display: flex;
align-items: flex-start;
@@ -230,6 +244,42 @@
color: var(--support-warning-fg);
}
/* The hint text and its one-click remedies stacked, growing beside the icon. */
.warningBody {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
}
/* Actionable-hint remedies: each fix is an offer, never forced, so they're
low-emphasis ghost buttons — suggestions beside the advice, not commands. */
.warningFixes {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.warningFix {
font: inherit;
font-size: 12px;
cursor: pointer;
padding: var(--space-1) var(--space-2);
border: var(--border-width) solid var(--border-strong);
border-radius: var(--radius);
background: var(--bg);
color: var(--accent);
}
.warningFix:hover {
background: var(--layer-01);
}
.warningFix:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 1px;
}
/* Explains the disabled Create action (contract 10: a disabled control must say
why). `margin-top: auto` pins it just above the actions so the two read as one. */
.createHint {
@@ -292,6 +342,8 @@
flex-direction: column;
padding: var(--space-5);
min-width: 0;
min-height: 0;
overflow: hidden;
background: var(--bg);
}
@@ -305,9 +357,14 @@
.previewFrame {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
/* A chart taller/wider than the pane scrolls *here*, inside a fixed viewport, so
the modal keeps its shape. `safe` centring aligns to the start instead of
clipping the top/left when the chart overflows. */
overflow: auto;
align-items: safe center;
justify-content: safe center;
}
.previewHost {