fix(landing): balance the two-faced threshold card#4
Conversation
Divider now spans only the columns (not through the header/footer bar); symmetric column padding; label/value split per row for aligned values.
There was a problem hiding this comment.
Code Review
This pull request refactors the layout and styling of the threshold card in docs/index.html, adjusting gradients, paddings, and the grid structure of the header and columns. The review feedback highlights several mobile responsiveness issues on screens smaller than 560px where the columns stack vertically. Specifically, the reviewer recommends adding media queries to hide the newly positioned vertical divider, reset asymmetric column paddings to prevent misalignment, and hide the horizontal header to maintain a clean and intuitive mobile layout.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| .th-cols::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:1px; | ||
| background:linear-gradient(var(--steel),var(--accent) 52%,var(--warn));opacity:.4;transform:translateX(-.5px)} |
There was a problem hiding this comment.
With the vertical divider moved from .threshold::before to .th-cols::before, the existing mobile override at line 310 (.threshold::before { display: none; }) is now obsolete. On screens smaller than 560px, the stacked single-column layout will display the vertical divider right down the middle, slicing through the text.
We should add a media query override to hide .th-cols::before on mobile screens.
| .th-cols::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:1px; | |
| background:linear-gradient(var(--steel),var(--accent) 52%,var(--warn));opacity:.4;transform:translateX(-.5px)} | |
| .th-cols::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:1px; | |
| background:linear-gradient(var(--steel),var(--accent) 52%,var(--warn));opacity:.4;transform:translateX(-.5px)} | |
| @media(max-width:560px){.th-cols::before{display:none}} |
| .th-cols::before{content:"";position:absolute;top:2px;bottom:2px;left:50%;width:1px; | ||
| background:linear-gradient(var(--steel),var(--accent) 52%,var(--warn));opacity:.4;transform:translateX(-.5px)} | ||
| .th-col{display:flex;flex-direction:column} | ||
| .th-col.past{padding-right:22px} .th-col.future{padding-left:22px} |
There was a problem hiding this comment.
On mobile screens (max-width: 560px), the columns stack vertically. Keeping the asymmetric desktop paddings (padding-right: 22px on .past and padding-left: 22px on .future) will cause the text to be misaligned and off-center relative to the card container.
We should reset these paddings to 0 on mobile screens.
| .th-col.past{padding-right:22px} .th-col.future{padding-left:22px} | |
| .th-col.past{padding-right:22px} .th-col.future{padding-left:22px} | |
| @media(max-width:560px){.th-col.past{padding-right:0} .th-col.future{padding-left:0}} |
| .th-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; | ||
| font-family:"SF Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:1.5px; | ||
| color:var(--dim);margin-bottom:20px;text-transform:uppercase} |
There was a problem hiding this comment.
On mobile screens, the columns stack vertically (the "PAST" column on top, and the "FUTURE" column on the bottom). However, the .th-head header ("PAST · gate · FUTURE") remains horizontal, which is visually misleading. Since each column already has its own clear header (baseline and current), we should hide .th-head on mobile screens to keep the layout clean and intuitive.
| .th-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; | |
| font-family:"SF Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:1.5px; | |
| color:var(--dim);margin-bottom:20px;text-transform:uppercase} | |
| .th-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center; | |
| font-family:"SF Mono",ui-monospace,monospace;font-size:.7rem;letter-spacing:1.5px; | |
| color:var(--dim);margin-bottom:20px;text-transform:uppercase} | |
| @media(max-width:560px){.th-head{display:none}} |
Divider spans only the columns area (no longer cuts through the header and the green footer bar); symmetric 22px column padding around the centered divider; each row split into label + right-aligned value for tidy, aligned columns.