Skip to content

[DashboardLayout] Fix app bar items alignment - #4437

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

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

Conversation

@bharatkashyap

Copy link
Copy Markdown
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

@apedroferreira apedroferreira left a comment

Copy link
Copy Markdown
Collaborator

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
Copy Markdown
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
Copy Markdown
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">

@apedroferreira apedroferreira Nov 18, 2024

Copy link
Copy Markdown
Collaborator

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)

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

Copy link
Copy Markdown
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