fix(landing): contain sr-only logos heading to stop phantom root scrollbar (#5585)

This commit is contained in:
Waleed
2026-07-10 18:11:26 -07:00
committed by GitHub
parent da2371adf8
commit 1c604152b3
2 changed files with 14 additions and 4 deletions
@@ -9,11 +9,16 @@ import { Logos } from '@/app/(landing)/components/logos'
*
* Wrapped as a labelled `<section>` so it is a discrete, crawlable landmark; the
* heading is sr-only because the logos are a proof band rather than a content
* section, but the H2 keeps the page's heading hierarchy intact.
* section, but the H2 keeps the page's heading hierarchy intact. The section is
* `relative` so the `sr-only` (`position: absolute`) heading is contained by it
* rather than falling back to the document root - matching {@link Features}'s
* `relative` wrapper for its own `sr-only` heading, and avoiding a phantom root
* scrollbar (the heading's un-offset static position would otherwise inflate
* `document.documentElement`'s scroll height by its own position in the page).
*/
export function PlatformLogosRow() {
return (
<section id='platform-logos' aria-labelledby='platform-logos-heading'>
<section id='platform-logos' aria-labelledby='platform-logos-heading' className='relative'>
<h2 id='platform-logos-heading' className='sr-only'>
Companies building AI agents with Sim
</h2>
@@ -9,11 +9,16 @@ import { Logos } from '@/app/(landing)/components/logos'
*
* Wrapped as a labelled `<section>` so it is a discrete, crawlable landmark; the
* heading is sr-only because the logos are a proof band rather than a content
* section, but the H2 keeps the page's heading hierarchy intact.
* section, but the H2 keeps the page's heading hierarchy intact. The section is
* `relative` so the `sr-only` (`position: absolute`) heading is contained by it
* rather than falling back to the document root - matching {@link Features}'s
* `relative` wrapper for its own `sr-only` heading, and avoiding a phantom root
* scrollbar (the heading's un-offset static position would otherwise inflate
* `document.documentElement`'s scroll height by its own position in the page).
*/
export function SolutionsLogosRow() {
return (
<section id='solutions-logos' aria-labelledby='solutions-logos-heading'>
<section id='solutions-logos' aria-labelledby='solutions-logos-heading' className='relative'>
<h2 id='solutions-logos-heading' className='sr-only'>
Companies building AI agents with Sim
</h2>