Skip to content

Fix product switcher layout: hide spec subtitles and update stale selectors#4695

Merged
devalog merged 9 commits intomainfrom
devin/1775057130-fix-product-switcher-layout
Apr 1, 2026
Merged

Fix product switcher layout: hide spec subtitles and update stale selectors#4695
devalog merged 9 commits intomainfrom
devin/1775057130-fix-product-switcher-layout

Conversation

@Ryan-Amirthan
Copy link
Copy Markdown
Contributor

@Ryan-Amirthan Ryan-Amirthan commented Apr 1, 2026

Summary

The product switcher dropdown layout broke after subtitles were added to the API spec items in #4652. The new subtitle text caused text wrapping and uneven spacing in the right-column spec items (OpenAPI, AsyncAPI, etc.).

Rather than adjusting widths and offsets to accommodate the subtitles, we hide them in the product switcher since they were added primarily for llms.txt rather than the visual dropdown UI. Subtitles on the main product items (Home, SDKs, Docs, Dashboard, CLI Reference) are left visible.

This PR makes three changes:

  1. Hide spec subtitles: Added display: none on .fern-selection-item-subtitle scoped to the 5 spec items (OpenAPI, AsyncAPI, OpenRPC, gRPC, Fern Definition), restoring the original compact layout for the right column.
  2. Stale grid selector: Updated a[href*="ask-fern"]a[href*="dashboard"] so Dashboard is correctly placed at column 2, row 2.
  3. Stale dark-mode rule: Removed the orphaned dark-mode image rule for ask-fern (Dashboard already has its own rule).

Review & Testing Checklist for Human

  • Verify subtitles are hidden only for spec items — the display: none rule targets items matching openapi, asyncapi, openrpc, grpc, and ferndef by href. Confirm that main product items (Home, SDKs, Docs, Dashboard, CLI Reference) still show their subtitles.
  • Check spec item spacing — the original translateY offsets (-32px, -64px, -96px, -96px) were designed for items without subtitles. With subtitles hidden, spacing should look correct again, but verify visually that the 5 spec items have consistent vertical gaps.
  • Verify Dashboard positioning — confirm Dashboard appears in column 2, row 2 (next to Docs) and not auto-placed elsewhere.
  • Check dark mode — confirm the dropdown looks correct in dark mode after the stale ask-fern image rule removal.

Recommended test: open the product switcher on desktop in both light and dark mode. Confirm spec items show no subtitles while main products do, all items are correctly positioned, and clicking each item navigates correctly.

Notes

  • Changes are scoped to @media (min-width: 1024px) so mobile layout is unaffected.
  • The subtitles added in Add descriptions for API Definitions product and all specs #4652 are still present in the docs.yml config and will continue to appear in llms.txt and any other context that reads them — they are only hidden visually in the product switcher dropdown.
  • The subtitle hiding uses a[href*="..."] selectors, so if spec product URLs change, the rules will need updating.

Link to Devin session: https://app.devin.ai/sessions/326d9358f7e541a79356825a0b2c9e41
Requested by: @Ryan-Amirthan

…btitled spec items

Co-Authored-By: ryanstep <ryanstep@umich.edu>
@devin-ai-integration
Copy link
Copy Markdown
Contributor

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 1, 2026

Co-Authored-By: ryanstep <ryanstep@umich.edu>
@devin-ai-integration devin-ai-integration bot changed the title Fix product switcher layout: update grid positions and spacing for subtitled spec items Fix product switcher layout: widen dropdown and update stale selectors Apr 1, 2026
@devin-ai-integration devin-ai-integration bot changed the title Fix product switcher layout: widen dropdown and update stale selectors Fix product switcher layout: widen grid items and update stale selectors Apr 1, 2026
devin-ai-integration bot and others added 2 commits April 1, 2026 15:41
Co-Authored-By: ryanstep <ryanstep@umich.edu>
…em spacing

Co-Authored-By: ryanstep <ryanstep@umich.edu>
@devin-ai-integration devin-ai-integration bot changed the title Fix product switcher layout: widen grid items and update stale selectors Fix product switcher layout: widen grid items and fix spec spacing Apr 1, 2026
…x) for ferndef

Co-Authored-By: ryanstep <ryanstep@umich.edu>
@devin-ai-integration devin-ai-integration bot changed the title Fix product switcher layout: widen grid items and fix spec spacing Fix product switcher layout: widen grid items and update stale selectors Apr 1, 2026
devin-ai-integration bot and others added 2 commits April 1, 2026 16:11
Co-Authored-By: ryanstep <ryanstep@umich.edu>
…o original values

Co-Authored-By: ryanstep <ryanstep@umich.edu>
@devin-ai-integration devin-ai-integration bot changed the title Fix product switcher layout: widen grid items and update stale selectors Fix product switcher layout: hide subtitles and update stale selectors Apr 1, 2026
Co-Authored-By: ryanstep <ryanstep@umich.edu>
@devin-ai-integration devin-ai-integration bot changed the title Fix product switcher layout: hide subtitles and update stale selectors Fix product switcher layout: hide spec subtitles and update stale selectors Apr 1, 2026
@devalog devalog merged commit e76147a into main Apr 1, 2026
1 check passed
@devalog devalog deleted the devin/1775057130-fix-product-switcher-layout branch April 1, 2026 16:39
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.

2 participants