From 957d2486cc4460c779004a3c5ffc929068c9c05e Mon Sep 17 00:00:00 2001 From: Pouyan Jahangiri Date: Sat, 1 Aug 2026 00:37:43 -0700 Subject: [PATCH] fix(composer): centre the column vertically The column centred horizontally but sat at the top of the page, because align-items only handles the cross axis. `justify-content: safe center` rather than plain `center`, and the `safe` is load-bearing. In a scroll container a plain `center` clips the top of anything taller than the viewport and puts it permanently out of reach: with a long build history the heading itself would have been unscrollable. `safe` centres while the content fits and falls back to start alignment the moment it does not. There is deliberately no plain `center` declared above it as a fallback. A browser without `safe` support drops the whole declaration and lands on start alignment, which is exactly today's behaviour; declaring `center` first would give those browsers the clipping bug instead. Padding is symmetric now, since asymmetric edges make a centred column read as sitting low. 1465 tests green. Lint and build clean. --- .../configurator/IdleCourseSetup.module.css | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/apps/web/src/components/configurator/IdleCourseSetup.module.css b/apps/web/src/components/configurator/IdleCourseSetup.module.css index 024926d5..f8378774 100644 --- a/apps/web/src/components/configurator/IdleCourseSetup.module.css +++ b/apps/web/src/components/configurator/IdleCourseSetup.module.css @@ -8,8 +8,17 @@ display: flex; flex-direction: column; align-items: center; + /* `safe` is doing real work here, not decoration. A plain `center` in a scroll container clips + the top of anything taller than the viewport and puts it out of reach: with a long build + history the heading would be unscrollable. `safe center` centres while the content fits and + falls back to start alignment the moment it does not. A browser without `safe` drops the whole + declaration and lands on start alignment, which is the old behaviour rather than a broken one, + so there is deliberately no plain `center` fallback above this. */ + justify-content: safe center; gap: var(--space-10); - padding: var(--space-10) var(--space-5) var(--space-12); + /* Symmetric, so "centred" reads as centred. These are the minimum edges once the content is tall + enough to scroll. */ + padding: var(--space-10) var(--space-5); } /* Every direct child takes the measure, so nothing has to remember to set its own. */