🎨 Improved tier select sizing in the post preview header - #29727
Conversation
no ref The tier select was pinned to a fixed 180px, so a short name like "Bronze" left a wide gap between the label and its chevron, while the segment select next to it sized to its content. The dropdown had no width ceiling at all, so a long tier name stretched it across the viewport and the ellipsis rule on the options never had a width to apply against. The trigger now sizes to the tier name up to 180px, and the dropdown is capped at 280px so longer names truncate.
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx run @tryghost/admin:test:acceptance |
✅ Succeeded | 7m 57s | View ↗ |
nx run-many -t test:unit -p @tryghost/admin |
✅ Succeeded | 3m 42s | View ↗ |
nx run ghost-admin:test |
✅ Succeeded | 3m 15s | View ↗ |
nx run @tryghost/admin:build |
✅ Succeeded | 1m 40s | View ↗ |
nx run ghost-monorepo:lint:boundaries |
✅ Succeeded | 23s | View ↗ |
nx run-many -t lint -p ghost-admin,@tryghost/ad... |
✅ Succeeded | 1m 5s | View ↗ |
nx run-many --target=build --projects=tag:publi... |
✅ Succeeded | 1s | View ↗ |
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗
☁️ Nx Cloud last updated this comment at 2026-08-03 20:49:17 UTC
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
WalkthroughThe post preview tier selector changed from fixed 180px sizing to flexible auto-width sizing. Its maximum width remains 180px. The tier dropdown now has a 280px maximum width. Suggested reviewers: 🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #29727 +/- ##
=======================================
Coverage 75.46% 75.46%
=======================================
Files 1612 1612
Lines 141929 141929
Branches 17565 17565
=======================================
Hits 107106 107106
Misses 33751 33751
Partials 1072 1072
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
1 participant
The tier select in the post preview header (Preview → "Specific tier") was pinned to a fixed 180px. A short tier name like "Bronze" left a wide gap between the label and its chevron, which read as odd next to the segment select beside it, since that one sizes to its content.
The dropdown had no width ceiling at all. Tier names are user-defined, so a long one stretched the dropdown across the viewport — the
text-overflow: ellipsisalready on the options never fired, because nothing gave it a width to apply against.The trigger now sizes to the tier name up to a 180px cap, and the dropdown is capped at 280px so longer names truncate.