refactor(wall): tighter 45x45 / 12-col layout to eliminate horizontal scroll - #2
Merged
Merged
Conversation
The merged version (10 cols x 80px = 800px) exceeded GitHub's profile
README content area on most viewports, producing a horizontal scrollbar.
The 50/12/60 attempt (720px) was still borderline on narrower views.
Final dimensions target ~660px total table width, which fits comfortably
within GitHub's typical 700px content area:
- AVATAR_SIZE 70 -> 45 (was briefly 50)
- GRID_COLS 10 -> 12
- CELL_WIDTH 80 -> 55 (was briefly 60)
- Total table width: 12 x 55 = 660px (well under 700px content area)
Also reduced NAME_MAX_LEN 15 -> 12 to match narrower cells.
GitHub still strips inline border-radius on img, so avatars render as
squares. Round-avatar support deferred to a follow-up using an image
proxy (weserv.nl) that returns pre-rounded PNGs.
Tests:
- Shortened fixture names ("Alice Example" -> "Alice") to fit the new
12-char cap without unintentional truncation in assertions
- Padding-cell width assertions updated 60 -> 55
- Two-rows test now uses 14 items (was 11) since 12 cols fits more per row
- 35/35 passing
4 tasks
sakanni
added a commit
that referenced
this pull request
Jun 8, 2026
Two layout issues observed after PR #2 merged to main: 1. Cells were still visibly uneven on the org page. GitHub's table renderer was auto-sizing columns based on content despite the per-cell <td width> attribute. Fix: add an explicit <colgroup> with one <col width="55"/> per column. <col> declarations take precedence over content-based sizing. 2. Horizontal scrollbar was still present even at 660px total table width. Root cause: column count is the lever, not avatar size. The table can't shrink narrower than GRID_COLS x CELL_WIDTH, and 660px exceeds many viewports (especially mobile and narrow desktops with sidebars open). Fix: drop GRID_COLS 12 -> 6, so total table width becomes 6 x 55 = 330px. This fits viewports down to ~360px (most narrow mobile widths). Trade-off: wall is now 26 rows tall instead of 13 for 151 contributors. Vertical height is fine per the design discussion - row count is not constrained. Tests: - Padding-cell counts updated: 12-col row -> 6-col row produces 4 empty cells (was 10) for a 2-cell row; 8 items produces 1 full row + 2 + 4 padding (was 14 items at 12 cols) - colgroup test expects 6 <col> entries (was 12) - 36/36 passing (added one for colgroup presence)
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.
Summary
The merged version (10 cols x 80px = 800px) exceeded GitHub's profile README content area on most viewports, producing a horizontal scrollbar on the org page.
This PR shrinks the wall to fit comfortably within ~700px content area:
What this does NOT fix
GitHub strips inline `style="border-radius: 50%"` from `![]()
` in profile README rendering, so avatars still appear as squares. Round avatars need an image proxy (e.g. `images.weserv.nl`) returning pre-rounded PNGs. Deferred to a follow-up if wanted.
Tests