Skip to content

fix: align contact card edges with the other field panels - #36

Merged
axisrow merged 7 commits into
mainfrom
ao/axisrow.github.io-25/fix/unified-field-geometry
Aug 13, 2026
Merged

fix: align contact card edges with the other field panels#36
axisrow merged 7 commits into
mainfrom
ao/axisrow.github.io-25/fix/unified-field-geometry

Conversation

@axisrow

@axisrow axisrow commented Aug 13, 2026

Copy link
Copy Markdown
Owner

Проблема

PR #35 унифицировал внешнюю геометрию полей, но Contact визуально продолжал выбиваться. Причина — внутренняя раскладка, которую #35 не трогал: .contact-field единственное поле, внутри которого сидит отдельно спозиционированная карточка:

.contact-card {
  width: min(940px, 82%);
  margin-left: 4%;
}

На 1440px это оставляло ~285px мёртвого места справа от карточки.

Изменения

  • .contact-cardwidth: 100%, убран margin-left: 4%: карточка занимает контентный бокс поля целиком.
  • .contact-fieldpadding: 0 вместо clamp(24px, 5vw, 70px), чтобы рамка карточки села на край поля, ровно как у панелей Experience/About.
  • Удалены мобильные оверрайды (.contact-card { width: 100%; margin-left: 0 } и .contact-field { padding: 0 }) — после правки они дублируют базовые правила.
  • Бамп styles.css?v=unified-field-geometry-2.

Типографика не тронута: h2 и параграфы внутри карточки уже ограничены max-width: 880px/660px.

Проверка

  • npm test — 36/36 зелёные. Ни .contact-card, ни строка styles.css?v= в тестах не запиннены.
  • .contact-field-visual позиционируется через inset: 0 от поля, а не от контентной области, — убранный паддинг на слой эффекта не влияет.

🤖 Generated with Claude Code

https://claude.ai/code/session_0197KCvwKXu9TZh3Ry8RBerH

axisrow and others added 6 commits August 13, 2026 11:52
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
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
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
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
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
@axisrow

axisrow commented Aug 13, 2026

Copy link
Copy Markdown
Owner Author

🔍 Local review (cycle 1) — round aee53fd4-6114-4c95-8f94-f1049b0d48a4

Reviewed locally (/review + Codex companion), no bots pinged.

Verdict Reviewer Finding Location
FIX codex Widening the Experience and About panels to full viewport width without an inner max-width wrapper lets their content stretch far beyond the normal content column on wide screens, and both panels still keep visible side borders and rounded corners the edge-to-edge styling was meant to remove. styles.css:948-959
FIX claude The mobile media-query override for the Experience and About panels now duplicates the same properties as the unconditional base rule and can be removed as dead code. styles.css:1965-1975
IRRELEVANT claude A finding about a comment/behavior mismatch in the effect-mounting retry logic concerns a file this PR does not touch at all. main.js:234-241

Note: the PR description/title describe only a contact-card alignment fix, but the actual diff also makes the Experience/About panels edge-to-edge (unrelated to contact) — this broader change is what produced the two FIX findings above.

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
@axisrow

axisrow commented Aug 13, 2026

Copy link
Copy Markdown
Owner Author

🔍 Local review (cycle 2) — round c0168b9f-bdbe-442a-90da-789a107e64cf

Reviewed locally (/review + Codex companion), no bots pinged.

Verdict Reviewer Finding Location
IRRELEVANT claude A finding about the CPU-fallback retry cleanup path concerns main.js, which this PR does not modify. main.js:222-241
IRRELEVANT claude A finding about the static-fallback retry mutating shared scene state concerns main.js, which this PR does not modify. main.js:250-265
IRRELEVANT claude A finding about the hand-maintained appearance-modifier table concerns effect-skins.js, which this PR does not modify. effect-skins.js:131-133
IRRELEVANT claude A finding about a stale API-version reference in the project docs concerns CLAUDE.md, which this PR does not modify. CLAUDE.md:33

Codex verdict: approve, no findings.

Result: clean round — no FIX/UNVERIFIED verdicts, every configured reviewer answered. Cycle 2 is final.

@axisrow

axisrow commented Aug 13, 2026

Copy link
Copy Markdown
Owner Author

📋 Review summary — all cycles

Cycle Reviewer Finding Verdict Resolution
1 codex Experience and About panels stretched wide content beyond the site column and kept stray side borders/rounded corners after going edge-to-edge. FIX Fixed in 7823872
1 claude The mobile override for those two panels became a dead duplicate of the unconditional base rule. FIX Fixed in 7823872
1 claude A finding about the effect-mounting retry cleanup path targets a file this PR never touches. IRRELEVANT Out of scope — main.js not part of this PR diff
2 claude A finding about a stale API-version doc reference targets a file this PR never touches. IRRELEVANT Out of scope — files not part of this PR diff (4 findings across main.js/effect-skins.js/CLAUDE.md)
2 codex Clean pass, no findings, verdict: approve

Totals: 2 FIX (both resolved), 0 SKIP, 5 IRRELEVANT, 0 UNVERIFIED.

Note: PR title/body describe only a contact-card alignment fix, but the diff also makes Experience/About panels edge-to-edge — that broader scope is what produced the two FIX findings above (both now fixed).

@axisrow
axisrow merged commit b64ad0e into main Aug 13, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant