Files
Rohit Ghumare 197aa8d0e8 fix(website): mobile overflow + add OG/Twitter preview images
Mobile (375px) had ~55px horizontal scroll caused by grid tracks
defaulting to min-content across nowrap text in Install, AgentInstall,
and CommandCenter sections. Replace implicit/`1fr` tracks with
`minmax(0, 1fr)` so tracks can shrink below their content and let
`overflow: hidden` / `text-overflow: ellipsis` actually clip.

Also tightens padding, font-size, and letter-spacing at <=640px for
Install boxes, AgentInstall snippet head/code/copy row, CommandCenter
tabs and launch strip, and Stats tiles so dense uppercase content stops
crowding itself at mobile widths.

Adds app/opengraph-image.tsx and app/twitter-image.tsx using
next/og ImageResponse, statically prerendered at build (no edge
runtime) so socials get a real 1200x630 preview instead of the blank
card the site was shipping before.
2026-04-19 00:30:22 +01:00

71 lines
1.2 KiB
CSS

.stats {
border-top: 1px solid var(--charcoal);
border-bottom: 1px solid var(--charcoal);
background: var(--iron);
}
.row {
display: grid;
grid-template-columns: repeat(6, 1fr);
max-width: 1440px;
margin: 0 auto;
}
.stat {
padding: 48px 24px;
text-align: center;
border-right: 1px solid var(--charcoal);
transition: background 250ms ease;
}
.stat:last-child {
border-right: none;
}
.stat:hover {
background: var(--charcoal);
}
.num {
font-size: clamp(40px, 5vw, 64px);
font-weight: 900;
line-height: 1;
color: var(--gold);
letter-spacing: -0.02em;
}
.label {
margin-top: 12px;
font-size: 11px;
letter-spacing: 0.96px;
color: var(--steel);
text-transform: uppercase;
}
@media (max-width: 1024px) {
.row {
grid-template-columns: repeat(3, 1fr);
}
.stat {
border-bottom: 1px solid var(--charcoal);
}
.stat:nth-child(3n) {
border-right: none;
}
}
@media (max-width: 640px) {
.row {
grid-template-columns: 1fr 1fr;
}
.stat {
padding: 32px 12px;
}
.num {
font-size: 36px;
}
.label {
font-size: 10px;
letter-spacing: 0.6px;
}
.stat:nth-child(3n) {
border-right: 1px solid var(--charcoal);
}
.stat:nth-child(2n) {
border-right: none;
}
}