Fix mobile styling: header overflow, chapter navigation, and bullet alignment

[Copilot]

Mobile view had three issues: chapter title overflowing into logo area, chapters list requiring extra accordion click, and misaligned bullet points.

Changes

Header Layout

• Flex-wrap .usa-navbar on mobile to place chapter title on separate row
• Logo and menu button remain on first row, title wraps below at full width

@media (max-width: 40em) {
  .usa-navbar {
    flex-wrap: wrap;
  }
  
  .header-chapter-title {
    order: 3;
    flex-basis: 100%;
    margin-top: 0.25rem;
  }
}

Chapter Navigation

• Hide accordion button on mobile, auto-display chapters list with display: block !important
• Added Previous/Next navigation component at page bottom
• addChapterNavigation() function dynamically creates nav links based on current chapter position

function addChapterNavigation(currentFilename: string): void {
  const currentIndex = chapters.findIndex(c => c.filename === currentFilename);
  const prevChapter = currentIndex > 0 ? chapters[currentIndex - 1] : null;
  const nextChapter = currentIndex < chapters.length - 1 ? chapters[currentIndex + 1] : null;
  // Creates nav element with prev/next links
}

List Styling

• Explicit list-style-type: disc on item elements
• Reset padding/margin to align markers with content

Screenshots

Before: Header overlap and extra click required

After: Clean header layout, chapters immediately visible

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.