Remove structural CSS from docs, delegate layout to Starlight

[Copilot]

Remove Structural Custom CSS from Documentation

Summary

Successfully removed all structural CSS (layout, positioning, sizing, spacing) from docs/src/styles/custom.css while maintaining all theme-related styling (colors, gradients, backgrounds, typography). The Starlight theme framework now handles all layout concerns, making the documentation more maintainable and responsive.

Changes Made

CSS Refactoring

Removed Structural CSS (~566 lines):

• Layout & positioning: display, position, flex, grid, z-index, top, left, right, bottom
• Sizing & spacing: width, height, padding, margin, max-width, min-width
• Layout effects: transform, overflow, gap, align-items, justify-content

Kept Theme CSS (~400 lines):

• Colors & backgrounds: color, background, background-color, CSS variables (--sl-color-*)
• Borders & effects: border, border-color, border-radius, box-shadow, backdrop-filter
• Typography: font-family, font-size, font-weight, line-height, letter-spacing
• Animations: animation, transition, @keyframes
• Interactive states: :hover, :focus-visible, theme selectors

Test Results

✅ All 12 mobile responsive tests pass successfully:

• iPhone 16 (Mobile) - 393×852
• Tablet Portrait (iPad) - 768×1024
• Tablet Landscape (iPad) - 1024×768
• Desktop Portrait - 1080×1920
• Desktop Landscape - 1920×1080

Technical Details

The documentation now uses Starlight's built-in responsive layout system for all structural concerns, while custom CSS provides:

• GitHub brand colors and gradients
• Animated background effects (light/dark themes)
• Typography styling and weights
• Sidebar navigation styling
• Code block and table theming
• Button and link hover states
• Scrollbar customization

This separation improves maintainability and ensures the documentation responds properly to all screen sizes using Starlight's proven responsive patterns.

Files Changed

• docs/src/styles/custom.css - Refactored to theme-only CSS
• docs/tests/mobile-responsive.spec.ts - Fixed strict mode violation
• docs/.gitignore - Added temp/test files and screenshots

Original prompt

Remove all structural custom CSS from the docs/ and maintain the theme changes. Show screenshots for phone, tablet, desktop (portrait landscape).

---

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

[mnkiefer]

@copilot Remove the screenshot files from this PR

[Copilot]

@copilot Remove the screenshot files from this PR

Screenshot files removed in ee9da1d. Also added screenshots/ and *.png to .gitignore to prevent future commits.

[Copilot]

Pull Request Overview

This PR successfully refactors the documentation CSS by removing ~566 lines of structural layout code (positioning, sizing, spacing, flexbox, grid) and delegating all layout concerns to the Starlight theme framework. The remaining ~400 lines focus purely on theme styling (colors, gradients, typography, animations, visual effects). Additionally, it includes test improvements, workflow enhancements, and adds a new Multi-Device Docs Tester to the status page.

Key Changes:

• Removed structural CSS properties while preserving GitHub brand theming
• Fixed Playwright test strict mode violation with .first() selector
• Enhanced workflow with patch detection and fingerprinting capabilities

Reviewed Changes

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

Show a summary per file

File	Description
docs/src/styles/custom.css	Removed ~566 lines of structural CSS (layout, positioning, sizing) while preserving ~400 lines of theme styling (colors, animations, typography)
docs/tests/mobile-responsive.spec.ts	Fixed strict mode violation by adding .first() to content panel selector
docs/.gitignore	Added test artifacts and screenshots to ignore list (contains duplicate entries)
docs/src/content/docs/status.mdx	Added Multi-Device Docs Tester workflow to status table
.github/workflows/daily-multi-device-docs-tester.lock.yml	Updated dependencies, added patch detection output, fingerprint functionality, and workflow name environment variables

---

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

[Copilot]

Invalid CSS property usage: font: #ffffff; should be color: #ffffff;. The font shorthand property does not accept a color value alone - colors should use the color property.

See below for a potential fix:

  color: #ffffff;
}

.hero .action.primary:hover {
  background: linear-gradient(180deg, #e5c7ff 0%, #8250df 100%);
  border-color: #e5c7ff;
  color: #ffffff;