diff --git a/src/App.scss b/src/App.scss
index 048d91891..678c44104 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -154,8 +154,8 @@ nav {
   grid-column-end: span 3;
   grid-row-start: 1;
   grid-row-end: 1;
-  margin: 0 -0.5em;
-  padding: 0 0.5em;
+  margin: 0 calc(var(--columnGap) * -2);
+  padding: 0 calc(var(--columnGap) * 2);
   pointer-events: none;
   background-color: rgba(0, 0, 0, 0.15);
   background-color: var(--underlay, rgba(0, 0, 0, 0.15));
@@ -163,6 +163,11 @@ nav {
 }
 
 .app-layout {
+  --miniColumn: 25em;
+  --maxiColumn: minmax(var(--miniColumn), 45em);
+  --columnGap: 1em;
+  --status-margin: 0.75em;
+
   position: relative;
   display: grid;
   grid-template-columns: var(--miniColumn) var(--maxiColumn);
@@ -173,39 +178,40 @@ nav {
   height: calc(100vh - var(--navbar-height));
   align-content: flex-start;
   flex-wrap: wrap;
-  padding: 0 10px 0 10px;
+  padding: 0 10px;
   justify-content: center;
 
-  --miniColumn: 345px;
-  --maxiColumn: minmax(345px, 615px);
-
   .column {
+    --___columnMargin: var(--columnGap);
+
     display: grid;
     grid-template-columns: 100%;
     box-sizing: border-box;
     padding-top: 10px;
     grid-row-start: 1;
     grid-row-end: 1;
-    margin: 0 0.5em;
-    row-gap: 1em;
+    margin: 0 calc(var(--___columnMargin) / 2);
+    row-gap: var(--___columnMargin);
     align-content: start;
 
     &.-scrollable {
+      --___paddingIncrease: calc(var(--columnGap) / 2);
+
       padding-top: 10px;
       position: sticky;
       top: 0;
       max-height: calc(100vh - var(--navbar-height));
       overflow-y: auto;
       overflow-x: hidden;
-      margin-left: -2em;
-      padding-left: 2.5em;
+      margin-left: calc(var(--___paddingIncrease) * -1);
+      padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
       // Only show custom scrollbars on devices which
       // have a cursor/pointer to operate them
       &:not(.-show-scrollbar) {
         scrollbar-width: none;
-        margin-right: -2em;
-        padding-right: 2.5em;
+        margin-right: calc(var(--___paddingIncrease) * -1);
+        padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
         &::-webkit-scrollbar {
           display: block;
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index ccc523a2e..04078cf4d 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -270,5 +270,8 @@
     border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
     border-bottom: 1px solid var(--border, $fallback--border);
   }
+  &.-expanded {
+    margin: calc(var(--status-margin, $status-margin) / 2);
+  }
 }
 </style>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6c810bba2..362441bb2 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -51,7 +51,7 @@
     <div
       v-if="currentUser"
       class="mobile-notifications-drawer"
-      :class="{ 'closed': !notificationsOpen }"
+      :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
     >
@@ -94,6 +94,9 @@
     grid-template-columns: 2fr auto;
     width: 100%;
     box-sizing: border-box;
+    a {
+      color: var(--topBarLink, $fallback--link);
+    }
   }
 
   .mobile-inner-nav {
@@ -148,8 +151,9 @@
     z-index: 1001;
     -webkit-overflow-scrolling: touch;
 
-    &.closed {
+    &.-closed {
       transform: translateX(100%);
+      box-shadow: none;
     }
   }
 
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index f5a1e6031..c8d390bc0 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -50,7 +50,7 @@ export default {
     activeIndex () {
       // In case of controlled component
       if (this.activeTab) {
-        return this.slots().findIndex(slot => this.activeTab === slot.props.key)
+        return this.slots().findIndex(slot => slot && slot.props && this.activeTab === slot.props.key)
       } else {
         return this.active
       }
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 74577583c..4eaf597dc 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="thread-tree panel-body">
+  <div class="thread-tree">
     <status
       :key="status.id"
       ref="statusComponent"