[R-12] CTA buttons stacking vertically — must be side-by-side

[vmorps]

[R-12] CTA Buttons Stacking Vertically — Must Be Side-by-Side

Severity: P1
Sprint: 2
Component: Standards, Hero (and all component CSS with .btn)
Spec: design/specs/responsive-layout-fixes.md § R-12
Mockups: design/specs/responsive-layout-mocks.html — Screenshot 03

---

Current Behavior

On mobile, the Standards section CTA buttons ("View Specification" and "Architecture Overview") render as full-width stacked blocks rather than compact side-by-side pills. The button padding and font size create elements that individually exceed ~50% of available width, triggering flex-wrap.

The same behavior can occur in the Hero ("Get Started" + "View Documentation") and FinalCTA sections.

Expected Behavior

CTA buttons must always render side-by-side on mobile. They should be compact enough to share a single row on a 375px viewport with 16px horizontal padding (343px usable width).

File(s) Impacted

• src/components/landing/Standards.module.css (CSS changes)
• src/components/landing/Standards.tsx (TSX change — .btnSuffix span)
• src/components/landing/Hero.module.css
• All component CSS with .btn

Implementation Approach

Part A: Reduce button dimensions on mobile

/* Mobile-first: compact buttons */
.btn {
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
}

/* Desktop: restore original sizing */
@media (min-width: 1024px) {
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
  }
}

Part B: Shorten "Architecture Overview" label on mobile (TSX + CSS)

{/* Standards.tsx — wrap the suffix in a span */}
<a href="/architecture" className={`${styles.btn} ${styles.btnGhost}`}>
  Architecture<span className={styles.btnSuffix}> Overview</span>
</a>

/* Standards.module.css */
.btnSuffix {
  display: none;
}

@media (min-width: 1024px) {
  .btnSuffix {
    display: inline;
  }
}

This renders "Architecture" on mobile and "Architecture Overview" on desktop. No JS, no hydration mismatch, no layout shift.

Width budget at 375px (after Part A + B):

• Usable width: 375px - 32px (padding) = 343px
• Two buttons + 10px gap: each button gets ~166px
• "View Specification" at 0.8125rem + 1rem padding ≈ 152px — fits ✓
• "Architecture" at 0.8125rem + 1rem padding ≈ 120px — fits ✓

Acceptance Criteria

• "View Specification" + "Architecture" render side-by-side at 375px
• Desktop shows full label: "Architecture Overview"
• "Get Started" + "View Documentation" render side-by-side at 375px
• All CTA pairs across the landing page render side-by-side at 375px
• Buttons still wrap gracefully only if text is truly too long (< 320px edge case)
• Desktop button sizing is unchanged

---

Branch strategy: All responsive fixes will land on a single branch (fix/responsive-layout) with one PR against main. Commits grouped by sprint.