Title and subtitle bottom aligned in Shellbar

[bsrdjan]

Using the shall layout and shellbar examples from the current master, I am getting the product title and subtitle apparently bottom aligned. It deviates from the vertically centered alignment of all other shellbar elements and does not look nice:

Could it be the issue with my markup or the styling bug?

  <!-- http://localhost:4001/layouts/shell-layout.html -->
  <div class="fd-shell fd-shell--fundamentals">

    <div class="fd-shell__header">

      <!-- http://localhost:4001/components/shellbar.html -->
      <div class="fd-shellbar">

        <div class="fd-shellbar__group fd-shellbar__group--start">
          <a href="#" class="fd-shellbar__logo"><img src="//unpkg.com/fiori-fundamentals/dist/images/sap-logo.png"
              srcset="//unpkg.com/fiori-fundamentals/dist/images/[email protected] 1x, //unpkg.com/fiori-fundamentals/dist/images/[email protected] 2x, //unpkg.com/fiori-fundamentals/dist/images/[email protected] 3x"
              width="48" height="24" alt="SAP"></a>
          <div class="fd-shellbar__product">
            <span class="fd-shellbar__title">SAP Fundamentals</span>
          </div>
          <div class="fd-shellbar__subtitle">
            aurelia
          </div>
        </div> <!-- fd-shellbar__group -->

        <div class="fd-shellbar__group fd-shellbar__group--end">
          <div class="fd-shellbar__actions">
            <div class="fd-shellbar__action fd-shellbar__action--show-always">
              <div class="fd-user-menu">
                <div class="fd-popover fd-popover--right">
                  <div class="fd-popover__control">
                    <div class="fd-user-menu__control" aria-controls="WV3AY276" aria-expanded="false" aria-haspopup="true"
                      role="button">
                      <span class="fd-identifier fd-identifier--xs fd-identifier--circle fd-has-background-color-accent-11">WW</span>
                    </div>
                  </div>
                  <div class="fd-popover__body fd-popover__body--right" aria-hidden="true" id="WV3AY276">
                    <nav class="fd-menu">
                      <ul class="fd-menu__list">
                        <li><a role="button" class="fd-menu__item">Settings</a></li>
                        <li><a role="button" class="fd-menu__item">Sign Out</a></li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div> <!-- fd-shellbar__group -->

      </div> <!-- fd-shellbar -->

    </div> <!-- fd-shell__header -->




    <div class="fd-shell__app">

      <div class="fd-app">

        <div class="fd-app__navigation fd-app__navigation--vertical">
          fd-app__navigation--vertical
        </div>



        <main class="fd-app__main">
          fd-app__main
        </main>
      </div>

    </div>






    <div class="fd-shell__footer">
      fd-shell__footer
    </div>
  </div>

[droshev]

@LeoT7508 I think the point is valid. In all non-fundamental shell specs the both texts are vertically centered aligned. What do you think?

[LeoT7508]

It looks like your alignments are a little off here. Its just a screenshot but just to review, the title SAP Fundamentals should be 72 16pt Bold with a line height of 20. The Second title should be 72 12pt regular with a line height of 16. Each should be vertically centered in the Shell bar. Double check that and see if there's any discrepancies. If you want more visual guidance check the design sheet here: https://zpl.io/VqlZOg4