Navbar Title text clipping

Questions
1

I’ve created a very simple project based on the React “App Layout” tutorial. However, the Title text of the Navbar seems to always be clipped at the bottom. You can see in the below image that the bottom of the ‘g’ and ‘p’ are clipped. This occurs whatever theme I use and seems to be related to the line-height: var(--f7-navbar-title-line-height); that gets applies via the .navbar .title classes.

NavbarClipping
NavbarClipping.PNG1018×218 11.1 KB

Any ideas how to fix this? The code is below.

Thanks.
Mark

// App.jsx
import { App, Statusbar, View, Page, Navbar, Toolbar, Link } from 'framework7-react';

export default () => (
  // Main Framework7 App component where we pass Framework7 params
  <App params={{ theme: 'auto', name: 'My App', id: 'com.demoapp.test' }}>

    {/* Status bar overlay for full screen mode (Cordova or PhoneGap) */}
    <Statusbar></Statusbar>

    {/* Your main view, should have "main" prop */}
    <View main>
      {/*  Initial Page */}
      <Page>
        {/* Top Navbar */}
        <Navbar title="Autograph"></Navbar>
        {/* Toolbar */}
        <Toolbar bottom>
          <Link>Link 1</Link>
          <Link>Link 2</Link>
        </Toolbar>
        {/* Page Content */}
        <p>Page content goes here</p>
        <Link href="/about/">About App</Link>
      </Page>
    </View>
  </App>
)
2

Just increase --f7-navbar-title-line-height property in CSS:

:root {
  --f7-navbar-title-line-height: 1.3;
}
3

Thanks - that worked!

Should this not be the default?

4

No, because on iOS (where it is suppose to work) all works and looks correctly