Skip to content

fix(ui): stop marketplace sidebar padding shift at 1023px#27119

Merged
siddhant1 merged 2 commits intomainfrom
fix/marketplace-sidebar-padding-shift
Apr 7, 2026
Merged

fix(ui): stop marketplace sidebar padding shift at 1023px#27119
siddhant1 merged 2 commits intomainfrom
fix/marketplace-sidebar-padding-shift

Conversation

@siddhant1
Copy link
Copy Markdown
Member

Summary

  • Marketplace sidebar nav items shifted 8px horizontally when the viewport crossed 1023↔1024px.
  • Root cause: core NavList uses tw:px-2 tw:lg:px-4; Tailwind's lg: breakpoint is 1024px.
  • Per the no-core-component-changes rule, override from the consumer by passing tw:px-4 to both NavList instances in Sidebar.component.tsx. tailwind-merge drops the responsive variant, so padding stays constant.

Test plan

  • yarn start and open a marketplace page
  • Resize across 1023↔1024px and confirm no horizontal jump
  • Spot-check at 800px, 1023px, 1024px, 1440px

🤖 Generated with Claude Code

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>
Copilot AI review requested due to automatic review settings April 7, 2026 08:36
@siddhant1 siddhant1 requested a review from a team as a code owner April 7, 2026 08:36
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

Hi there 👋 Thanks for your contribution!

The OpenMetadata team will review the PR shortly! Once it has been labeled as safe to test, the CI workflows
will start executing and we'll be able to make sure everything is working as expected.

Let us know if you need any help!

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 NavList horizontal padding by passing className="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).

@siddhant1 siddhant1 added UI UI specific issues safe to test Add this label to run secure Github workflows on PRs labels Apr 7, 2026
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@gitar-bot
Copy link
Copy Markdown

gitar-bot bot commented Apr 7, 2026

Code Review ✅ Approved

Fixes marketplace sidebar padding shift at 1023px breakpoint by capping expanded sidebar brand logo at 150px. No issues found.

Options

Display: compact → Showing less information.

Comment with these commands to change:

Compact
gitar display:verbose         

Was this helpful? React with 👍 / 👎 | Gitar

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

Jest test Coverage

UI tests summary

Lines Statements Branches Functions
Coverage: 64%
64.28% (59497/92559) 43.77% (31014/70847) 46.94% (9355/19928)

@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud bot commented Apr 7, 2026

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 7, 2026

🟡 Playwright Results — all passed (15 flaky)

✅ 3603 passed · ❌ 0 failed · 🟡 15 flaky · ⏭️ 207 skipped

Shard Passed Failed Flaky Skipped
🟡 Shard 1 456 0 1 2
🟡 Shard 2 640 0 2 32
🟡 Shard 3 649 0 2 26
🟡 Shard 4 618 0 4 47
🟡 Shard 5 606 0 1 67
🟡 Shard 6 634 0 5 33
🟡 15 flaky test(s) (passed on retry)
  • Pages/UserCreationWithPersona.spec.ts › Create user with persona and verify on profile (shard 1, 1 retry)
  • Features/BulkEditEntity.spec.ts › Glossary (shard 2, 1 retry)
  • Features/BulkImport.spec.ts › Keyboard Delete selection (shard 2, 1 retry)
  • Features/Permissions/GlossaryPermissions.spec.ts › Team-based permissions work correctly (shard 3, 1 retry)
  • Flow/ExploreDiscovery.spec.ts › Should display deleted assets when showDeleted is checked and deleted is not present in queryFilter (shard 3, 1 retry)
  • Pages/Customproperties-part2.spec.ts › entityReferenceList shows item count, scrollable list, no expand toggle (shard 4, 1 retry)
  • Pages/Domains.spec.ts › Multiple consecutive domain renames preserve all associations (shard 4, 1 retry)
  • Pages/Entity.spec.ts › Tag Add, Update and Remove for child entities (shard 4, 1 retry)
  • Pages/Entity.spec.ts › Set & Update table-cp, hyperlink-cp, string, integer, markdown, number, duration, email, enum, sqlQuery, timestamp, entityReference, entityReferenceList, timeInterval, time-cp, date-cp, dateTime-cp Custom Property (shard 4, 1 retry)
  • Pages/ExploreTree.spec.ts › Verify Database and Database Schema available in explore tree (shard 5, 1 retry)
  • Pages/HyperlinkCustomProperty.spec.ts › should show No Data placeholder when hyperlink has no value (shard 6, 1 retry)
  • Pages/Lineage/LineageFilters.spec.ts › Verify lineage schema filter selection (shard 6, 1 retry)
  • Pages/ProfilerConfigurationPage.spec.ts › Non admin user (shard 6, 1 retry)
  • Pages/UserDetails.spec.ts › Admin user can get all the roles hierarchy and edit roles (shard 6, 1 retry)
  • Pages/Users.spec.ts › Permissions for table details page for Data Consumer (shard 6, 1 retry)

📦 Download artifacts

How to debug locally
# Download playwright-test-results-<shard> artifact and unzip
npx playwright show-trace path/to/trace.zip    # view trace

@siddhant1 siddhant1 merged commit c422a30 into main Apr 7, 2026
45 checks passed
@siddhant1 siddhant1 deleted the fix/marketplace-sidebar-padding-shift branch April 7, 2026 11:12
SaaiAravindhRaja pushed a commit to SaaiAravindhRaja/OpenMetadata that referenced this pull request Apr 12, 2026
…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>
SaaiAravindhRaja pushed a commit to SaaiAravindhRaja/OpenMetadata that referenced this pull request Apr 12, 2026
…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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

safe to test Add this label to run secure Github workflows on PRs UI UI specific issues

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants