Fix sticky column bleed-through when scrolling table on mobile - #25
Open
KonstantinMB wants to merge 2 commits into
Open
Fix sticky column bleed-through when scrolling table on mobile#25KonstantinMB wants to merge 2 commits into
KonstantinMB wants to merge 2 commits into
Conversation
- Add overflow-x-hidden to page root to prevent page-level horizontal scroll - Restructure filter bar so search occupies full row on mobile, selects wrap below (sm+ stays single row) - Remove hardcoded minWidth 1400px from table; column-level minWidths drive width, enabling mobile column hiding - Hide 9 low-priority columns (subindustry, location, team, stage, nonprofit, last round, employees, 6m growth, website) on mobile (< md); all 18 visible at md+ - Fix sticky column backgrounds to match alternating row color (bg-muted/5 vs bg-background) - Hide "Showing X–Y of N" text on mobile to prevent pagination bar crowding; Prev/Next always visible Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013XsZSM7E8ShnL5hohYaLWu
Two bugs from PR #23 caused content from scrolling columns to show through the sticky # and Company columns: 1. Sticky td cells on odd rows used bg-muted/5 (5% opacity), making them nearly transparent. Scrolling columns bled through every alternating row — now always bg-background (fully opaque). 2. Sticky th cells used bg-muted/30 (30% opacity). Changed to bg-background so the header sticky column is also fully opaque. 3. Restored minWidth: max-content on the table element. Without it, w-full compressed all columns into the 343px mobile viewport (table-layout: auto ignores cell-level minWidth when the table is width-constrained). max-content lets the table be as wide as its visible columns require (~942px on mobile with 9 hidden columns). Added a subtle border-r on the Company column to visually separate the sticky area from the scrolling columns. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013XsZSM7E8ShnL5hohYaLWu
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
Two bugs introduced in PR #23 caused content from scrolling columns to visually bleed through the sticky
#and Company columns when scrolling horizontally on mobile.Root cause 1 (alternating row bug — primary): Sticky
<td>cells on odd rows were givenbg-muted/5(5% opacity), making them nearly transparent. Scrolling columns were passing behind the sticky column as intended, but showing through the transparent cell background. Every other row appeared broken. Fixed by reverting sticky cells to always usebg-background(fully opaque).Root cause 2 (header): Sticky
<th>cells usedbg-muted/30(30% opacity), same class as the header row tint. Changed tobg-backgroundso the sticky header cells are also fully opaque when other header cells scroll under them.Root cause 3 (table compression): Removing the table
minWidthin PR #23 left onlyw-full, which forced the table to 343px on mobile.table-layout: autoignores cell-levelminWidthhints when the table is width-constrained, compressing all columns. Fixed withminWidth: 'max-content'— table is at least as wide as its visible columns require (~942px on mobile, ~1400px on desktop), while still filling wider containers viaw-full.Visual polish: Added a subtle
border-r border-border/40to the Company column to visually delineate the sticky area from the scrolling content.Generated by Claude Code