Improve mobile website

[PascalSenn]

                                                                                                                                                                                                  
  ┌──────────────────────────────────┬──────┬──────┬────────────────┬─────┐                                                                                                                       
  │               Page               │ Perf │ A11y │ Best Practices │ SEO │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤                                                                                                                       
  │ / (Homepage)                     │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /products/nitro                  │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /products/hotchocolate           │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /products/strawberryshake        │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /platform/ecosystem              │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /platform/analytics              │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /platform/continuous-integration │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /pricing                         │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /services/advisory               │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /services/support                │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /services/training               │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /help                            │ 100  │ 100  │ 100            │ 100 │
  ├──────────────────────────────────┼──────┼──────┼────────────────┼─────┤
  │ /blog                            │ 100  │ 100  │ 100            │ 100 │
  └──────────────────────────────────┴──────┴──────┴────────────────┴─────┘

13/13 pages scoring 100/100/100/100 on mobile Lighthouse. The fixes applied in this session:

[Copilot]

Pull request overview

This PR focuses on improving the website’s mobile experience and Lighthouse scores by adjusting typography semantics, touch target sizing, and responsive layouts across several UI components.

Changes:

• Increase tap target sizes (44px min) for interactive controls (pagination, article menu, newsletter social links, dialog buttons).
• Improve mobile responsiveness for key sections (plans layout, community section layout/overflow, content section sizing).
• Adjust typography/semantics (heading levels, code block font sizing, article text alignment).

Reviewed changes

Copilot reviewed 12 out of 12 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
website/src/style/prism-theme.css	Adjusts Prism code font sizing.
website/src/page-components/products/nitro.tsx	Updates feature card heading levels; tweaks download link text opacity.
website/src/page-components/platform/ecosystem.tsx	Updates feature card heading levels.
website/src/page-components/index.tsx	Adds an explicit viewBox attribute to the Fusion SVG component.
website/src/components/widgets/newsletter-section.tsx	Updates headings and increases social link tap targets.
website/src/components/widgets/community-section.tsx	Mobile layout/overflow adjustments and grid layout for stats.
website/src/components/misc/plan.tsx	Makes plans grid responsive for mobile and adjusts borders/separators.
website/src/components/misc/pagination.tsx	Increases pagination link tap targets.
website/src/components/misc/dialog.tsx	Adjusts z-index and button sizing for mobile usability.
website/src/components/misc/content-section.tsx	Ensures the visible area spans full width.
website/src/components/articles/responsive-article-menu.tsx	Increases button tap targets via padding/min-height.
website/src/components/article-elements.tsx	Changes article paragraph/list alignment to left.

Comments suppressed due to low confidence (2)

website/src/components/misc/dialog.tsx:11

• display: visible is not a valid value for the CSS display property, so the dialog’s visibility behavior will rely on fallback/default styles and may not toggle reliably. Use a valid display value when $show is true (e.g., block/flex) or switch to visibility/opacity if the intent is to keep layout while hiding.

  z-index: 20;
  width: 100vw;
  background-color: #aba0ff;
  display: ${({ $show }) => ($show ? "visible" : "none")};
`;

website/src/components/widgets/newsletter-section.tsx:153

• NewsletterTitle was changed from h3 to h2. In this codebase, global h2 styling is significantly larger on desktop (4rem at ≥992px), which may cause the title to overflow its box or dominate the section visually. If the semantic change is needed, consider applying a local font-size override for this heading to keep the layout stable.

const NewsletterTitle = styled.h2`
  flex: 0 0 auto;
  margin-bottom: 24px;

  @media only screen and (min-width: 992px) {

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[rstaib]

LGTM