fix(ui): stop marketplace sidebar padding shift at 1023px#27119
fix(ui): stop marketplace sidebar padding shift at 1023px#27119
Conversation
The core NavList uses `tw:px-2 tw:lg:px-4`, causing an 8px horizontal jump as the viewport crosses Tailwind's lg (1024px) breakpoint. Override the padding from the marketplace Sidebar consumer with a constant `tw:px-4` so nav items stay put on resize. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
Hi there 👋 Thanks for your contribution! The OpenMetadata team will review the PR shortly! Once it has been labeled as Let us know if you need any help! |
There was a problem hiding this comment.
Pull request overview
Fixes a horizontal “jump” in the Marketplace sidebar navigation when resizing the viewport across the Tailwind lg breakpoint (1023↔1024px) by forcing consistent horizontal padding on the NavList containers from the consuming Sidebar component.
Changes:
- Override
NavListhorizontal padding by passingclassName="tw:px-4"to the main nav list. - Apply the same padding override to the bottom nav list while preserving its existing bottom padding (
tw:pb-4).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Code Review ✅ ApprovedFixes marketplace sidebar padding shift at 1023px breakpoint by capping expanded sidebar brand logo at 150px. No issues found. OptionsDisplay: compact → Showing less information. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | Gitar |
|
🟡 Playwright Results — all passed (15 flaky)✅ 3603 passed · ❌ 0 failed · 🟡 15 flaky · ⏭️ 207 skipped
🟡 15 flaky test(s) (passed on retry)
How to debug locally# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip # view trace |
…ata#27119) * fix(ui): stop marketplace sidebar padding shift at 1023px The core NavList uses `tw:px-2 tw:lg:px-4`, causing an 8px horizontal jump as the viewport crosses Tailwind's lg (1024px) breakpoint. Override the padding from the marketplace Sidebar consumer with a constant `tw:px-4` so nav items stay put on resize. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(ui): cap expanded sidebar brand logo at 150px Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Siddhant <siddhant@MacBook-Pro-457.local> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ata#27119) * fix(ui): stop marketplace sidebar padding shift at 1023px The core NavList uses `tw:px-2 tw:lg:px-4`, causing an 8px horizontal jump as the viewport crosses Tailwind's lg (1024px) breakpoint. Override the padding from the marketplace Sidebar consumer with a constant `tw:px-4` so nav items stay put on resize. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(ui): cap expanded sidebar brand logo at 150px Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Siddhant <siddhant@MacBook-Pro-457.local> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>



Summary
NavListusestw:px-2 tw:lg:px-4; Tailwind'slg:breakpoint is 1024px.tw:px-4to bothNavListinstances inSidebar.component.tsx. tailwind-merge drops the responsive variant, so padding stays constant.Test plan
yarn startand open a marketplace page🤖 Generated with Claude Code