(fix) Title component's properties.

src/App.js

@@ -131,12 +131,12 @@ class App extends Component {
           showMobileMenu={this.state.showMobileMenu}
         />
         {this.hideSearch() ? null : <SearchBar networkBranch={networkBranch} onSearch={this.onSearch} />}
+        <MainTitle text={this.getTitle()} />
         <section
           className={`lo-App_Content lo-App_Content-${networkBranch} ${
             this.state.showMobileMenu ? 'lo-App_Content-mobile-menu-open' : ''
           }`}
         >
-          <MainTitle text={this.getTitle()} />
           <Route exact path={`/`} render={this.onBallotsRender} />
           <Route exact path={`${commonStore.rootPath}/`} render={this.onBallotsRender} />
           <Route exact path={`${commonStore.rootPath}/active`} render={this.onActiveBallotsRender} />

src/assets/stylesheets/components/_App.scss

@@ -9,7 +9,6 @@
 .lo-App_Content {
     flex-grow: 1;
     padding-bottom: 30px;
-    padding-top: 40px;
     position: relative;
     z-index: 1;
 

src/assets/stylesheets/components/_MainTitle.scss

@@ -1,15 +1,18 @@
 .sw-MainTitle {
   display: flex;
   justify-content: center;
-  margin-bottom: 40px;
+  min-height: fit-content;
+  padding: 30px 0;
 }
 
 .sw-MainTitle_Content {
   @include content-layout-width();
+  min-height: fit-content;
 }
 
 .sw-MainTitle_Text {
   color: #333;
   font-size: 24px;
   line-height: 38px;
+  min-height: fit-content;
 }

src/components/MainTitle/index.js

@@ -4,7 +4,7 @@ export const MainTitle = ({ extraClassName = '', text = '' }) => {
   return (
     <div className={`sw-MainTitle ${extraClassName}`}>
       <div className="sw-MainTitle_Content">
-        <span className="sw-MainTitle_Text">{text}</span>
+        <h1 className="sw-MainTitle_Text">{text}</h1>
       </div>
     </div>
   )