Merge branch 'threecolumn' into shigusegubu-vue3

* threecolumn:
  more fixes for z-indexes in panels
  fix for chat shadow
  fixes for z-indexes

src/App.js

@@ -82,8 +82,11 @@ export default {
         !this.$store.getters.mergedConfig.hideISP &&
         this.$store.state.instance.instanceSpecificPanelContent
     },
+    isChats () {
+      return this.$route.name === 'chat' || this.$route.name === 'chats'
+    },
     newPostButtonShown () {
-      if (this.$route.name === 'chat' || this.$route.name === 'chats') return false
+      if (this.isChats) return false
       return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
     },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },

src/App.scss

@@ -207,6 +207,11 @@ nav {
       z-index: 2;
     }
 
+    &.-full-height {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
     &.-scrollable {
       --___paddingIncrease: calc(var(--columnGap) / 2);
 

src/App.vue

@@ -26,7 +26,7 @@
           <div id="notifs-sidebar" />
         </template>
       </div>
-      <div id="main-scroller" class="column main">
+      <div id="main-scroller" class="column main" :class="{ '-full-height': isChats }">
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"

src/components/chat/chat.scss

@@ -22,6 +22,8 @@
     margin: 0 0 0 0;
     border-radius: 10px 10px 0 0;
     border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
+    margin-bottom: calc(var(--___columnMargin) * -1);
+    padding-bottom: var(--___columnMargin);
 
     &::after {
       border-radius: 0;
@@ -40,7 +42,7 @@
     bottom: 0;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
-    z-index: 10;
+    z-index: 1;
   }
 
   .chat-view-heading {

src/components/popover/popover.vue

@@ -69,7 +69,7 @@
   text-align: left;
   list-style: none;
   max-width: 100vw;
-  z-index: 10;
+  z-index: 200;
   white-space: nowrap;
 
   .dropdown-divider {

src/components/post_status_form/post_status_form.vue

@@ -509,7 +509,7 @@
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
     line-height:24px;
-    z-index: 50;
+    z-index: 10;
   }
 
   form textarea.form-cw {
@@ -572,7 +572,7 @@
 
   .drop-indicator {
     position: absolute;
-    z-index: 100;
+    z-index: 11;
     width: 100%;
     height: 100%;
     font-size: 5em;

src/panel.scss

@@ -2,7 +2,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  z-index: 0;
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
@@ -19,7 +18,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 100;
+    z-index: 3;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     pointer-events: none;
@@ -53,7 +52,7 @@
   background-color: var(--bg, $fallback--bg);
   align-items: baseline;
   height: var(--panel-heading-height);
-  z-index: -2;
+  z-index: 2;
 
   &.-flexible-height {
     --panel-heading-height: auto;
@@ -67,7 +66,6 @@
   &.-sticky {
     position: sticky;
     top: var(--navbar-height);
-    z-index: 2;
   }
 
   &::after,
@@ -90,14 +88,6 @@
     box-shadow: var(--panelHeaderShadow);
   }
 
-  &::before {
-    bottom: -20px;
-    z-index: -1;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    mask: linear-gradient(to bottom, white var(--panel-heading-height), transparent var(--panel-heading-height));
-  }
-
   .title {
     flex: 1 0 auto;
     font-size: 1.3em;
@@ -202,3 +192,7 @@
   padding: 1em;
   margin: 0;
 }
+
+.panel-body {
+  padding: var(--panel-body-padding, 0);
+}