Repository navigation
fix: Box-link component text overflow and improve layout - #322
Merged
ainsleyclark merged 1 commit intoAug 12, 2026
Merged
Conversation
The box link text container was a flex item with the default min-width: auto, so a nowrap heading contributed its full intrinsic width and pushed the arrow outside the box, which in turn gave the conference single page a horizontal scrollbar on narrow viewports. Let the text shrink below its intrinsic width, cap the heading at the available space instead of a fixed 80%, and stop the arrow shrinking. Also correct the author order on the Self-Determination Theory source for the GopherCon UK 2026 talk (Ryan & Deci, not Deci & Ryan). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011bP6Fds63DMH4nj9SWzGTr
|
The latest updates on your projects. Learn more about Vercel for GitHub. 2 Skipped Deployments
|
ainsleyclark
changed the title
ainsleyclark
deleted the
claude/conference-overflow-gophercon-refs-7li5mo
branch
August 12, 2026 06:33
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
2 participants
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.
Summary
Improved the box-link component's handling of text overflow and layout constraints to prevent long headings and descriptions from pushing the arrow icon outside the container bounds.
Key Changes
gap,max-width, andoverflow: hiddento the main box-link element to establish proper layout boundariesflex-grow: 2toflex: 1 1 autowithmin-width: 0to allow text content to shrink below its intrinsic width when neededwidth: 80%withmax-width: 100%for better responsivenessmax-width: 100%andoverflow-wrap: break-wordto handle long textline-heightfrom1to1.2for better readabilityflex-shrink: 0to prevent the arrow from being compressedImplementation Details
The key fix involves using
min-width: 0on the flex container, which allows flex items to shrink below their content size. This prevents long text from overflowing the container while maintaining proper spacing with the arrow icon via thegapproperty.https://claude.ai/code/session_011bP6Fds63DMH4nj9SWzGTr