fix: unify field geometry across desktop and mobile - #35
Merged
Conversation
`.experience-field` and `.about-field` carried their own width (1340px vs 1440px) and a ±4vw horizontal offset, so at 1512px they landed at x=26/right=1366 and x=146/right=1486 while stars, projects, proof and contact all sat at x=36/right=1476. The panels visibly failed to reach the edge the other blocks reached. Give both the same full-bleed geometry as every other field and keep the accent in the gradient instead of the box position. The 981–1364px media query only existed to cancel the offset, so it goes too. On mobile the same three blocks subtracted 24px on top of the 24px gutter `.section` already applies, landing 36px off the edge while the copy panels inside the full-bleed fields stayed at 24px; the hero used 20px. Normalise all of them to one 24px gutter. Measured at 1512/1280/1024/820/390px: every block now shares one pair of edges. npm test (36) and profile generators (42) pass. Closes #34 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH
Owner
Author
🔍 Local review (cycle 1) — round 0a9a8fce-8a45-493b-a502-dba7b36631b1Reviewed locally (
Both reviewers returned a clean verdict on this round — no |
Owner
Author
📋 Review summary — all cycles
Totals: 0 FIX, 0 SKIP, 0 UNVERIFIED. Both configured local reviewers approved on round 1. |
axisrow
added a commit
that referenced
this pull request
Aug 13, 2026
The task was to widen the fields. The two follow-up commits went past that into the contact section -- stretching .contact-card to the field box, then reworking the copperBars layer and the card fill to compensate -- and broke a composition that was fine to begin with. Reset styles.css and index.html to their pre-#35 state and reapply only the original change: .experience-field/.about-field move from a 1340px box with per-panel offsets to the min(1440px, 100vw - 24px) box every other field already uses. The two media blocks that existed solely to cancel those offsets go with them. The contact section is untouched: the card keeps its width and offset, and the copper bars keep showing in the gap beside it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH
axisrow
added a commit
that referenced
this pull request
Aug 13, 2026
* fix: align contact card edges with the other field panels The previous commit unified the outer field geometry, but contact stayed visually off: it is the only field holding a separately positioned card (width: min(940px, 82%) + margin-left: 4%), which left ~285px of dead space on its right at 1440px. Give .contact-card the field's full content box and drop the field's own clamp() padding so the card border sits on the field edge, exactly like the experience/about panels. The mobile overrides that hand-reset these values are now redundant with the base rules and are removed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH * fix: let the copper bars show through the contact card Widening the card to the full field box covered the copperBars canvas entirely: the bars used to be visible only in the dead space the narrow card left on its right, so removing that gap removed the effect. Fade the card background towards the bottom-right instead of filling it with an opaque --veil, matching how the experience/about panels expose their own canvases. The gradient targets the same focus point as the visual's mask (78% 72%), so the bars read across the panel while the copy side keeps a near-opaque backing. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH * revert: undo the contact-section rework, keep only the field widening The task was to widen the fields. The two follow-up commits went past that into the contact section -- stretching .contact-card to the field box, then reworking the copperBars layer and the card fill to compensate -- and broke a composition that was fine to begin with. Reset styles.css and index.html to their pre-#35 state and reapply only the original change: .experience-field/.about-field move from a 1340px box with per-panel offsets to the min(1440px, 100vw - 24px) box every other field already uses. The two media blocks that existed solely to cancel those offsets go with them. The contact section is untouched: the card keeps its width and offset, and the copper bars keep showing in the gap beside it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH * fix: restore the starfield canvas the bot sync dropped The 2026-08-13 sync regenerated the PROFILE:STARS block from a stale copy of the template and removed .stars-field-visual along with the starfield canvas, so main now renders six accents instead of seven. Merging main into this branch pulled that deletion in and turned the smoke test red. Put the three lines back, byte-identical to profile/sync/templates/stars.html.j2, which still carries them. This is exactly the drift the 'starfield canvas lives in the bot-managed template' test exists to catch. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH * feat: run every field edge to edge The fields carried a 12px side gutter (min(1440px, 100vw - 24px)) that read as a margin around each panel. Drop the cap so all six -- stars, projects, proof, experience, about, contact -- span the full viewport width. With no page showing beside them, the vertical borders and corner radius on experience/about no longer read as a panel edge, so those become border-block like contact already was. Mobile loses its own calc(100% - 24px) gutter for the same reason. html already carries overflow-x: clip, so 100vw does not introduce sideways scrolling. Measured at a 1440px viewport: every field is L=0 R=1440 W=1440, document scrollWidth stays 1440. The smoke test pinned the old max-width formula; it now pins width: 100vw. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH * fix: cap experience/about content width and drop stray borders The edge-to-edge rewrite widened .experience-field/.about-field to 100vw without an inner max-width, so timeline/about content stretched past the site's normal content column on wide viewports. Both panels also kept veil-panel's border-inline/border-radius since border-block never cleared them, contradicting the edge-to-edge design intent. - Cap horizontal padding at max(--panel-space, half the max-width gutter), matching the pattern .projects-field already uses. - Explicitly reset border/border-radius before re-adding border-block. - Drop the now-dead mobile override that duplicated the unconditional base rule. - Bump styles.css?v=edge-to-edge-fields-2. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH --------- Co-authored-by: axisrow <axisrow@users.noreply.github.com> Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #34
Проблема
.experience-fieldи.about-fieldбыли единственными блоками с собственной геометрией: ширина1340pxвместо1440pxплюс горизонтальный сдвиг±min(4vw, …). Измерено на 1512px:Отсюда «поля заполняются не до конца» на третьем скриншоте issue: experience не доходит до правого края, about — до левого.
На мобильном та же тройка (
experience/about/contact-field) вычитала24pxповерх гуттера, который.sectionуже применяет, и вставала на 36px от края, тогда как копи-панели внутри full-bleed полей оставались на 24px, а hero использовал 20px. Три разных отступа — то самое «у каждого свой шаблон».Что сделано
experience/aboutполучили ту же full-bleed геометрию, что и остальные поля; акцент остаётся в градиенте, а не в позиции блокаПроверка
Геометрия замерена headless-Chrome на 1512 / 1280 / 1024 / 820 / 390px — все блоки делят одну пару краёв. Визуально проверены experience, contact и карточки проектов на мобильном: канвас-эффекты и градиенты не затронуты.
npm test— 36/36 ✅python3 -m unittest discover -s profile/tests— 42/42 ✅Версия
styles.css?v=забамплена, как требует CLAUDE.md.🤖 Generated with Claude Code
https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH