Skip to content

[DashboardLayout] Fix app bar items alignment#4437

Merged
bharatkashyap merged 7 commits intomui:masterfrom
bharatkashyap:fix/layout-margins
Nov 19, 2024
Merged

[DashboardLayout] Fix app bar items alignment#4437
bharatkashyap merged 7 commits intomui:masterfrom
bharatkashyap:fix/layout-margins

Conversation

@bharatkashyap
Copy link
Collaborator

Before After
Screenshot 2024-11-18 at 6 53 12 PM Screenshot 2024-11-18 at 6 43 41 PM

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 18, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Nov 18, 2024
Copy link
Collaborator

@apedroferreira apedroferreira left a comment

Choose a reason for hiding this comment

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

Requesting changes just for adding alignItems to the stack that wraps the toolbar slots too.
Thanks for looking into this! I had missed it as I hasn't tested it with the account button in the top bar.

flexWrap: 'wrap',
justifyContent: 'space-between',
width: '100%',
alignItems: 'center',
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't remember exactly why I had added the padding but just retested and it should be fine to remove...

Copy link
Collaborator

Choose a reason for hiding this comment

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

Also for justifyContent and alignItems I guess we could just use the props of Stack directly, but it shouldn't be a big difference.

function ToolbarActions() {
return (
<Stack direction="row">
<Stack direction="row" alignItems="center">
Copy link
Collaborator

@apedroferreira apedroferreira Nov 18, 2024

Choose a reason for hiding this comment

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

Besides this, can we also add this prop in the DashboardLayout line 377, in the Stack that wraps the actions and account slots?
(we actually have to so that they're aligned too)

pnpm-lock.yaml Outdated
peerDependencies:
'@testing-library/dom': ^10.0.0
'@types/react': ^18.3.11
'@types/react': ^18.3.12
Copy link
Collaborator

Choose a reason for hiding this comment

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

There should be no changes here, right?

@bharatkashyap bharatkashyap merged commit 94f9652 into mui:master Nov 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

design: ui Visual design.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants