Skip to content

fix: sidebar index pages, phone-width previews and tables - #32

Merged
Shewart merged 6 commits into
mainfrom
fix/sidebar-index-pages
Oct 3, 2026
Merged

Shewart merged 6 commits into
mainfrom
fix/sidebar-index-pages

Conversation

@Shewart

@Shewart Shewart commented Oct 3, 2026

Copy link
Copy Markdown
Contributor

Summary

Fixes found while moving the ShellUI docs to ShellDocs 0.1.10 and ShellUI 0.3.2.

Fixed

  • Sidebar listed a folder's index.md twice: as the section label and again as a page with the same title ("Components" / "Components", "Form" / "Form Components"). The label now links to the index page and is highlighted when you're on it, and the page isn't repeated. Collapsible sections keep a separate chevron toggle.
  • Collapsed sidebar sections had no aria-expanded. Blazor drops a false boolean attribute, so the toggle now writes "true" / "false".
  • Wide markdown tables widened the page on phones. Rendered tables sit in a .shelldocs-table box that scrolls horizontally.

Added

  • scroll preview layout. razor:preview scroll, or Layout="scroll" on <DemoPreview> / <ComponentPreview>, lets an example wider than the frame (pagination, toolbars, OTP inputs) scroll inside it instead of spilling past it. It's opt-in, because a scroll box clips popovers.

Changed

  • On phones (≤480px) the preview frame's side padding drops from 1.5rem to 0.75rem.
  • Centring uses safe center, so an example that's still too wide starts at the left edge instead of losing both sides.

Testing

  • dotnet build: 0 warnings. dotnet test: 306 passing, including the new SidebarIndexPageTests, a table-wrapping test and scroll-layout cases.
  • Checked against the ShellUI docs site at 358px:
    • all 70 component pages, with no demo spilling past its frame and no page scrolling sideways;
    • the sidebar shows each index page once;
    • the card footer demo fits.

…sting it twice

A folder with an index.md showed its title twice: as the section label and as a page right under it. The label now links to the index page (highlighted when current) and the page isn't repeated; collapsible sections keep a separate chevron toggle. aria-expanded is written as "true"/"false", since Blazor dropped the attribute when false.
A markdown table wider than the viewport widened the whole page on phones. Rendered tables are wrapped in .shelldocs-table, which scrolls horizontally.
Pagination, toolbars and OTP rows are wider than a phone and spilled past the preview frame. razor:preview scroll / Layout="scroll" lets such an example scroll inside the frame (opt-in, since a scroll box clips popovers). On phones the frame's side padding drops to 0.75rem, and centring uses safe center so a too-wide example starts at the left edge instead of losing both sides.
Cuts the Unreleased section as 0.1.11-alpha and records the release in the ROADMAP's hardening list.
@Shewart
Shewart merged commit edbbea8 into main Oct 3, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant