fix(apologetik/contra): scope answer-rail width:max-content to >=760px
CI / update (push) Successful in 3m35s
CI / update (push) Successful in 3m35s
The answer-rail had width:max-content with a wider max-width override gated behind @media (min-width:760px). The width:max-content sat outside the media query, so on mobile it inflated the rail's max-content contribution to .arg-body's 1fr grid track. The track expanded past the viewport (max-width:100% can't clamp during cyclic track sizing), making .arg-body and its h2/text appear to overflow horizontally. Move width:max-content inside the >=760px block so the desktop break-out behaviour stays, while mobile falls back to default flex-wrap within the column.
This commit is contained in:
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "homepage",
|
"name": "homepage",
|
||||||
"version": "1.58.0",
|
"version": "1.58.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
+4
-3
@@ -493,13 +493,14 @@
|
|||||||
gap: 8px;
|
gap: 8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
width: max-content;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
}
|
||||||
@media (min-width: 760px) {
|
@media (min-width: 760px) {
|
||||||
.answer-rail {
|
.answer-rail {
|
||||||
/* Extend past the 760px content column into the right gutter when space allows.
|
/* Extend past the 760px content column into the right gutter when space allows.
|
||||||
arg-body left = 50vw - 278px; available right width capped 24px from viewport edge. */
|
arg-body left = 50vw - 278px; available right width capped 24px from viewport edge.
|
||||||
|
width:max-content lets the rail visually exceed its grid column up to max-width;
|
||||||
|
keep this scoped to >=760px so it doesn't inflate the column's intrinsic size on mobile. */
|
||||||
|
width: max-content;
|
||||||
max-width: min(calc(100vw - 126px), calc(50vw + 254px));
|
max-width: min(calc(100vw - 126px), calc(50vw + 254px));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user