From df18a74adc4dbad7ca0daf38c041f9ac482a29c8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 23:18:46 +0300
Subject: [PATCH 1/3] fixes for z-indexes

---
 src/components/popover/popover.vue               |  2 +-
 .../post_status_form/post_status_form.vue        |  4 ++--
 src/panel.scss                                   | 16 +++++-----------
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 973625d15..91939ee7b 100644
--- a/src/components/popover/popover.vue
+++ b/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 {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 47b8a2137..f052e4def 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/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;
diff --git a/src/panel.scss b/src/panel.scss
index 57059cb9e..175d21816 100644
--- a/src/panel.scss
+++ b/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,6 @@
   background-color: var(--bg, $fallback--bg);
   align-items: baseline;
   height: var(--panel-heading-height);
-  z-index: -2;
 
   &.-flexible-height {
     --panel-heading-height: auto;
@@ -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);
+}

From 4f617a7293922fdce85462009feb7e52770a7e62 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 23:30:41 +0300
Subject: [PATCH 2/3] fix for chat shadow

---
 src/App.js                    | 5 ++++-
 src/App.scss                  | 5 +++++
 src/App.vue                   | 2 +-
 src/components/chat/chat.scss | 4 +++-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index 39ef62e70..9cfaf4fa1 100644
--- a/src/App.js
+++ b/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 },
diff --git a/src/App.scss b/src/App.scss
index b5411585b..31d7fac25 100644
--- a/src/App.scss
+++ b/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);
 
diff --git a/src/App.vue b/src/App.vue
index 094a8ab98..707b91e5c 100644
--- a/src/App.vue
+++ b/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"
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 1bad51b93..7b4dd37fe 100644
--- a/src/components/chat/chat.scss
+++ b/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 {

From 647b8e5f6b4043976abcbe3d105a0362efdca359 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 23:34:56 +0300
Subject: [PATCH 3/3] more fixes for z-indexes in panels

---
 src/panel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panel.scss b/src/panel.scss
index 175d21816..1180d9e7e 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -52,6 +52,7 @@
   background-color: var(--bg, $fallback--bg);
   align-items: baseline;
   height: var(--panel-heading-height);
+  z-index: 2;
 
   &.-flexible-height {
     --panel-heading-height: auto;
@@ -65,7 +66,6 @@
   &.-sticky {
     position: sticky;
     top: var(--navbar-height);
-    z-index: 2;
   }
 
   &::after,