fix(compare): swap LangChain logo, fix comparison-table horizontal scroll#5409
Conversation
…roll
Replace LangChainIcon's path with the official brand mark (light-blue
link icon) instead of the prior monochrome recreation.
The comparison table's grid cells were missing min-w-0, so a grid item
without it sizes to its content's max-content width instead of
respecting its column's fr track, pushing the whole table wider than
its container and forcing a horizontal scrollbar. Add min-w-0 to every
grid cell/header, and size the row-label column to minmax(140px,
max-content) instead of a guessed fr ratio, so it's exactly as wide as
its longest label ("Vetted first-party integrations") needs and no
wider, leaving the Sim/competitor value columns their full share.
|
The latest updates on your projects. Learn more about Vercel for GitHub. |
PR SummaryLow Risk Overview
Reviewed by Cursor Bugbot for commit 8dcad87. Configure here. |
Greptile SummaryThis PR fixes horizontal overflow on "Sim vs X" comparison pages by adding
Confidence Score: 5/5Safe to merge — changes are scoped to CSS layout corrections and a visual icon swap with no behavioural side-effects. All three files touch only presentation: adding min-w-0 to grid cells is a well-understood CSS fix, the grid-template rewrite is mechanical, the mobile stacking layout is isolated behind max-lg breakpoint utilities, and the LangChain SVG swap is a one-line path/fill change. No data paths, API calls, or state logic are modified. No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[ComparisonTable] --> B{Viewport}
B -->|"≥ lg (1024px)"| C["3-column grid\nminmax(140px,max-content) | 1fr | 1fr"]
B -->|"< lg"| D["Single-column grid\n(stacked layout)"]
C --> E["Label column: sticky left-0\n+ shadow affordance"]
C --> F["Sim column: min-w-0 1fr"]
C --> G["Competitor column: min-w-0 1fr"]
D --> H["Label cell\n(MOBILE_STACK_LABEL)"]
D --> I["Sim value + name tag\n(MOBILE_STACK_VALUE)"]
D --> J["Competitor value + name tag\n(MOBILE_STACK_VALUE)"]
E --> K["ColumnHeader + row-header cells\nall min-w-0"]
F --> K
G --> K
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[ComparisonTable] --> B{Viewport}
B -->|"≥ lg (1024px)"| C["3-column grid\nminmax(140px,max-content) | 1fr | 1fr"]
B -->|"< lg"| D["Single-column grid\n(stacked layout)"]
C --> E["Label column: sticky left-0\n+ shadow affordance"]
C --> F["Sim column: min-w-0 1fr"]
C --> G["Competitor column: min-w-0 1fr"]
D --> H["Label cell\n(MOBILE_STACK_LABEL)"]
D --> I["Sim value + name tag\n(MOBILE_STACK_VALUE)"]
D --> J["Competitor value + name tag\n(MOBILE_STACK_VALUE)"]
E --> K["ColumnHeader + row-header cells\nall min-w-0"]
F --> K
G --> K
Reviews (2): Last reviewed commit: "fix(compare): add min-w-0 to ColumnHeade..." | Re-trigger Greptile |
Below sm (640px) a 3-column table has no room to be legible even with the sticky label column, so switch to the standard responsive-table pattern instead: each fact stacks as label -> Sim's value -> the competitor's value, each value tagged with its product name since the column headers are no longer directly above. Pure CSS (max-sm:/sm: variants), no JS, keeping this a zero-hydration server component.
…kpoint Root cause of the persistent table-overflow/mobile-scroll issues: SourceLink renders a plain <a> with no explicit display, so it defaults to 'display: inline'. min-width and truncate are no-ops on inline elements, so any fact with a source (nearly all of them) ignored its flex/grid parent's width constraint and could force the whole row (and thus the whole table) wider than intended, regardless of any container-level min-w-0/max-content fix. Give the anchor 'block min-w-0' so width constraints and truncation actually cascade down to the wrapped value. Also aligns the table's mobile-stack breakpoint from an ad hoc sm (640px) to lg (1024px), matching this route group's own tablet-and-below convention (.claude/rules for the (landing) group), and fixes the stacked mobile cells to override the cell's base items-center with items-stretch so the name tag and value get a real full-width box to truncate within instead of shrinking to their own content size with no boundary.
ColumnHeader (the Sim/competitor logo header cells in the two fr columns) still had default min-width: auto, so an unusually long competitor name could size the header to its min-content width and push the grid wider than its column allows, same root cause as the rows already fixed.
|
Fixed the ColumnHeader min-w-0 gap you flagged (P2, comparison-table.tsx L22-33): added |
|
@cursor review |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
✅ Bugbot reviewed your changes and found no new issues!
Comment @cursor review or bugbot run to trigger another review on this PR
Reviewed by Cursor Bugbot for commit 8dcad87. Configure here.
1 participant
Summary
min-w-0, so a grid item without it sizes to its content's max-content width instead of respecting its column'sfrtrack, pushing the whole table wider than its container and forcing a horizontal scrollbar on every "Sim vs X" page.minmax(140px, max-content)instead of a guessedfrratio, so it's exactly as wide as its longest label ("Vetted first-party integrations") needs, no wider, leaving the Sim/competitor value columns their full share of the remaining width.Type of Change
Testing
/comparison/langchain,/comparison/power-automate, and/comparison/microsoft-copilot(longest row label and longest header-subtitle text in the dataset, to confirm the column doesn't balloon on any page)tsc --noEmitandbiome checkclean on both touched filesChecklist