SubNavigation: constrain width on desktop

app/soapbox/components/sub_navigation.js

@@ -61,16 +61,18 @@ class SubNavigation extends React.PureComponent {
 
     return (
       <div className='sub-navigation'>
-        <button
+        <div className='sub-navigation__content'>
-          className='sub-navigation__back'
+          <button
-          onClick={this.handleBackClick}
+            className='sub-navigation__back'
-          onKeyUp={this.handleBackKeyUp}
+            onClick={this.handleBackClick}
-        >
+            onKeyUp={this.handleBackKeyUp}
-          <Icon src={require('@tabler/icons/icons/arrow-back.svg')} />
+          >
-          <FormattedMessage id='sub_navigation.back' defaultMessage='Back' />
+            <Icon src={require('@tabler/icons/icons/arrow-back.svg')} />
-        </button>
+            <FormattedMessage id='sub_navigation.back' defaultMessage='Back' />
-        <div className='sub-navigation__message'>
+          </button>
-          {intl.formatMessage(message)}
+          <div className='sub-navigation__message'>
+            {intl.formatMessage(message)}
+          </div>
         </div>
       </div>
     );

app/styles/navigation.scss

@@ -96,18 +96,30 @@
   left: 0;
   right: 0;
   width: 100%;
-  height: 30px;
+  height: 40px;
-  padding: 5px;
   display: flex;
   color: var(--primary-text-color--faint);
   background: var(--foreground-color);
-  justify-content: space-around;
   border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
   border-radius: 0;
+  align-items: center;
+  justify-content: center;
   z-index: 999;
 
+  &__content {
+    width: 100%;
+    height: 100%;
+    max-width: 1200px;
+    padding: 5px 15px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-around;
+    box-sizing: border-box;
+  }
+
   &__back {
     margin-right: auto;
+    padding: 0;
     background: transparent;
     border: 0;
     display: flex;