From 4ac76573fe88a1794427c4f575a1102f7cf832a1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 21 Sep 2021 13:42:25 -0500
Subject: [PATCH] SubNavigation: constrain width on desktop

---
 app/soapbox/components/sub_navigation.js | 22 ++++++++++++----------
 app/styles/navigation.scss               | 18 +++++++++++++++---
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/components/sub_navigation.js b/app/soapbox/components/sub_navigation.js
index 974727478..cff855b5e 100644
--- a/app/soapbox/components/sub_navigation.js
+++ b/app/soapbox/components/sub_navigation.js
@@ -61,16 +61,18 @@ class SubNavigation extends React.PureComponent {
 
     return (
       <div className='sub-navigation'>
-        <button
-          className='sub-navigation__back'
-          onClick={this.handleBackClick}
-          onKeyUp={this.handleBackKeyUp}
-        >
-          <Icon src={require('@tabler/icons/icons/arrow-back.svg')} />
-          <FormattedMessage id='sub_navigation.back' defaultMessage='Back' />
-        </button>
-        <div className='sub-navigation__message'>
-          {intl.formatMessage(message)}
+        <div className='sub-navigation__content'>
+          <button
+            className='sub-navigation__back'
+            onClick={this.handleBackClick}
+            onKeyUp={this.handleBackKeyUp}
+          >
+            <Icon src={require('@tabler/icons/icons/arrow-back.svg')} />
+            <FormattedMessage id='sub_navigation.back' defaultMessage='Back' />
+          </button>
+          <div className='sub-navigation__message'>
+            {intl.formatMessage(message)}
+          </div>
         </div>
       </div>
     );
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index 2d6921ff4..4336aabab 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -96,18 +96,30 @@
   left: 0;
   right: 0;
   width: 100%;
-  height: 30px;
-  padding: 5px;
+  height: 40px;
   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;