fix(next): restore modular dashboard widget layout#16685
Open
GermanJablo wants to merge 3 commits into
Open
Conversation
…onent colors Added padding to the widget and adjusted alignment for card content in the ModularDashboard. Updated background and text colors in the Private component to align with the new design specifications.
Contributor
📦 esbuild Bundle Analysis for payloadThis analysis was generated by esbuild-bundle-analyzer. 🤖 |
Move the align-items override from the dashboard scope to the global .card element. The Card React component is only used internally by CollectionCards, which is the only widget that renders into the modular dashboard, so scoping the fix to .modular-dashboard was functionally equivalent today but would silently regress for any third-party consumer of the exported <Card> component, which is part of the public API.
GermanJablo
requested review from
PatrikKozak
and removed request for
AlessioGr and
jacobsfletch
Contributor
|
Lets fix this misalignment. 
|
Contributor
Author
|
Fixed! 
|
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
3 participants
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.
Fixes a UI regression in the modular dashboard that was introduced by #16619 and #16627.
Payload v3
Original modular dashboard layout before the regression.
After #16619 / #16627
Widgets lost their spacing, and the revenue/private widgets no longer stretched correctly.
After This PR
Modular dashboard widget spacing and widget card layout are restored.
Why fix
align-itemson the global.cardand not on.modular-dashboard .widget-content > .cardI initially scoped the override to
.modular-dashboardto minimize blast radius. After reviewing howCardis actually used I switched to fixing it at the source. The trade-off:CardReact component is imported in exactly one place (packages/ui/src/widgets/CollectionCards/index.tsx), andCollectionCardsis only registered as the defaultcollectionswidget of the modular dashboard. So today every.cardin the rendered DOM lives inside.modular-dashboard, and the scoped selector was functionally equivalent to a global fix.Cardis a public export inpackages/ui/src/exports/client/index.ts, so third parties can use it in custom admin components or custom widgets. A scoped override would silently leave them on the newflex-startbehavior, which differs from v3 and is not what the title/actions layout was designed for (the title lost itswidth: 100%and.card__actionsis nowposition: absolute, so neither of them benefit fromflex-startoverstretch)..collections .card) was also considered but rejected: the behavior we want belongs to theCardcontract itself, not toCollectionCards.The
.widgetpadding stays scoped to.modular-dashboardbecause that is genuinely a dashboard-layout concern, not a Card concern.