TitleBar.Title component does not automatically center

[MaximilianoML]

Hello, Dev Friends!

Today I was changing some titles in my Custom App and then I realized that my TitleBar.Title component was no rendering with the right style, I'll attach 3 images to explain my point.

My component rendered:

My code snippet:

A Dynatrace example of how I want to look like:

Thank you for your attention 🙂

[educampver · Accepted solution]

Hi @MaximilianoML, the issue is that the icon is taller than the level 3 heading. As I see it you have two options:

1. Remove the heading component and leave the content inside the <TitleBar.Title> component. With this option the font size will be larger and cover the whole height of the title bar.
2. If you must keep the smaller font size, you can add custom styles to the <TitleBar.Title> component. Something like this should work:

// App.css
.app-title {
    display: flex;
    align-items: center;
    height: 100%;
}

// App.tsx
import './App.css

<TitleBar.Title className="app-title">
    <Heading level={5}>Cost and Trafic Control</Heading>
</TitleBar.Title>

[MaximilianoML]

Hi @educampver !

Great! I can't believe I was styling the wrong component hahahaha 

Thank you for your help, my friend!

Have a great day 🙂

Maximiliano Lopes