Merge branch 'threecolumn' into shigusegubu-vue3

* threecolumn:
  restore margins for inline convos
  clean up and organize CSS, use ems for widths, use vars more
  fix notifs' shadow peeking in when closed on mobile
  Fix tab switcher not working when some tabs hidden
  fix scrollbars for real now
  Fix mobile nav link text colour
  Fix shrug text in muted status

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;

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>

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;
     }
   }
 

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
       }

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"