[DashboardLayout] Branding is not vertically centered

[xggz]

Steps to reproduce

No response

Current behavior

当disableCollapsibleSidebar=false时，右侧的Branding内容相对Header没有垂直居中。

When disableCollapsibleSidebar=false, the Branding content on the right is not vertically centered relative to the Header.

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Branding DashboardLayout

[bharatkashyap]

This specific issue is with the svg we're using for the Toolpad logo being a little off-centre; the alignment is normal in the markup:

However, we could use this opportunity to correct the line-height on the branding Typography element which I believe should match the font-size. Do you want to make that contribution?

[sanwalsulehri]

hi i can do this

[sanwalsulehri]

can you assign this to me @xggz

[xggz]

can you assign this to me @xggz

Sure! I'm more than happy to assign this bug to you. Your enthusiasm and willingness to take this on are truly appreciated. 👍

[sanwalsulehri]

thnaks so plz assign to me this so i will start working on it @xggz

[xggz]

thnaks so plz assign to me this so i will start working on it @xggz

I am unable to assign tasks.

[sanwalsulehri]

who is able to assign plz assign this

[Janpot]

👍 Thank you @sanwalsulehri ! feel free to work on this.

[sanwalsulehri]

ok now i am start working on it

[sanwalsulehri]

now when i run your project i get a lot of errors that block the enviroment
de:13736) [DEP0060] DeprecationWarning: The util._extend API is deprecated. Please use Object.assign() instead.
@toolpad/core: > @toolpad/[email protected] predev C:\Users\SANWAL\Pictures\toolpad\packages\toolpad-core
@toolpad/core: > pnpm clean
@toolpad/studio-components: > @toolpad/[email protected] dev C:\Users\SANWAL\Pictures\toolpad\packages\toolpad-studio-components
@toolpad/studio-components: > tsup --watch
@toolpad/studio-runtime: > @toolpad/[email protected] dev C:\Users\SANWAL\Pictures\toolpad\packages\toolpad-studio-runtime
@toolpad/studio-runtime: > tsup --watch
@toolpad/utils: > @toolpad/[email protected] dev C:\Users\SANWAL\Pictures\toolpad\packages\toolpad-utils
@toolpad/utils: > tsup --watch
create-toolpad-app: > [email protected] dev C:\Users\SANWAL\Pictures\toolpad\packages\create-toolpad-app
create-toolpad-app: > tsup --watch
@toolpad/studio: > @toolpad/[email protected] dev C:\Users\SANWAL\Pictures\toolpad\packages\toolpad-studio
@toolpad/studio: > concurrently "pnpm:dev:*"
@toolpad/core: > @toolpad/[email protected] clean C:\Users\SANWAL\Pictures\toolpad\packages\toolpad-core
@toolpad/core: > rimraf build
@toolpad/core: > @toolpad/[email protected] dev C:\Users\SANWAL\Pictures\toolpad\packages\toolpad-core
@toolpad/core: > mkdir -p build && concurrently "pnpm build:stable --watch" "pnpm build:types --watch --preserveWatchOutput" "pnpm build:copy-files"
@toolpad/core: A subdirectory or file -p already exists.
@toolpad/core: Error occurred while processing: -p.
@toolpad/core:  ELIFECYCLE  Command failed with exit code 1.
@toolpad/studio-components: build successful, generate typings...
@toolpad/utils: build successful, generate typings...
@toolpad/studio: [cli]
@toolpad/studio: [cli] > @toolpad/[email protected] dev:cli C:\Users\SANWAL\Pictures\toolpad\packages\toolpad-studio
@toolpad/studio: [cli] > tsup --watch
@toolpad/studio: [cli]
create-toolpad-app: cli: build successful
@toolpad/utils: typings generated
@toolpad/studio-runtime: build successful
@toolpad/studio: [cli] cli: build successful
@toolpad/studio-components: typings generated

[gil-obradors]

@sanwalsulehri have you followed the instructions ?
os, node and pnpm version ... ?
command executed?

[gil-obradors]

@bharatkashyap I think just adding line-height: 1 to this component here is enough, is it?

toolpad/packages/toolpad-core/src/DashboardLayout/AppTitle.tsx

Line 33 in f20fd55

<Typography

--- How to @sanwalsulehri ---
I'm going to try to push forward this good first issue, I'm a learner like you, and I'll share how I did it, hoping this is the right way, and help you bro

• clone repo git clone https://github.com/mui/toolpad.git
• inside playground dir, start new app without authentication and vite for making the process easer: pnpm create toolpad-app
• modify package.json from that new app in playground : "@toolpad/core": "workspace:*", because we want to use our local build of the package.
• open new shell at package-root dir, pnpm dev. This will build all packages and put a watcher into all to update on the fly
• jump to previous shell playground/testing-vite (in my case). and run pnpm run dev

Now you have a full deployment environment in both spaces: package and app, and on the fly update into both.

Before:

After: