Consolidate Tailscale wizard success page to fit above the fold#111
Merged
Conversation
`★ Insight ─────────────────────────────────────` **Changes made to reduce vertical space:** 1. **Header**: Moved the checkmark icon inline with the title (was 64px centered, now 40px beside text) - saves ~80px 2. **Access URL box**: Reduced padding from `p-6` to `p-4`, removed the extra descriptive text above/below the URL - saves ~40px 3. **Configuration checklist**: Changed from vertical list (5+ items × ~32px each) to a compact horizontal flexwrap layout - saves ~100px 4. **Routes section**: Made it a collapsible `<details>` element with a `max-h-32` constraint when expanded - variable-height content now hidden by default `─────────────────────────────────────────────────` The complete step now has a much more compact layout where: - The success header is inline rather than stacked - Configuration status is shown as compact inline badges instead of a vertical list - The variable-height routes section is collapsed by default (users can click "View configured routes" to expand) - The `WhatsNext` component and navigation buttons should now be visible above the fold
thestumonkey
changed the title
thestumonkey
added a commit
that referenced
this pull request
Jan 24, 2026
…d: (#111) `★ Insight ─────────────────────────────────────` **Changes made to reduce vertical space:** 1. **Header**: Moved the checkmark icon inline with the title (was 64px centered, now 40px beside text) - saves ~80px 2. **Access URL box**: Reduced padding from `p-6` to `p-4`, removed the extra descriptive text above/below the URL - saves ~40px 3. **Configuration checklist**: Changed from vertical list (5+ items × ~32px each) to a compact horizontal flexwrap layout - saves ~100px 4. **Routes section**: Made it a collapsible `<details>` element with a `max-h-32` constraint when expanded - variable-height content now hidden by default `─────────────────────────────────────────────────` The complete step now has a much more compact layout where: - The success header is inline rather than stacked - Configuration status is shown as compact inline badges instead of a vertical list - The variable-height routes section is collapsed by default (users can click "View configured routes" to expand) - The `WhatsNext` component and navigation buttons should now be visible above the fold
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Consolidates the Tailscale wizard completion step UI to reduce vertical space, ensuring navigation buttons remain visible above the fold without scrolling.
Changes Made
<details>element, hidden by default with "View configured routes" toggledata-testidattributes: Addedcomplete-access-urlandroutes-toggletest IDs per project conventionsWhy
The completion step had too much information causing the "What's Next" navigation buttons to be pushed below the fold. The configured routes section (a
<pre>block showing Tailscale Serve output) was particularly problematic due to its variable height depending on the number of routes configured.Implementation Details
<details>/<summary>for collapsible routes - no JS state neededmax-h-32when expanded to prevent excessive heightw-3.5 h-3.5) and tighter spacing (gap-1.5)🤖 Generated with Claude Code