From c7d8cff7b30e20787851ed421068acaba81fa5ca Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Fri, 1 Apr 2022 09:07:15 +0000
Subject: [PATCH 001/122] Update dependency semver to v5.7.1

---
 package.json |  2 +-
 yarn.lock    | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 0537780e..2280aa55 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "sass": "1.20.1",
     "sass-loader": "7.2.0",
     "selenium-server": "2.53.1",
-    "semver": "5.6.0",
+    "semver": "5.7.1",
     "serviceworker-webpack-plugin": "1.0.1",
     "shelljs": "0.8.5",
     "sinon": "2.4.1",
diff --git a/yarn.lock b/yarn.lock
index 5ce68d92..1d34b081 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8603,20 +8603,20 @@ selenium-server@2.53.1:
   version "2.53.1"
   resolved "https://registry.yarnpkg.com/selenium-server/-/selenium-server-2.53.1.tgz#d681528812f3c2e0531a6b7e613e23bb02cce8a6"
 
-"semver@2 || 3 || 4 || 5", semver@5.6.0, semver@^5.3.0, semver@^5.5.0, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.5.0, semver@^5.6.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.6.0.tgz#7e74256fbaa49c75aa7c7a205cc22799cac80004"
 
+semver@5.7.1, semver@^5.4.1:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
 semver@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@^5.4.1:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
 semver@^5.5.1:
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b"

From 8a55f21a989bdc28c1b87716b9b0ab42fb6ba626 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Fri, 1 Apr 2022 09:08:00 +0000
Subject: [PATCH 002/122] Update dependency webpack-merge to v0.20.0

---
 package.json |  2 +-
 yarn.lock    | 14 ++++++++++----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 0537780e..2738adf1 100644
--- a/package.json
+++ b/package.json
@@ -119,7 +119,7 @@
     "webpack": "4.46.0",
     "webpack-dev-middleware": "3.7.3",
     "webpack-hot-middleware": "2.24.3",
-    "webpack-merge": "0.14.1"
+    "webpack-merge": "0.20.0"
   },
   "engines": {
     "node": ">= 4.0.0",
diff --git a/yarn.lock b/yarn.lock
index 5ce68d92..24eb6979 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6155,6 +6155,11 @@ lodash.isequal@^4.2.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
 
+lodash.isfunction@^3.0.8:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
+  integrity sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==
+
 lodash.isplainobject@^3.0.0, lodash.isplainobject@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-3.2.0.tgz#9a8238ae16b200432960cd7346512d0123fbf4c5"
@@ -10025,13 +10030,14 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
-webpack-merge@0.14.1:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-0.14.1.tgz#d6bfe6d9360a024e1e7f8e6383ae735f1737cd23"
-  integrity sha1-1r/m2TYKAk4ef45jg65zXxc3zSM=
+webpack-merge@0.20.0:
+  version "0.20.0"
+  resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-0.20.0.tgz#e4b73429517181a287c59c8cafef5fc9eb1d9705"
+  integrity sha1-5Lc0KVFxgaKHxZyMr+9fyesdlwU=
   dependencies:
     lodash.find "^3.2.1"
     lodash.isequal "^4.2.0"
+    lodash.isfunction "^3.0.8"
     lodash.isplainobject "^3.2.0"
     lodash.merge "^3.3.2"
 

From 0e83ced25b612250d8126778288b7b44f3b91dfc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Apr 2022 09:42:52 +0300
Subject: [PATCH 003/122] refactored how main app layout works

---
 src/App.scss                                | 102 ++++++++++++++------
 src/App.vue                                 |  31 +++---
 src/components/desktop_nav/desktop_nav.scss |   2 -
 src/components/mobile_nav/mobile_nav.vue    |   3 +-
 4 files changed, 89 insertions(+), 49 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 180c0daf..fa2c6a79 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,11 +1,21 @@
 @import './_variables.scss';
 
-#app {
-  min-height: 100vh;
-  max-width: 100%;
+body {
   overflow: hidden;
 }
 
+#app-loaded {
+  min-height: 100vh;
+  min-width: 100vw;
+  overflow: hidden;
+
+  --navbar-height: 50px;
+}
+
+.navbar {
+  height: var(--navbar-height);
+}
+
 .app-bg-wrapper {
   position: fixed;
   z-index: -1;
@@ -16,11 +26,7 @@
   background-repeat: no-repeat;
   background-color: var(--wallpaper);
   background-image: var(--body-background-image);
-  background-position: 50% 50px;
-}
-
-i[class^='icon-'] {
-  user-select: none;
+  background-position: 50%;
 }
 
 h4 {
@@ -28,12 +34,69 @@ h4 {
 }
 
 #content {
+  overflow-y: auto;
+  position: sticky;
+}
+
+.app-layout {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: 1fr;
   box-sizing: border-box;
-  padding-top: 60px;
-  margin: auto;
-  min-height: 100vh;
-  max-width: 980px;
+  margin: 0 auto;
+  height: 100vh;
   align-content: flex-start;
+  flex-wrap: wrap;
+  padding: 0 10px 0 10px;
+  grid-template-columns: auto auto;
+  justify-content: center;
+}
+
+.underlay {
+  height: 100%;
+  width: 100%;
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 1;
+  margin: -0.5em;
+  padding: 0.5em;
+}
+
+.column {
+  max-width: 615px;
+  padding-top: 10px;
+  grid-row-start: 1;
+  grid-row-end: 1;
+
+  &:nth-child(2) {
+    grid-column: 1;
+  }
+
+  &:nth-child(3) {
+    grid-column: 2;
+  }
+
+  &.-mini {
+    max-width: 345px;
+  }
+
+  &.-scrollable {
+    position: sticky;
+    top: 0;
+    margin-top: calc(-1 * var(--navbar-padding));
+    max-height: 100vh;
+    overflow-y: auto;
+  }
+}
+
+body,
+.column.-scrollable {
+  &::-webkit-scrollbar {
+    display: block;
+    width: 0;
+  }
 }
 
 .underlay {
@@ -362,13 +425,6 @@ i[class*=icon-], .svg-inline--fa  {
   }
 }
 
-.container {
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0;
-  padding: 0 10px 0 10px;
-}
-
 .auto-size {
   flex: 1
 }
@@ -598,10 +654,6 @@ nav {
 }
 
 @media all and (min-width: 800px) {
-  body {
-    overflow-y: scroll;
-  }
-
   .sidebar-bounds {
     overflow: hidden;
     max-height: 100vh;
@@ -856,10 +908,6 @@ nav {
   height: 100%;
 
   // Get rid of scrollbar on body as scrolling happens on different element
-  body {
-    overflow: hidden;
-  }
-
   // Ensures the fixed position of the mobile browser bars on scroll up / down events.
   // Prevents the mobile browser bars from overlapping or hiding the message posting form.
   @media all and (max-width: 800px) {
diff --git a/src/App.vue b/src/App.vue
index b18b3308..dc2359f3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,33 +7,28 @@
       id="app_bg_wrapper"
       class="app-bg-wrapper"
     />
-    <MobileNav v-if="isMobileLayout" />
-    <DesktopNav v-else />
+    <MobileNav class="navbar" v-if="isMobileLayout" />
+    <DesktopNav class="navbar" v-else />
     <div class="app-bg-wrapper app-container-wrapper" />
     <div
       id="content"
-      class="container underlay"
+      class="app-layout container"
     >
+      <div class="underlay"/>
       <div
-        class="sidebar-flexer mobile-hidden"
+        class="column -scrollable -mini mobile-hidden"
         :style="sidebarAlign"
       >
-        <div class="sidebar-bounds">
-          <div class="sidebar-scroller">
-            <div class="sidebar">
-              <user-panel />
-              <div v-if="!isMobileLayout">
-                <nav-panel />
-                <instance-specific-panel v-if="showInstanceSpecificPanel" />
-                <features-panel v-if="!currentUser && showFeaturesPanel" />
-                <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
-                <notifications v-if="currentUser" />
-              </div>
-            </div>
-          </div>
+        <user-panel />
+        <div v-if="!isMobileLayout">
+          <nav-panel />
+          <instance-specific-panel v-if="showInstanceSpecificPanel" />
+          <features-panel v-if="!currentUser && showFeaturesPanel" />
+          <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
+          <notifications v-if="currentUser" />
         </div>
       </div>
-      <div class="main">
+      <div class="column main">
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 2d468588..1e731c70 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -1,9 +1,7 @@
 @import '../../_variables.scss';
 
 .DesktopNav {
-  height: 50px;
   width: 100%;
-  position: fixed;
 
   a {
     color: var(--topBarLink, $fallback--link);
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 0f0ea457..229f3006 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -92,8 +92,7 @@
 .MobileNav {
   .mobile-nav {
     display: grid;
-    line-height: 50px;
-    height: 50px;
+    line-height: var(--navbar-height);
     grid-template-rows: 50px;
     grid-template-columns: 2fr auto;
     width: 100%;

From 71863061c691df7f59cf4be283a3e0772d485378 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Apr 2022 19:41:09 +0300
Subject: [PATCH 004/122] fixed tons of stuff, at least it looks normalish on
 desktop

---
 src/App.js                                    |   6 +-
 src/App.scss                                  | 609 +++++++++---------
 src/App.vue                                   |  14 +-
 src/components/chat/chat.js                   |  46 +-
 src/components/chat/chat.scss                 |  16 +-
 src/components/chat/chat.vue                  |   6 +-
 src/components/chat/chat_layout_utils.js      |   1 +
 src/components/mobile_nav/mobile_nav.vue      |   2 +-
 .../notifications/notifications.vue           |   2 +-
 .../password_reset/password_reset.vue         |   3 +
 src/components/registration/registration.vue  |   5 +-
 .../settings_modal/settings_modal.scss        |  12 +
 src/components/status/status.scss             |   4 +
 src/components/timeline/timeline.js           |   6 +-
 src/components/timeline/timeline.scss         |   1 -
 src/components/user_card/user_card.vue        |   8 +-
 16 files changed, 367 insertions(+), 374 deletions(-)

diff --git a/src/App.js b/src/App.js
index c4360af5..4a59f412 100644
--- a/src/App.js
+++ b/src/App.js
@@ -81,11 +81,7 @@ export default {
     },
     isMobileLayout () { return this.$store.state.interface.mobileLayout },
     privateMode () { return this.$store.state.instance.private },
-    sidebarAlign () {
-      return {
-        'order': this.$store.getters.mergedConfig.sidebarRight ? 99 : 0
-      }
-    },
+    reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
diff --git a/src/App.scss b/src/App.scss
index fa2c6a79..7e428407 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,125 +1,21 @@
+// stylelint-disable rscss/class-format
 @import './_variables.scss';
 
-body {
-  overflow: hidden;
-}
-
-#app-loaded {
-  min-height: 100vh;
-  min-width: 100vw;
-  overflow: hidden;
-
-  --navbar-height: 50px;
-}
-
-.navbar {
-  height: var(--navbar-height);
-}
-
-.app-bg-wrapper {
-  position: fixed;
-  z-index: -1;
-  height: 100%;
-  left: 0;
-  right: -20px;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-color: var(--wallpaper);
-  background-image: var(--body-background-image);
-  background-position: 50%;
-}
-
-h4 {
-  margin: 0;
-}
-
-#content {
-  overflow-y: auto;
-  position: sticky;
-}
-
-.app-layout {
-  position: relative;
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-template-rows: 1fr;
-  box-sizing: border-box;
-  margin: 0 auto;
-  height: 100vh;
-  align-content: flex-start;
-  flex-wrap: wrap;
-  padding: 0 10px 0 10px;
-  grid-template-columns: auto auto;
-  justify-content: center;
-}
-
-.underlay {
-  height: 100%;
-  width: 100%;
-  grid-column-start: 1;
-  grid-column-end: 3;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  margin: -0.5em;
-  padding: 0.5em;
-}
-
-.column {
-  max-width: 615px;
-  padding-top: 10px;
-  grid-row-start: 1;
-  grid-row-end: 1;
-
-  &:nth-child(2) {
-    grid-column: 1;
-  }
-
-  &:nth-child(3) {
-    grid-column: 2;
-  }
-
-  &.-mini {
-    max-width: 345px;
-  }
-
-  &.-scrollable {
-    position: sticky;
-    top: 0;
-    margin-top: calc(-1 * var(--navbar-padding));
-    max-height: 100vh;
-    overflow-y: auto;
-  }
-}
-
-body,
-.column.-scrollable {
-  &::-webkit-scrollbar {
-    display: block;
-    width: 0;
-  }
-}
-
-.underlay {
-  background-color: rgba(0,0,0,0.15);
-  background-color: var(--underlay, rgba(0,0,0,0.15));
-}
-
-.text-center {
-  text-align: center;
-}
-
 html {
   font-size: 14px;
+  overflow: hidden;
+  max-height: 100vh;
 }
 
 body {
-  overscroll-behavior-y: none;
+  overflow: hidden;
+  max-height: 100vh;
+  max-width: 100vw;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
   margin: 0;
   color: $fallback--text;
   color: var(--text, $fallback--text);
-  max-width: 100vw;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -135,6 +31,134 @@ a {
   color: var(--link, $fallback--link);
 }
 
+h4 {
+  margin: 0;
+}
+
+nav {
+  z-index: 1000;
+  color: var(--topBarText);
+  background-color: $fallback--fg;
+  background-color: var(--topBar, $fallback--fg);
+  color: $fallback--faint;
+  color: var(--faint, $fallback--faint);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
+  box-shadow: var(--topBarShadow);
+  box-sizing: border-box;
+  height: var(--navbar-height);
+}
+
+#app-loaded {
+  min-height: 100vh;
+  min-width: 100vw;
+  overflow: hidden;
+
+  --navbar-height: 50px;
+}
+
+#content {
+  overscroll-behavior-y: none;
+  overflow-y: auto;
+  position: sticky;
+}
+
+#sidebar {
+  display: grid;
+  grid-template-columns: 100%;
+  row-gap: 1em;
+  grid-area: sidebar;
+  align-content: start;
+}
+
+#main-scroller {
+  grid-area: content;
+}
+
+.app-bg-wrapper {
+  position: fixed;
+  height: 100%;
+  top: var(--navbar-height);
+  z-index: -1000;
+  left: 0;
+  right: -20px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-position: 50%;
+}
+
+.app-layout {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(auto, 1fr);
+  grid-template-areas: "sidebar content";
+  grid-template-rows: 1fr;
+  box-sizing: border-box;
+  margin: 0 auto;
+  height: calc(100vh - var(--navbar-height));
+  align-content: flex-start;
+  flex-wrap: wrap;
+  padding: 0 10px 0 10px;
+  justify-content: center;
+
+  &.-reverse {
+    grid-template-columns: minmax(auto, 1fr) auto;
+    grid-template-areas: "content sidebar";
+  }
+}
+
+.underlay {
+  grid-column-start: 1;
+  grid-column-end: span 2;
+  grid-row-start: 1;
+  grid-row-end: 1;
+  margin: 0 -0.5em;
+  padding: 0 0.5em;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.15);
+  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
+  z-index: -2000;
+}
+
+.column {
+  box-sizing: border-box;
+  max-width: 615px;
+  padding-top: 10px;
+  grid-row-start: 1;
+  grid-row-end: 1;
+  margin: 0 0.5em;
+
+  &.-mini {
+    max-width: 345px;
+  }
+
+  &.-scrollable {
+    padding-top: 10px;
+    position: sticky;
+    top: 0;
+    max-height: calc(100vh - var(--navbar-height));
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    .panel-heading.-sticky {
+      top: -10px;
+    }
+  }
+}
+
+#content,
+.column.-scrollable {
+  &::-webkit-scrollbar {
+    display: block;
+    width: 0;
+  }
+}
+
+.text-center {
+  text-align: center;
+}
+
 .button-default {
   user-select: none;
   color: $fallback--text;
@@ -166,12 +190,12 @@ a {
   }
 
   &:hover {
-    box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
+    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
     box-shadow: var(--buttonHoverShadow);
   }
 
   &:active {
-    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
     color: $fallback--text;
     color: var(--btnPressedText, $fallback--text);
@@ -204,7 +228,7 @@ a {
     color: var(--btnToggledText, $fallback--text);
     background-color: $fallback--fg;
     background-color: var(--btnToggled, $fallback--fg);
-    box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
+    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.3), 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset;
     box-shadow: var(--buttonPressedShadow);
 
     svg,
@@ -254,8 +278,9 @@ a {
   }
 }
 
-input, textarea, .input {
-
+input,
+textarea,
+.input {
   &.unstyled {
     border-radius: 0;
     background: none;
@@ -266,7 +291,7 @@ input, textarea, .input {
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2) inset, 0 -1px 0 0 rgba(255, 255, 255, 0.2) inset, 0 0 2px 0 rgba(0, 0, 0, 1) inset;
   box-shadow: var(--inputShadow);
   background-color: $fallback--fg;
   background-color: var(--input, $fallback--fg);
@@ -282,9 +307,11 @@ input, textarea, .input {
   height: 28px;
   line-height: 16px;
   hyphens: none;
-  padding: 8px .5em;
+  padding: 8px 0.5em;
 
-  &:disabled, &[disabled=disabled], &.disabled {
+  &:disabled,
+  &[disabled=disabled],
+  &.disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
@@ -299,18 +326,21 @@ input, textarea, .input {
 
   &[type=radio] {
     display: none;
+
     &:checked + label::before {
-      box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
-      box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
+      box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
+      box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
       background-color: var(--accent, $fallback--link);
     }
+
     &:disabled {
       &,
       & + label,
       & + label::before {
-        opacity: .5;
+        opacity: 0.5;
       }
     }
+
     + label::before {
       flex-shrink: 0;
       display: inline-block;
@@ -319,9 +349,9 @@ input, textarea, .input {
       width: 1.1em;
       height: 1.1em;
       border-radius: 100%; // Radio buttons should always be circle
-      box-shadow: 0px 0px 2px black inset;
+      box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
-      margin-right: .5em;
+      margin-right: 0.5em;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
@@ -337,17 +367,20 @@ input, textarea, .input {
 
   &[type=checkbox] {
     display: none;
+
     &:checked + label::before {
       color: $fallback--text;
       color: var(--inputText, $fallback--text);
     }
+
     &:disabled {
       &,
       & + label,
       & + label::before {
-        opacity: .5;
+        opacity: 0.5;
       }
     }
+
     + label::before {
       flex-shrink: 0;
       display: inline-block;
@@ -357,9 +390,9 @@ input, textarea, .input {
       height: 1.1em;
       border-radius: $fallback--checkboxRadius;
       border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-      box-shadow: 0px 0px 2px black inset;
+      box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
-      margin-right: .5em;
+      margin-right: 0.5em;
       background-color: $fallback--fg;
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
@@ -387,6 +420,7 @@ option {
 
 .hide-number-spinner {
   -moz-appearance: textfield;
+
   &[type=number]::-webkit-inner-spin-button,
   &[type=number]::-webkit-outer-spin-button {
     opacity: 0;
@@ -394,7 +428,8 @@ option {
   }
 }
 
-i[class*=icon-], .svg-inline--fa  {
+i[class*=icon-],
+.svg-inline--fa {
   color: $fallback--icon;
   color: var(--icon, $fallback--icon);
 }
@@ -426,10 +461,6 @@ i[class*=icon-], .svg-inline--fa  {
 }
 
 .auto-size {
-  flex: 1
-}
-
-main-router {
   flex: 1;
 }
 
@@ -439,23 +470,21 @@ main-router {
 
   p {
     margin: 0;
-    font-size: 0.8em
+    font-size: 0.8em;
   }
 }
 
 /* Panel */
-
 .panel {
-  display: flex;
   position: relative;
-
+  display: flex;
   flex-direction: column;
-  margin: 0.5em;
-
+  z-index: 0;
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
-  &::after, & {
+  &::after,
+  & {
     border-radius: $fallback--panelRadius;
     border-radius: var(--panelRadius, $fallback--panelRadius);
   }
@@ -463,16 +492,14 @@ main-router {
   &::after {
     content: '';
     position: absolute;
-
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-
-    pointer-events: none;
-
-    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    z-index: 2;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
+    pointer-events: none;
   }
 }
 
@@ -484,19 +511,67 @@ main-router {
 }
 
 .panel-heading {
+  position: relative;
+  box-sizing: border-box;
   display: flex;
   flex: none;
   border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
   background-size: cover;
-  padding: .6em .6em;
+  padding: 0.6em 0.6em;
   text-align: left;
   line-height: 28px;
   color: var(--panelText);
-  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--fg);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
   align-items: baseline;
-  box-shadow: var(--panelHeaderShadow);
+  height: var(--panelHeadingHeight);
+  z-index: -2;
+
+  --panelHeadingHeight: 45px;
+
+  &.-flexible-height {
+    --panelHeadingHeight: auto;
+
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+
+  &.-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  &::after {
+    background-color: $fallback--fg;
+    background-color: var(--panel, $fallback--fg);
+    z-index: -2;
+    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    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(--panelHeadingHeight), transparent var(--panelHeadingHeight));
+  }
 
   .title {
     flex: 1 0 auto;
@@ -527,7 +602,7 @@ main-router {
     min-height: 0;
     box-sizing: border-box;
     margin: 0;
-    margin-left: .5em;
+    margin-left: 0.5em;
     min-width: 1px;
     align-self: stretch;
   }
@@ -562,7 +637,7 @@ main-router {
   a,
   .-link {
     color: $fallback--link;
-    color: var(--panelLink, $fallback--link)
+    color: var(--panelLink, $fallback--link);
   }
 }
 
@@ -574,7 +649,7 @@ main-router {
 /* TODO Should remove timeline-footer from here when we refactor panels into
  * separate component and utilize slots
  */
-.panel-footer, .timeline-footer {
+.panel-footer {
   display: flex;
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
@@ -605,37 +680,18 @@ main-router {
   margin: 0;
 }
 
-.container > * {
-  min-width: 0px;
-}
-
 .fa {
   color: grey;
 }
 
-nav {
-  z-index: 1000;
-  color: var(--topBarText);
-  background-color: $fallback--fg;
-  background-color: var(--topBar, $fallback--fg);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-  box-shadow: 0px 0px 4px rgba(0,0,0,.6);
-  box-shadow: var(--topBarShadow);
-  box-sizing: border-box;
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
 }
 
-.fade-enter-active, .fade-leave-active {
-  transition: opacity .2s
-}
-.fade-enter-from, .fade-leave-active {
-  opacity: 0
-}
-
-.main {
-  flex-basis: 50%;
-  flex-grow: 1;
-  flex-shrink: 1;
+.fade-enter-from,
+.fade-leave-active {
+  opacity: 0;
 }
 
 .sidebar-bounds {
@@ -653,34 +709,6 @@ nav {
   display: none;
 }
 
-@media all and (min-width: 800px) {
-  .sidebar-bounds {
-    overflow: hidden;
-    max-height: 100vh;
-    width: 345px;
-    position: fixed;
-    margin-top: -10px;
-
-    .sidebar-scroller {
-      height: 96vh;
-      width: 365px;
-      padding-top: 10px;
-      padding-right: 50px;
-      overflow-x: hidden;
-      overflow-y: scroll;
-    }
-
-    .sidebar {
-      width: 345px;
-    }
-  }
-  .sidebar-flexer {
-    max-height: 96vh;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-}
-
 .badge {
   box-sizing: border-box;
   display: inline-block;
@@ -764,7 +792,7 @@ nav {
 }
 
 .visibility-notice {
-  padding: .5em;
+  padding: 0.5em;
   border: 1px solid $fallback--faint;
   border: 1px solid var(--faint, $fallback--faint);
   border-radius: $fallback--inputRadius;
@@ -779,7 +807,7 @@ nav {
     position: absolute;
     top: 0;
     right: 0;
-    padding: .5em;
+    padding: 0.5em;
     color: inherit;
   }
 }
@@ -796,30 +824,57 @@ nav {
   }
 }
 
-@keyframes shakeError {
-  0% {
-    transform: translateX(0);
+.login-hint {
+  text-align: center;
+
+  @media all and (min-width: 801px) {
+    display: none;
   }
-  15% {
-    transform: translateX(0.375rem);
+
+  a {
+    display: inline-block;
+    padding: 1em 0;
+    width: 100%;
   }
-  30% {
-    transform: translateX(-0.375rem);
+}
+
+.btn.button-default {
+  min-height: 28px;
+}
+
+.new-status-notification {
+  position: relative;
+  font-size: 1.1em;
+  z-index: 1;
+  flex: 1;
+}
+
+@media all and (min-width: 800px) {
+  .sidebar-bounds {
+    overflow: hidden;
+    max-height: 100vh;
+    width: 345px;
+    position: fixed;
+    margin-top: -10px;
+
+    .sidebar-scroller {
+      height: 96vh;
+      width: 365px;
+      padding-top: 10px;
+      padding-right: 50px;
+      overflow-x: hidden;
+      overflow-y: scroll;
+    }
+
+    .sidebar {
+      width: 345px;
+    }
   }
-  45% {
-    transform: translateX(0.375rem);
-  }
-  60% {
-    transform: translateX(-0.375rem);
-  }
-  75% {
-    transform: translateX(0.375rem);
-  }
-  90% {
-    transform: translateX(-0.375rem);
-  }
-  100% {
-    transform: translateX(0);
+
+  .sidebar-flexer {
+    max-height: 96vh;
+    flex-shrink: 0;
+    flex-grow: 0;
   }
 }
 
@@ -832,14 +887,6 @@ nav {
     display: flex;
   }
 
-  .container {
-    padding: 0;
-  }
-
-  .panel {
-    margin: 0.5em 0 0.5em 0;
-  }
-
   .menu-button {
     display: block;
     margin-right: 0.8em;
@@ -850,41 +897,6 @@ nav {
   }
 }
 
-.setting-list,
-.option-list{
-  list-style-type: none;
-  padding-left: 2em;
-  li {
-    margin-bottom: 0.5em;
-  }
-  .suboptions {
-    margin-top: 0.3em
-  }
-}
-
-.login-hint {
-  text-align: center;
-
-  @media all and (min-width: 801px) {
-    display: none;
-  }
-
-  a {
-    display: inline-block;
-    padding: 1em 0px;
-    width: 100%;
-  }
-}
-
-.btn.button-default {
-  min-height: 28px;
-}
-
-.animate-spin {
-  animation: spin 2s infinite linear;
-  display: inline-block;
-}
-
 @keyframes spin {
   0% {
     transform: rotate(0deg);
@@ -895,45 +907,36 @@ nav {
   }
 }
 
-.new-status-notification {
-  position: relative;
-  font-size: 1.1em;
-  z-index: 1;
-  flex: 1;
-}
+@keyframes shakeError {
+  0% {
+    transform: translateX(0);
+  }
 
-.chat-layout {
-  // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
-  overflow: hidden;
-  height: 100%;
+  15% {
+    transform: translateX(0.375rem);
+  }
 
-  // Get rid of scrollbar on body as scrolling happens on different element
-  // Ensures the fixed position of the mobile browser bars on scroll up / down events.
-  // Prevents the mobile browser bars from overlapping or hiding the message posting form.
-  @media all and (max-width: 800px) {
-    body {
-      height: 100%;
-    }
+  30% {
+    transform: translateX(-0.375rem);
+  }
 
-    #app {
-      height: 100%;
-      overflow: hidden;
-      min-height: auto;
-    }
+  45% {
+    transform: translateX(0.375rem);
+  }
 
-    #app_bg_wrapper {
-      overflow: hidden;
-    }
+  60% {
+    transform: translateX(-0.375rem);
+  }
 
-    .main {
-      overflow: hidden;
-      height: 100%;
-    }
+  75% {
+    transform: translateX(0.375rem);
+  }
 
-    #content {
-      padding-top: 0;
-      height: 100%;
-      overflow: visible;
-    }
+  90% {
+    transform: translateX(-0.375rem);
+  }
+
+  100% {
+    transform: translateX(0);
   }
 }
diff --git a/src/App.vue b/src/App.vue
index dc2359f3..71de2a36 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,28 +7,28 @@
       id="app_bg_wrapper"
       class="app-bg-wrapper"
     />
-    <MobileNav class="navbar" v-if="isMobileLayout" />
-    <DesktopNav class="navbar" v-else />
-    <div class="app-bg-wrapper app-container-wrapper" />
+    <MobileNav v-if="isMobileLayout" />
+    <DesktopNav v-else />
     <div
       id="content"
       class="app-layout container"
+      :class="{ '-reverse': reverseLayout }"
     >
       <div class="underlay"/>
       <div
+        id="sidebar"
         class="column -scrollable -mini mobile-hidden"
-        :style="sidebarAlign"
       >
         <user-panel />
-        <div v-if="!isMobileLayout">
+        <template v-if="!isMobileLayout">
           <nav-panel />
           <instance-specific-panel v-if="showInstanceSpecificPanel" />
           <features-panel v-if="!currentUser && showFeaturesPanel" />
           <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
           <notifications v-if="currentUser" />
-        </div>
+        </template>
       </div>
-      <div class="column main">
+      <div id="main-scroller" class="column main">
         <div
           v-if="!currentUser"
           class="login-hint panel panel-default"
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index aef11712..59e884c4 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -6,7 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
-import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight, isScrollable } from './chat_layout_utils.js'
+import { getScrollPosition, getNewTopPosition, isBottomedOut } from './chat_layout_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronDown,
@@ -20,7 +20,7 @@ library.add(
 )
 
 const BOTTOMED_OUT_OFFSET = 10
-const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150
+const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
 const SAFE_RESIZE_TIME_OFFSET = 100
 const MARK_AS_READ_DELAY = 1500
 const MAX_RETRIES = 10
@@ -52,7 +52,6 @@ const Chat = {
     }
 
     this.$nextTick(() => {
-      this.updateScrollableContainerHeight()
       this.handleResize()
     })
     this.setChatLayout()
@@ -132,7 +131,6 @@ const Chat = {
     onFilesDropped () {
       this.$nextTick(() => {
         this.handleResize()
-        this.updateScrollableContainerHeight()
       })
     },
     handleVisibilityChange () {
@@ -154,10 +152,6 @@ const Chat = {
       if (html) {
         html.classList.add('chat-layout')
       }
-
-      this.$nextTick(() => {
-        this.updateScrollableContainerHeight()
-      })
     },
     unsetChatLayout () {
       let html = document.querySelector('html')
@@ -167,17 +161,9 @@ const Chat = {
     },
     handleLayoutChange () {
       this.$nextTick(() => {
-        this.updateScrollableContainerHeight()
         this.scrollDown()
       })
     },
-    // Ensures the proper position of the posting form in the mobile layout (the mobile browser panel does not overlap or hide it)
-    updateScrollableContainerHeight () {
-      const header = this.$refs.header
-      const footer = this.$refs.footer
-      const inner = this.mobileLayout ? window.document.body : this.$refs.inner
-      this.scrollableContainerHeight = scrollableContainerHeight(inner, header, footer) + 'px'
-    },
     // Preserves the scroll position when OSK appears or the posting form changes its height.
     handleResize (opts = {}) {
       const { expand = false, delayed = false } = opts
@@ -190,17 +176,14 @@ const Chat = {
       }
 
       this.$nextTick(() => {
-        this.updateScrollableContainerHeight()
-
         const { offsetHeight = undefined } = this.lastScrollPosition
-        this.lastScrollPosition = getScrollPosition(this.$refs.scrollable)
+        this.lastScrollPosition = getScrollPosition(document.getElementById('content'))
 
         const diff = this.lastScrollPosition.offsetHeight - offsetHeight
         if (diff < 0 || (!this.bottomedOut() && expand)) {
           this.$nextTick(() => {
-            this.updateScrollableContainerHeight()
-            this.$refs.scrollable.scrollTo({
-              top: this.$refs.scrollable.scrollTop - diff,
+            document.getElementById('content').scrollTo({
+              top: document.getElementById('content').scrollTop - diff,
               left: 0
             })
           })
@@ -209,7 +192,7 @@ const Chat = {
     },
     scrollDown (options = {}) {
       const { behavior = 'auto', forceRead = false } = options
-      const scrollable = this.$refs.scrollable
+      const scrollable = document.getElementById('content')
       if (!scrollable) { return }
       this.$nextTick(() => {
         scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
@@ -228,10 +211,10 @@ const Chat = {
       })
     },
     bottomedOut (offset) {
-      return isBottomedOut(this.$refs.scrollable, offset)
+      return isBottomedOut(document.getElementById('content'), offset)
     },
     reachedTop () {
-      const scrollable = this.$refs.scrollable
+      const scrollable = document.getElementById('content')
       return scrollable && scrollable.scrollTop <= 0
     },
     cullOlderCheck () {
@@ -263,7 +246,7 @@ const Chat = {
       }
     }, 200),
     handleScrollUp (positionBeforeLoading) {
-      const positionAfterLoading = getScrollPosition(this.$refs.scrollable)
+      const positionAfterLoading = getScrollPosition(document.getElementById('content'))
       this.$refs.scrollable.scrollTo({
         top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
         left: 0
@@ -285,22 +268,18 @@ const Chat = {
             chatService.clear(chatMessageService)
           }
 
-          const positionBeforeUpdate = getScrollPosition(this.$refs.scrollable)
+          const positionBeforeUpdate = getScrollPosition(document.getElementById('content'))
           this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
             this.$nextTick(() => {
               if (fetchOlderMessages) {
                 this.handleScrollUp(positionBeforeUpdate)
               }
 
-              if (isFirstFetch) {
-                this.updateScrollableContainerHeight()
-              }
-
               // In vertical screens, the first batch of fetched messages may not always take the
               // full height of the scrollable container.
               // If this is the case, we want to fetch the messages until the scrollable container
               // is fully populated so that the user has the ability to scroll up and load the history.
-              if (!isScrollable(this.$refs.scrollable) && messages.length > 0) {
+              if (messages.length > 0) {
                 this.fetchChat({ maxId: this.currentChatMessageService.minId })
               }
             })
@@ -336,9 +315,6 @@ const Chat = {
         this.handleResize()
         // When the posting form size changes because of a media attachment, we need an extra resize
         // to account for the potential delay in the DOM update.
-        setTimeout(() => {
-          this.updateScrollableContainerHeight()
-        }, SAFE_RESIZE_TIME_OFFSET)
         this.scrollDown({ forceRead: true })
       })
     },
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 3a26686c..c1f2dcf2 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -1,19 +1,12 @@
 .chat-view {
   display: flex;
-  height: calc(100vh - 60px);
-  width: 100%;
-
-  .chat-title {
-    // prevents chat header jumping on when the user avatar loads
-    height: 28px;
-  }
+  height: 100%;
 
   .chat-view-inner {
     height: auto;
     width: 100%;
     overflow: visible;
     display: flex;
-    margin: 0.5em 0.5em 0 0.5em;
   }
 
   .chat-view-body {
@@ -32,11 +25,9 @@
     }
   }
 
-  .scrollable-message-list {
+  .message-list {
     padding: 0 0.8em;
     height: 100%;
-    overflow-y: scroll;
-    overflow-x: hidden;
     display: flex;
     flex-direction: column;
   }
@@ -44,12 +35,13 @@
   .footer {
     position: sticky;
     bottom: 0;
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
   }
 
   .chat-view-heading {
     align-items: center;
     justify-content: space-between;
-    top: 50px;
     display: flex;
     z-index: 2;
     position: sticky;
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 493c5d5a..3b0129fa 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -8,7 +8,7 @@
       >
         <div
           ref="header"
-          class="panel-heading chat-view-heading mobile-hidden"
+          class="panel-heading -sticky chat-view-heading mobile-hidden"
         >
           <a
             class="go-back-button"
@@ -27,10 +27,8 @@
           </div>
         </div>
         <div
-          ref="scrollable"
-          class="scrollable-message-list"
+          class="message-list"
           :style="{ height: scrollableContainerHeight }"
-          @scroll="handleScroll"
         >
           <template v-if="!errorLoadingChat">
             <ChatMessage
diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js
index 50a933ac..5c4aa5bf 100644
--- a/src/components/chat/chat_layout_utils.js
+++ b/src/components/chat/chat_layout_utils.js
@@ -1,5 +1,6 @@
 // Captures a scroll position
 export const getScrollPosition = (el) => {
+  console.log(el)
   return {
     scrollTop: el.scrollTop,
     scrollHeight: el.scrollHeight,
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 229f3006..1c28ef77 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -181,7 +181,7 @@
   .mobile-notifications {
     margin-top: 50px;
     width: 100vw;
-    height: calc(100vh - 50px);
+    height: calc(100vh - var(--navbar-height));
     overflow-x: hidden;
     overflow-y: scroll;
 
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 2ce5d56f..9d8fa059 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -6,7 +6,7 @@
     <div :class="mainClass">
       <div
         v-if="!noHeading"
-        class="panel-heading"
+        class="notifications-heading panel-heading -sticky"
       >
         <div class="title">
           {{ $t('notifications.notifications') }}
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 3ffa5425..e0579568 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -91,6 +91,9 @@
     flex-direction: column;
     margin-top: 0.6em;
     max-width: 18rem;
+    > * {
+      min-width: 0;
+    }
   }
 
   .form-group {
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 3d409109..1e735c69 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -271,7 +271,10 @@ $validations-cRed: #f04124;
   .container {
     display: flex;
     flex-direction: row;
-    //margin-bottom: 1em;
+
+    > * {
+      min-width: 0;
+    }
   }
 
   .terms-of-service {
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 2f7649a9..f3738a8c 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -2,6 +2,18 @@
 .settings-modal {
   overflow: hidden;
 
+  .setting-list,
+  .option-list {
+    list-style-type: none;
+    padding-left: 2em;
+    li {
+      margin-bottom: 0.5em;
+    }
+    .suboptions {
+      margin-top: 0.3em
+    }
+  }
+
   &.peek {
     .settings-modal-panel {
       /* Explanation:
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 5ed43e0d..e38e2a53 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -42,6 +42,10 @@
     display: flex;
     padding: var(--status-margin, $status-margin);
 
+    > * {
+      min-width: 0;
+    }
+
     &.-repeat {
       padding-top: 0;
     }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 8ec5d1e5..9056319b 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -64,7 +64,7 @@ const Timeline = {
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
-        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
+        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
       }
@@ -89,7 +89,7 @@ const Timeline = {
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
-    window.addEventListener('scroll', this.handleScroll)
+    document.getElementById('content').addEventListener('scroll', this.handleScroll)
 
     if (store.state.api.fetchers[this.timelineName]) { return false }
 
@@ -111,7 +111,7 @@ const Timeline = {
     setTimeout(this.determineVisibleStatuses, 250)
   },
   unmounted () {
-    window.removeEventListener('scroll', this.handleScroll)
+    document.getElementById('content').removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('keydown', this.handleShortKey)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 2c5a67e2..c10375d4 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,7 +13,6 @@
     max-width: 100%;
     flex-wrap: nowrap;
     align-items: center;
-    position: relative;
 
     .loadmore-button {
       flex-shrink: 0;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 14b4643a..6e044bb6 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -8,7 +8,7 @@
       :style="style"
       class="background-image"
     />
-    <div class="panel-heading">
+    <div class="panel-heading -flexible-height">
       <div class="user-info">
         <div class="container">
           <a
@@ -331,6 +331,7 @@
     border-top-left-radius: calc(var(--panelRadius) - 1px);
     border-top-right-radius: calc(var(--panelRadius) - 1px);
     background-color: var(--profileBg);
+    z-index: -2;
 
     &.hide-bio {
       mask-size: 100% 40px;
@@ -385,11 +386,16 @@
   padding: 0 26px;
 
   .container {
+    min-width: 0;
     padding: 16px 0 6px;
     display: flex;
     align-items: flex-start;
     max-height: 56px;
 
+    > * {
+      min-width: 0;
+    }
+
     .Avatar {
       --_avatarShadowBox: var(--avatarShadow);
       --_avatarShadowFilter: var(--avatarShadowFilter);

From e7ac0e5d689b4566a9522d29f95984e886dd2cca Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 13:03:03 +0300
Subject: [PATCH 005/122] fix main column having wild widths

---
 src/App.scss | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 7e428407..dbea74a0 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -91,7 +91,7 @@ nav {
 .app-layout {
   position: relative;
   display: grid;
-  grid-template-columns: auto minmax(auto, 1fr);
+  grid-template-columns: var(--miniColumn) var(--maxiColumn);
   grid-template-areas: "sidebar content";
   grid-template-rows: 1fr;
   box-sizing: border-box;
@@ -102,8 +102,11 @@ nav {
   padding: 0 10px 0 10px;
   justify-content: center;
 
+  --miniColumn: 345px;
+  --maxiColumn: minmax(auto, 615px);
+
   &.-reverse {
-    grid-template-columns: minmax(auto, 1fr) auto;
+    grid-template-columns: var(--maxiColumn) var(--miniColumn);
     grid-template-areas: "content sidebar";
   }
 }
@@ -123,16 +126,11 @@ nav {
 
 .column {
   box-sizing: border-box;
-  max-width: 615px;
   padding-top: 10px;
   grid-row-start: 1;
   grid-row-end: 1;
   margin: 0 0.5em;
 
-  &.-mini {
-    max-width: 345px;
-  }
-
   &.-scrollable {
     padding-top: 10px;
     position: sticky;

From cfa8edf2c075d16e3b04f4a6463657eb777c623c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 13:19:12 +0300
Subject: [PATCH 006/122] chats work and look a bit better

---
 src/App.scss                             |  2 +-
 src/components/chat/chat.js              | 24 +++++++++++++-----------
 src/components/chat/chat.scss            |  1 +
 src/components/chat/chat_layout_utils.js |  1 -
 4 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index dbea74a0..5df4d57b 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -494,7 +494,7 @@ i[class*=icon-],
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 2;
+    z-index: 100;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     pointer-events: none;
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 59e884c4..91e5c98e 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -19,6 +19,8 @@ library.add(
   faChevronLeft
 )
 
+const scroller = () => document.getElementById('content')
+
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
 const SAFE_RESIZE_TIME_OFFSET = 100
@@ -46,7 +48,7 @@ const Chat = {
     window.addEventListener('resize', this.handleLayoutChange)
   },
   mounted () {
-    window.addEventListener('scroll', this.handleScroll)
+    scroller().addEventListener('scroll', this.handleScroll)
     if (typeof document.hidden !== 'undefined') {
       document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
     }
@@ -57,7 +59,7 @@ const Chat = {
     this.setChatLayout()
   },
   unmounted () {
-    window.removeEventListener('scroll', this.handleScroll)
+    scroller().removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('resize', this.handleLayoutChange)
     this.unsetChatLayout()
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
@@ -177,13 +179,13 @@ const Chat = {
 
       this.$nextTick(() => {
         const { offsetHeight = undefined } = this.lastScrollPosition
-        this.lastScrollPosition = getScrollPosition(document.getElementById('content'))
+        this.lastScrollPosition = getScrollPosition(scroller())
 
         const diff = this.lastScrollPosition.offsetHeight - offsetHeight
         if (diff < 0 || (!this.bottomedOut() && expand)) {
           this.$nextTick(() => {
-            document.getElementById('content').scrollTo({
-              top: document.getElementById('content').scrollTop - diff,
+            scroller().scrollTo({
+              top: scroller().scrollTop - diff,
               left: 0
             })
           })
@@ -192,7 +194,7 @@ const Chat = {
     },
     scrollDown (options = {}) {
       const { behavior = 'auto', forceRead = false } = options
-      const scrollable = document.getElementById('content')
+      const scrollable = scroller()
       if (!scrollable) { return }
       this.$nextTick(() => {
         scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
@@ -211,10 +213,10 @@ const Chat = {
       })
     },
     bottomedOut (offset) {
-      return isBottomedOut(document.getElementById('content'), offset)
+      return isBottomedOut(scroller(), offset)
     },
     reachedTop () {
-      const scrollable = document.getElementById('content')
+      const scrollable = scroller()
       return scrollable && scrollable.scrollTop <= 0
     },
     cullOlderCheck () {
@@ -246,8 +248,8 @@ const Chat = {
       }
     }, 200),
     handleScrollUp (positionBeforeLoading) {
-      const positionAfterLoading = getScrollPosition(document.getElementById('content'))
-      this.$refs.scrollable.scrollTo({
+      const positionAfterLoading = getScrollPosition(scroller())
+      scroller().scrollTo({
         top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
         left: 0
       })
@@ -268,7 +270,7 @@ const Chat = {
             chatService.clear(chatMessageService)
           }
 
-          const positionBeforeUpdate = getScrollPosition(document.getElementById('content'))
+          const positionBeforeUpdate = getScrollPosition(scroller())
           this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
             this.$nextTick(() => {
               if (fetchOlderMessages) {
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index c1f2dcf2..51bb3ea6 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -37,6 +37,7 @@
     bottom: 0;
     background-color: $fallback--bg;
     background-color: var(--bg, $fallback--bg);
+    z-index: 10;
   }
 
   .chat-view-heading {
diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js
index 5c4aa5bf..50a933ac 100644
--- a/src/components/chat/chat_layout_utils.js
+++ b/src/components/chat/chat_layout_utils.js
@@ -1,6 +1,5 @@
 // Captures a scroll position
 export const getScrollPosition = (el) => {
-  console.log(el)
   return {
     scrollTop: el.scrollTop,
     scrollHeight: el.scrollHeight,

From 0a606c2720734f941a22b14b3460aaa4a500db4b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 17:11:50 +0300
Subject: [PATCH 007/122] fix chat loading endlessly

---
 src/components/chat/chat.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 91e5c98e..5d2c1d09 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -6,7 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
 import chatService from '../../services/chat_service/chat_service.js'
 import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
-import { getScrollPosition, getNewTopPosition, isBottomedOut } from './chat_layout_utils.js'
+import { getScrollPosition, getNewTopPosition, isBottomedOut, isScrollable } from './chat_layout_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronDown,
@@ -281,7 +281,7 @@ const Chat = {
               // full height of the scrollable container.
               // If this is the case, we want to fetch the messages until the scrollable container
               // is fully populated so that the user has the ability to scroll up and load the history.
-              if (messages.length > 0) {
+              if (!isScrollable(scroller()) && messages.length > 0) {
                 this.fetchChat({ maxId: this.currentChatMessageService.minId })
               }
             })

From 52649bdabc0c15f8a9e40592cf3dbe49891bcde6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 17:15:30 +0300
Subject: [PATCH 008/122] cleanup & code splitting

---
 src/App.scss   | 241 +++----------------------------------------------
 src/panel.scss | 204 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 216 insertions(+), 229 deletions(-)
 create mode 100644 src/panel.scss

diff --git a/src/App.scss b/src/App.scss
index 5df4d57b..c8a7969c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -458,240 +458,12 @@ i[class*=icon-],
   }
 }
 
-.auto-size {
-  flex: 1;
-}
-
-.status.compact {
-  color: rgba(0, 0, 0, 0.42);
-  font-weight: 300;
-
-  p {
-    margin: 0;
-    font-size: 0.8em;
-  }
-}
-
-/* Panel */
-.panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  z-index: 0;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-
-  &::after,
-  & {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-  }
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
-    box-shadow: var(--panelShadow);
-    pointer-events: none;
-  }
-}
-
-.panel-body:empty::before {
-  content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
-  display: block;
-  margin: 1em;
-  text-align: center;
-}
-
-.panel-heading {
-  position: relative;
-  box-sizing: border-box;
-  display: flex;
-  flex: none;
-  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-  background-size: cover;
-  padding: 0.6em 0.6em;
-  text-align: left;
-  line-height: 28px;
-  color: var(--panelText);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-  align-items: baseline;
-  height: var(--panelHeadingHeight);
-  z-index: -2;
-
-  --panelHeadingHeight: 45px;
-
-  &.-flexible-height {
-    --panelHeadingHeight: auto;
-
-    &::after,
-    &::before {
-      display: none;
-    }
-  }
-
-  &.-sticky {
-    position: sticky;
-    top: 0;
-    z-index: 2;
-  }
-
-  &::after,
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    pointer-events: none;
-  }
-
-  &::after {
-    background-color: $fallback--fg;
-    background-color: var(--panel, $fallback--fg);
-    z-index: -2;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    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(--panelHeadingHeight), transparent var(--panelHeadingHeight));
-  }
-
-  .title {
-    flex: 1 0 auto;
-    font-size: 1.3em;
-  }
-
-  .faint {
-    background-color: transparent;
-    color: $fallback--faint;
-    color: var(--panelFaint, $fallback--faint);
-  }
-
-  .faint-link {
-    color: $fallback--faint;
-    color: var(--faintLink, $fallback--faint);
-  }
-
-  .alert {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
-  }
-
-  .button-default,
-  .alert {
-    // height: 100%;
-    line-height: 21px;
-    min-height: 0;
-    box-sizing: border-box;
-    margin: 0;
-    margin-left: 0.5em;
-    min-width: 1px;
-    align-self: stretch;
-  }
-
-  .button-default {
-    flex-shrink: 0;
-
-    &,
-    i[class*=icon-] {
-      color: $fallback--text;
-      color: var(--btnPanelText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--fg;
-      background-color: var(--btnPressedPanel, $fallback--fg);
-      color: $fallback--text;
-      color: var(--btnPressedPanelText, $fallback--text);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledPanelText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledPanelText, $fallback--text);
-    }
-  }
-
-  a,
-  .-link {
-    color: $fallback--link;
-    color: var(--panelLink, $fallback--link);
-  }
-}
-
-.panel-heading.stub {
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-}
-
-/* TODO Should remove timeline-footer from here when we refactor panels into
- * separate component and utilize slots
- */
-.panel-footer {
-  display: flex;
-  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-  flex: none;
-  padding: 0.6em 0.6em;
-  text-align: left;
-  line-height: 28px;
-  align-items: baseline;
-  border-width: 1px 0 0 0;
-  border-style: solid;
-  border-color: var(--border, $fallback--border);
-
-  .faint {
-    color: $fallback--faint;
-    color: var(--panelFaint, $fallback--faint);
-  }
-
-  a,
-  .-link {
-    color: $fallback--link;
-    color: var(--panelLink, $fallback--link);
-  }
-}
-
-.panel-body > p {
-  line-height: 18px;
-  padding: 1em;
-  margin: 0;
-}
+@import './panel.scss';
 
 .fa {
   color: grey;
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s;
-}
-
-.fade-enter-from,
-.fade-leave-active {
-  opacity: 0;
-}
-
 .sidebar-bounds {
   flex: 0;
   flex-basis: 35%;
@@ -938,3 +710,14 @@ i[class*=icon-],
     transform: translateX(0);
   }
 }
+
+// Vue transitions
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+
+.fade-enter-from,
+.fade-leave-active {
+  opacity: 0;
+}
diff --git a/src/panel.scss b/src/panel.scss
new file mode 100644
index 00000000..bb7af43a
--- /dev/null
+++ b/src/panel.scss
@@ -0,0 +1,204 @@
+.panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  z-index: 0;
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
+  &::after,
+  & {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+    box-shadow: var(--panelShadow);
+    pointer-events: none;
+  }
+}
+
+.panel-body:empty::before {
+  content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
+  display: block;
+  margin: 1em;
+  text-align: center;
+}
+
+.panel-heading {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex: none;
+  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+  background-size: cover;
+  padding: 0.6em 0.6em;
+  text-align: left;
+  line-height: 28px;
+  color: var(--panelText);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+  align-items: baseline;
+  height: var(--panelHeadingHeight);
+  z-index: -2;
+
+  --panelHeadingHeight: 45px;
+
+  &.-flexible-height {
+    --panelHeadingHeight: auto;
+
+    &::after,
+    &::before {
+      display: none;
+    }
+  }
+
+  &.-sticky {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  &::after {
+    background-color: $fallback--fg;
+    background-color: var(--panel, $fallback--fg);
+    z-index: -2;
+    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    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(--panelHeadingHeight), transparent var(--panelHeadingHeight));
+  }
+
+  .title {
+    flex: 1 0 auto;
+    font-size: 1.3em;
+  }
+
+  .faint {
+    background-color: transparent;
+    color: $fallback--faint;
+    color: var(--panelFaint, $fallback--faint);
+  }
+
+  .faint-link {
+    color: $fallback--faint;
+    color: var(--faintLink, $fallback--faint);
+  }
+
+  .alert {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+  }
+
+  .button-default,
+  .alert {
+    // height: 100%;
+    line-height: 21px;
+    min-height: 0;
+    box-sizing: border-box;
+    margin: 0;
+    margin-left: 0.5em;
+    min-width: 1px;
+    align-self: stretch;
+  }
+
+  .button-default {
+    flex-shrink: 0;
+
+    &,
+    i[class*=icon-] {
+      color: $fallback--text;
+      color: var(--btnPanelText, $fallback--text);
+    }
+
+    &:active {
+      background-color: $fallback--fg;
+      background-color: var(--btnPressedPanel, $fallback--fg);
+      color: $fallback--text;
+      color: var(--btnPressedPanelText, $fallback--text);
+    }
+
+    &:disabled {
+      color: $fallback--text;
+      color: var(--btnDisabledPanelText, $fallback--text);
+    }
+
+    &.toggled {
+      color: $fallback--text;
+      color: var(--btnToggledPanelText, $fallback--text);
+    }
+  }
+
+  a,
+  .-link {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link);
+  }
+}
+
+.panel-heading.stub {
+  border-radius: $fallback--panelRadius;
+  border-radius: var(--panelRadius, $fallback--panelRadius);
+}
+
+/* TODO Should remove timeline-footer from here when we refactor panels into
+ * separate component and utilize slots
+ */
+.panel-footer {
+  display: flex;
+  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
+  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  flex: none;
+  padding: 0.6em 0.6em;
+  text-align: left;
+  line-height: 28px;
+  align-items: baseline;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: var(--border, $fallback--border);
+
+  .faint {
+    color: $fallback--faint;
+    color: var(--panelFaint, $fallback--faint);
+  }
+
+  a,
+  .-link {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link);
+  }
+}
+
+.panel-body > p {
+  line-height: 18px;
+  padding: 1em;
+  margin: 0;
+}

From 835feea1633fa1a5f3ea6f28bc3760a345e52cf1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 17:44:30 +0300
Subject: [PATCH 009/122] fix random error that sometimes occurs

---
 src/components/chat_title/chat_title.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index a92028e8..06ad129d 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -15,7 +15,7 @@
     </router-link>
     <RichContent
       class="username"
-      :title="'@'+user.screen_name_ui"
+      :title="'@'+(user && user.screen_name_ui)"
       :html="htmlTitle"
       :emoji="user.emoji"
     />

From 9e5037c71564c041c6bf518109d21e84df435855 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 17:44:40 +0300
Subject: [PATCH 010/122] make chatlist header sticky

---
 src/components/chat_list/chat_list.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index f98b7ed2..58e8d0b3 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -6,7 +6,7 @@
     v-else
     class="chat-list panel panel-default"
   >
-    <div class="panel-heading">
+    <div class="panel-heading -sticky">
       <span class="title">
         {{ $t("chats.chats") }}
       </span>

From 4a068483ed9b1334780402cbe64dfa3f4a0e8a3a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 18:38:05 +0300
Subject: [PATCH 011/122] wide mode initial implementation + cleanup

---
 src/App.js                               |   8 +-
 src/App.scss                             | 127 ++++++++++++-----------
 src/App.vue                              |   6 +-
 src/boot/after_store.js                  |   7 +-
 src/components/about/about.vue           |   2 +-
 src/components/mobile_nav/mobile_nav.vue |   1 -
 src/components/user_card/user_card.vue   |   1 +
 src/modules/interface.js                 |  10 +-
 8 files changed, 89 insertions(+), 73 deletions(-)

diff --git a/src/App.js b/src/App.js
index 4a59f412..b2ec95d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -79,7 +79,7 @@ export default {
     hideShoutbox () {
       return this.$store.getters.mergedConfig.hideShoutbox
     },
-    isMobileLayout () { return this.$store.state.interface.mobileLayout },
+    layoutType () { return this.$store.state.interface.layoutType },
     privateMode () { return this.$store.state.instance.private },
     reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
     ...mapGetters(['mergedConfig'])
@@ -87,10 +87,12 @@ export default {
   methods: {
     updateMobileState () {
       const mobileLayout = windowWidth() <= 800
+      const wideLayout = windowWidth() >= 1300
       const layoutHeight = windowHeight()
-      const changed = mobileLayout !== this.isMobileLayout
+      const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
+      const changed = layoutType !== this.layoutType
       if (changed) {
-        this.$store.dispatch('setMobileLayout', mobileLayout)
+        this.$store.dispatch('setLayoutType', layoutType)
       }
       this.$store.dispatch('setLayoutHeight', layoutHeight)
     }
diff --git a/src/App.scss b/src/App.scss
index c8a7969c..e32a2d36 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -63,11 +63,11 @@ nav {
 }
 
 #sidebar {
-  display: grid;
-  grid-template-columns: 100%;
-  row-gap: 1em;
   grid-area: sidebar;
-  align-content: start;
+
+  @media all and (max-width: 800px) {
+    display: none;
+  }
 }
 
 #main-scroller {
@@ -88,6 +88,19 @@ nav {
   background-position: 50%;
 }
 
+.underlay {
+  grid-column-start: 1;
+  grid-column-end: span 3;
+  grid-row-start: 1;
+  grid-row-end: 1;
+  margin: 0 -0.5em;
+  padding: 0 0.5em;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0.15);
+  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
+  z-index: -2000;
+}
+
 .app-layout {
   position: relative;
   display: grid;
@@ -103,44 +116,66 @@ nav {
   justify-content: center;
 
   --miniColumn: 345px;
-  --maxiColumn: minmax(auto, 615px);
+  --maxiColumn: minmax(345px, 615px);
 
-  &.-reverse {
+  .column {
+    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;
+    align-content: start;
+
+    &.-scrollable {
+      padding-top: 10px;
+      position: sticky;
+      top: 0;
+      max-height: calc(100vh - var(--navbar-height));
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      .panel-heading.-sticky {
+        top: -10px;
+      }
+    }
+  }
+
+  .column-inner {
+    display: grid;
+    grid-template-columns: 100%;
+    box-sizing: border-box;
+    row-gap: 1em;
+    align-content: start;
+  }
+
+  &.-reverse:not(.-wide):not(.-mobile) {
     grid-template-columns: var(--maxiColumn) var(--miniColumn);
     grid-template-areas: "content sidebar";
   }
-}
 
-.underlay {
-  grid-column-start: 1;
-  grid-column-end: span 2;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  margin: 0 -0.5em;
-  padding: 0 0.5em;
-  pointer-events: none;
-  background-color: rgba(0, 0, 0, 0.15);
-  background-color: var(--underlay, rgba(0, 0, 0, 0.15));
-  z-index: -2000;
-}
+  &.-wide {
+    grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
+    grid-template-areas: "sidebar content notifs";
 
-.column {
-  box-sizing: border-box;
-  padding-top: 10px;
-  grid-row-start: 1;
-  grid-row-end: 1;
-  margin: 0 0.5em;
+    &.-reverse {
+      grid-template-areas: "notifs content sidebar";
+    }
+  }
 
-  &.-scrollable {
-    padding-top: 10px;
-    position: sticky;
-    top: 0;
-    max-height: calc(100vh - var(--navbar-height));
-    overflow-y: auto;
-    overflow-x: hidden;
+  &.-mobile {
+    grid-template-columns: 100vw;
+    grid-template-areas: "content";
+    padding: 0;
 
-    .panel-heading.-sticky {
-      top: -10px;
+    .column {
+      margin: 0;
+    }
+
+    .underlay {
+      display: none;
     }
   }
 }
@@ -464,17 +499,6 @@ i[class*=icon-],
   color: grey;
 }
 
-.sidebar-bounds {
-  flex: 0;
-  flex-basis: 35%;
-}
-
-.sidebar-flexer {
-  flex: 1;
-  flex-basis: 345px;
-  width: 365px;
-}
-
 .mobile-shown {
   display: none;
 }
@@ -652,19 +676,6 @@ i[class*=icon-],
   .mobile-hidden {
     display: none;
   }
-
-  .panel-switcher {
-    display: flex;
-  }
-
-  .menu-button {
-    display: block;
-    margin-right: 0.8em;
-  }
-
-  .main {
-    margin-bottom: 7em;
-  }
 }
 
 @keyframes spin {
diff --git a/src/App.vue b/src/App.vue
index 71de2a36..f87d895b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,12 +7,12 @@
       id="app_bg_wrapper"
       class="app-bg-wrapper"
     />
-    <MobileNav v-if="isMobileLayout" />
+    <MobileNav v-if="layoutType === 'mobile'" />
     <DesktopNav v-else />
     <div
       id="content"
       class="app-layout container"
-      :class="{ '-reverse': reverseLayout }"
+      :class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
     >
       <div class="underlay"/>
       <div
@@ -20,7 +20,7 @@
         class="column -scrollable -mini mobile-hidden"
       >
         <user-panel />
-        <template v-if="!isMobileLayout">
+        <template v-if="layoutType !== 'mobile'">
           <nav-panel />
           <instance-specific-panel v-if="showInstanceSpecificPanel" />
           <features-panel v-if="!currentUser && showFeaturesPanel" />
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 76832708..ce96141d 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -332,8 +332,11 @@ const checkOAuthToken = async ({ store }) => {
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
-  const width = windowWidth()
-  store.dispatch('setMobileLayout', width <= 800)
+  // TODO cleanup copypasta
+  const mobileLayout = windowWidth() <= 800
+  const wideLayout = windowWidth() >= 1300
+  const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
+  store.dispatch('setLayoutType', layoutType)
 
   FaviconService.initFaviconService()
 
diff --git a/src/components/about/about.vue b/src/components/about/about.vue
index 518f6184..5d5d6479 100644
--- a/src/components/about/about.vue
+++ b/src/components/about/about.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="column-inner">
     <instance-specific-panel v-if="showInstanceSpecificPanel" />
     <staff-panel />
     <terms-of-service-panel />
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 1c28ef77..09680910 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -96,7 +96,6 @@
     grid-template-rows: 50px;
     grid-template-columns: 2fr auto;
     width: 100%;
-    position: fixed;
     box-sizing: border-box;
   }
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 6e044bb6..43a660e1 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -289,6 +289,7 @@
 
 .user-card {
   position: relative;
+  z-index: 1;
 
   &:hover {
     --_still-image-img-visibility: visible;
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 17277331..9df72b88 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -13,7 +13,7 @@ const defaultState = {
       window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
     )
   },
-  mobileLayout: false,
+  layoutType: 'normal',
   globalNotices: [],
   layoutHeight: 0,
   lastTimeline: null
@@ -36,8 +36,8 @@ const interfaceMod = {
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
     },
-    setMobileLayout (state, value) {
-      state.mobileLayout = value
+    setLayoutType (state, value) {
+      state.layoutType = value
     },
     closeSettingsModal (state) {
       state.settingsModalState = 'hidden'
@@ -86,8 +86,8 @@ const interfaceMod = {
     setNotificationPermission ({ commit }, permission) {
       commit('setNotificationPermission', permission)
     },
-    setMobileLayout ({ commit }, value) {
-      commit('setMobileLayout', value)
+    setLayoutType ({ commit }, value) {
+      commit('setLayoutType', value)
     },
     closeSettingsModal ({ commit }) {
       commit('closeSettingsModal')

From 6a319154d94c51f0464e0de31c6f88fbe20defea Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 19:22:15 +0300
Subject: [PATCH 012/122] teleport bread

---
 src/App.js                                    |   4 +-
 src/App.scss                                  |  10 +-
 src/App.vue                                   |   9 +-
 src/components/mobile_nav/mobile_nav.js       |   3 +-
 src/components/mobile_nav/mobile_nav.vue      |   5 +-
 src/components/notifications/notifications.js |  15 ++-
 .../notifications/notifications.vue           | 120 +++++++++---------
 7 files changed, 90 insertions(+), 76 deletions(-)

diff --git a/src/App.js b/src/App.js
index b2ec95d4..827692a6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
-import Notifications from './components/notifications/notifications.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
@@ -16,13 +15,14 @@ import PostStatusModal from './components/post_status_modal/post_status_modal.vu
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
 import { mapGetters } from 'vuex'
+import { defineAsyncComponent } from 'vue'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
     NavPanel,
-    Notifications,
+    Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
diff --git a/src/App.scss b/src/App.scss
index e32a2d36..1867a54d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -64,10 +64,10 @@ nav {
 
 #sidebar {
   grid-area: sidebar;
+}
 
-  @media all and (max-width: 800px) {
-    display: none;
-  }
+#notifs-column {
+  grid-area: notifs;
 }
 
 #main-scroller {
@@ -177,6 +177,10 @@ nav {
     .underlay {
       display: none;
     }
+
+    #sidebar {
+      display: none;
+    }
   }
 }
 
diff --git a/src/App.vue b/src/App.vue
index f87d895b..70084538 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,23 +9,21 @@
     />
     <MobileNav v-if="layoutType === 'mobile'" />
     <DesktopNav v-else />
+    <notifications v-if="currentUser" />
     <div
       id="content"
       class="app-layout container"
       :class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
     >
       <div class="underlay"/>
-      <div
-        id="sidebar"
-        class="column -scrollable -mini mobile-hidden"
-      >
+      <div id="sidebar" class="column -scrollable">
         <user-panel />
         <template v-if="layoutType !== 'mobile'">
           <nav-panel />
           <instance-specific-panel v-if="showInstanceSpecificPanel" />
           <features-panel v-if="!currentUser && showFeaturesPanel" />
           <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
-          <notifications v-if="currentUser" />
+          <div id="notifs-sidebar" />
         </template>
       </div>
       <div id="main-scroller" class="column main">
@@ -42,6 +40,7 @@
         </div>
         <router-view />
       </div>
+      <div id="notifs-column" class="column -scrollable"/>
       <media-modal />
     </div>
     <shout-panel
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 9e736cfb..877d52a9 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -78,7 +78,8 @@ const MobileNav = {
       this.$store.dispatch('logout')
     },
     markNotificationsAsSeen () {
-      this.$refs.notifications.markAsSeen()
+      // this.$refs.notifications.markAsSeen()
+      this.$store.dispatch('markNotificationsAsSeen')
     },
     onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
       if (scrollTop + clientHeight >= scrollHeight) {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 09680910..6c810bba 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -69,12 +69,9 @@
       </div>
       <div
         class="mobile-notifications"
+        id="mobile-notifications"
         @scroll="onScroll"
       >
-        <Notifications
-          ref="notifications"
-          :no-heading="true"
-        />
       </div>
     </div>
     <SideDrawer
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c8f1ebcb..2bb8a1d1 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -23,8 +23,6 @@ const Notifications = {
     NotificationFilters
   },
   props: {
-    // Disables display of panel header
-    noHeading: Boolean,
     // Disables panel styles, unread mark, potentially other notification-related actions
     // meant for "Interactions" timeline
     minimalMode: Boolean,
@@ -65,6 +63,19 @@ const Notifications = {
     loading () {
       return this.$store.state.statuses.notifications.loading
     },
+    noHeading () {
+      const { layoutType } = this.$store.state.interface
+      console.log(layoutType)
+      return layoutType === 'mobile'
+    },
+    teleportTarget () {
+      const { layoutType } = this.$store.state.interface
+      const map = {
+        wide: '#notifs-column',
+        mobile: '#mobile-notifications'
+      }
+      return map[layoutType] || '#notifs-sidebar'
+    },
     notificationsToDisplay () {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 9d8fa059..f50d3d38 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,69 +1,71 @@
 <template>
-  <div
-    :class="{ minimal: minimalMode }"
-    class="Notifications"
-  >
-    <div :class="mainClass">
-      <div
-        v-if="!noHeading"
-        class="notifications-heading panel-heading -sticky"
-      >
-        <div class="title">
-          {{ $t('notifications.notifications') }}
-          <span
-            v-if="unseenCount"
-            class="badge badge-notification unseen-count"
-          >{{ unseenCount }}</span>
-        </div>
-        <button
-          v-if="unseenCount"
-          class="button-default read-button"
-          @click.prevent="markAsSeen"
-        >
-          {{ $t('notifications.read') }}
-        </button>
-        <NotificationFilters />
-      </div>
-      <div class="panel-body">
+  <teleport :to="teleportTarget">
+    <div
+      :class="{ minimal: minimalMode }"
+      class="Notifications"
+    >
+      <div :class="mainClass">
         <div
-          v-for="notification in notificationsToDisplay"
-          :key="notification.id"
-          class="notification"
-          :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
+          v-if="!noHeading"
+          class="notifications-heading panel-heading -sticky"
         >
-          <div class="notification-overlay" />
-          <notification :notification="notification" />
-        </div>
-      </div>
-      <div class="panel-footer notifications-footer">
-        <div
-          v-if="bottomedOut"
-          class="new-status-notification text-center faint"
-        >
-          {{ $t('notifications.no_more_notifications') }}
-        </div>
-        <button
-          v-else-if="!loading"
-          class="button-unstyled -link -fullwidth"
-          @click.prevent="fetchOlderNotifications()"
-        >
-          <div class="new-status-notification text-center">
-            {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
+          <div class="title">
+            {{ $t('notifications.notifications') }}
+            <span
+              v-if="unseenCount"
+              class="badge badge-notification unseen-count"
+            >{{ unseenCount }}</span>
+          </div>
+          <button
+            v-if="unseenCount"
+            class="button-default read-button"
+            @click.prevent="markAsSeen"
+          >
+            {{ $t('notifications.read') }}
+          </button>
+          <NotificationFilters />
+        </div>
+        <div class="panel-body">
+          <div
+            v-for="notification in notificationsToDisplay"
+            :key="notification.id"
+            class="notification"
+            :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
+          >
+            <div class="notification-overlay" />
+            <notification :notification="notification" />
+          </div>
+        </div>
+        <div class="panel-footer notifications-footer">
+          <div
+            v-if="bottomedOut"
+            class="new-status-notification text-center faint"
+          >
+            {{ $t('notifications.no_more_notifications') }}
+          </div>
+          <button
+            v-else-if="!loading"
+            class="button-unstyled -link -fullwidth"
+            @click.prevent="fetchOlderNotifications()"
+          >
+            <div class="new-status-notification text-center">
+              {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
+            </div>
+          </button>
+          <div
+            v-else
+            class="new-status-notification text-center"
+          >
+            <FAIcon
+              icon="circle-notch"
+              spin
+              size="lg"
+            />
           </div>
-        </button>
-        <div
-          v-else
-          class="new-status-notification text-center"
-        >
-          <FAIcon
-            icon="circle-notch"
-            spin
-            size="lg"
-          />
         </div>
       </div>
     </div>
-  </div>
+  </teleport>
 </template>
 
 <script src="./notifications.js"></script>

From 8d623ab1ea098b107c8aa22f01a410066f6b0d60 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Apr 2022 11:36:14 +0300
Subject: [PATCH 013/122] fix some scroll issues

---
 src/components/timeline/timeline.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 9056319b..4b2c1e81 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -12,6 +12,8 @@ library.add(
   faCog
 )
 
+const scroller = () => document.getElementById('content')
+
 const Timeline = {
   props: [
     'timeline',
@@ -89,7 +91,7 @@ const Timeline = {
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
-    document.getElementById('content').addEventListener('scroll', this.handleScroll)
+    scroller().addEventListener('scroll', this.handleScroll)
 
     if (store.state.api.fetchers[this.timelineName]) { return false }
 
@@ -111,7 +113,7 @@ const Timeline = {
     setTimeout(this.determineVisibleStatuses, 250)
   },
   unmounted () {
-    document.getElementById('content').removeEventListener('scroll', this.handleScroll)
+    scroller().removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('keydown', this.handleShortKey)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
@@ -141,6 +143,7 @@ const Timeline = {
         this.$store.commit('showNewStatuses', { timeline: this.timelineName })
         this.paused = false
       }
+      scroller().scrollTop = 0
     },
     fetchOlderStatuses: throttle(function () {
       const store = this.$store
@@ -228,8 +231,8 @@ const Timeline = {
       }
       if (count > 0) {
         // only 'stream' them when you're scrolled to the top
-        const doc = document.documentElement
-        const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
+        const doc = document.getElementById('content')
+        const top = (doc.scrollTop) - (doc.clientTop || 0)
         if (top < 15 &&
             !this.paused &&
             !(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)

From d3d219f15d4bac88f58d4fd0fed6f798b81cca82 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Apr 2022 14:37:16 +0300
Subject: [PATCH 014/122] fix interactions page

---
 src/components/notifications/notifications.js  | 3 +--
 src/components/notifications/notifications.vue | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 2bb8a1d1..fb2579a5 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -65,8 +65,7 @@ const Notifications = {
     },
     noHeading () {
       const { layoutType } = this.$store.state.interface
-      console.log(layoutType)
-      return layoutType === 'mobile'
+      return this.minimalMode || layoutType === 'mobile'
     },
     teleportTarget () {
       const { layoutType } = this.$store.state.interface
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index f50d3d38..bfc97dc0 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport :to="teleportTarget">
+  <teleport :disabled="minimalMode" :to="teleportTarget">
     <div
       :class="{ minimal: minimalMode }"
       class="Notifications"

From b5ded67c0608724fe23be15e346dd6842819635f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Apr 2022 15:11:23 +0300
Subject: [PATCH 015/122] options to enable scrollbars and disable sticky
 headers

---
 src/App.js                                    |  2 ++
 src/App.scss                                  | 27 ++++++++++++++++---
 src/App.vue                                   |  6 ++---
 .../settings_modal/tabs/general_tab.vue       | 10 +++++++
 src/components/timeline/timeline.js           |  2 +-
 src/modules/config.js                         |  2 ++
 src/panel.scss                                |  3 +--
 7 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/App.js b/src/App.js
index 26a188f4..75fa3a3c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -82,6 +82,8 @@ export default {
     layoutType () { return this.$store.state.interface.layoutType },
     privateMode () { return this.$store.state.instance.private },
     reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
+    noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
+    showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
diff --git a/src/App.scss b/src/App.scss
index 1867a54d..ac6cf3f4 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -59,6 +59,7 @@ nav {
 #content {
   overscroll-behavior-y: none;
   overflow-y: auto;
+  overflow-x: hidden;
   position: sticky;
 }
 
@@ -136,6 +137,19 @@ nav {
       max-height: calc(100vh - var(--navbar-height));
       overflow-y: auto;
       overflow-x: hidden;
+      margin-left: -2em;
+      padding-left: 2.5em;
+
+      &:not(.-show-scrollbar) {
+        scrollbar-width: none;
+        margin-right: -2em;
+        padding-right: 2.5em;
+
+        &::-webkit-scrollbar {
+          display: block;
+          width: 0;
+        }
+      }
 
       .panel-heading.-sticky {
         top: -10px;
@@ -143,6 +157,15 @@ nav {
     }
   }
 
+  &.-no-sticky-headers {
+    .column {
+      .panel-heading.-sticky {
+        position: relative;
+        top: 0;
+      }
+    }
+  }
+
   .column-inner {
     display: grid;
     grid-template-columns: 100%;
@@ -186,10 +209,6 @@ nav {
 
 #content,
 .column.-scrollable {
-  &::-webkit-scrollbar {
-    display: block;
-    width: 0;
-  }
 }
 
 .text-center {
diff --git a/src/App.vue b/src/App.vue
index 70084538..243a3314 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,10 +13,10 @@
     <div
       id="content"
       class="app-layout container"
-      :class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
+      :class="[{ '-reverse': reverseLayout, '-no-sticky-headers': noSticky }, '-' + layoutType]"
     >
       <div class="underlay"/>
-      <div id="sidebar" class="column -scrollable">
+      <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
         <user-panel />
         <template v-if="layoutType !== 'mobile'">
           <nav-panel />
@@ -40,7 +40,7 @@
         </div>
         <router-view />
       </div>
-      <div id="notifs-column" class="column -scrollable"/>
+      <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
       <media-modal />
     </div>
     <shout-panel
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index a2c6bffa..e29bc7cf 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -60,6 +60,16 @@
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 4b2c1e81..bfee2382 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -91,7 +91,7 @@ const Timeline = {
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
-    scroller().addEventListener('scroll', this.handleScroll)
+    scroller() && scroller().addEventListener('scroll', this.handleScroll)
 
     if (store.state.api.fetchers[this.timelineName]) { return false }
 
diff --git a/src/modules/config.js b/src/modules/config.js
index ff5ef270..6d2e6ce0 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -73,6 +73,8 @@ export const defaultState = {
   playVideosInModal: false,
   useOneClickNsfw: false,
   useContainFit: true,
+  disableStickyHeaders: false,
+  showScrollbars: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default
diff --git a/src/panel.scss b/src/panel.scss
index bb7af43a..bd56858f 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -28,8 +28,7 @@
 
 .panel-body:empty::before {
   content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
-  display: block;
-  margin: 1em;
+  display: block; margin: 1em;
   text-align: center;
 }
 

From b8b7ae856463b69baf1e08499aea130e2f1174ef Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Apr 2022 16:00:28 +0300
Subject: [PATCH 016/122] fancy scrollbars

---
 src/App.scss                              | 61 +++++++++++++++++++++--
 src/services/style_setter/style_setter.js |  8 +--
 2 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index ac6cf3f4..b02d7f25 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -25,6 +25,63 @@ body {
   }
 }
 
+* {
+  scrollbar-color: var(--btn) transparent;
+
+  &::-webkit-scrollbar {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-button,
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--btn);
+    box-shadow: var(--buttonShadow);
+  }
+
+  &::-webkit-scrollbar-button {
+    --___bgPadding: 2px;
+
+    color: var(--btnText);
+    background-repeat: no-repeat, no-repeat;
+
+    &:horizontal {
+      background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
+
+      &:increment {
+        background-image:
+          linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
+          linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
+        background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
+      }
+
+      &:decrement {
+        background-image:
+          linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
+          linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
+        background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
+      }
+    }
+
+    &:vertical {
+      background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
+
+      &:increment {
+        background-image:
+          linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
+          linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
+        background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
+      }
+
+      &:decrement {
+        background-image:
+          linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
+          linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
+        background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
+      }
+    }
+  }
+}
+
 a {
   text-decoration: none;
   color: $fallback--link;
@@ -207,10 +264,6 @@ nav {
   }
 }
 
-#content,
-.column.-scrollable {
-}
-
 .text-center {
   text-align: center;
 }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index f75e6916..543aa874 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -13,10 +13,10 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  styleSheet.insertRule(`body { ${rules.radii} }`, 'index-max')
-  styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max')
-  styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max')
-  styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max')
+  styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
+  styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
+  styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
+  styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   body.classList.remove('hidden')
 }
 

From 6b67c095bfe837bcc2ab99944f028480e0823d0a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Apr 2022 16:07:47 +0300
Subject: [PATCH 017/122] make scrollbars use button roundness

---
 src/App.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.scss b/src/App.scss
index b02d7f25..1e8f7cdd 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -43,6 +43,7 @@ body {
 
     color: var(--btnText);
     background-repeat: no-repeat, no-repeat;
+    border-radius: var(--btnRadius);
 
     &:horizontal {
       background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));

From 4007ddbf325901f5ab27ba85a06c5c311ec6ea0a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Apr 2022 16:10:35 +0300
Subject: [PATCH 018/122] oops

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

diff --git a/src/App.scss b/src/App.scss
index 1e8f7cdd..87ef1f06 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -36,6 +36,7 @@ body {
   &::-webkit-scrollbar-thumb {
     background-color: var(--btn);
     box-shadow: var(--buttonShadow);
+    border-radius: var(--btnRadius);
   }
 
   &::-webkit-scrollbar-button {
@@ -43,7 +44,6 @@ body {
 
     color: var(--btnText);
     background-repeat: no-repeat, no-repeat;
-    border-radius: var(--btnRadius);
 
     &:horizontal {
       background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));

From 51c996bd7e964802233f031090a97b6e3786794d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Apr 2022 16:18:39 +0300
Subject: [PATCH 019/122] boost z-index of popover

---
 src/components/popover/popover.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 332a0398..4b3ad7da 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -37,7 +37,7 @@
 }
 
 .popover {
-  z-index: 8;
+  z-index: 90;
   position: absolute;
   min-width: 0;
 }

From c71cf72eea0fe8cd8d5af2cd9b5922cce5884cab Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Apr 2022 16:39:32 +0300
Subject: [PATCH 020/122] fix mobile view

---
 src/App.scss | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 87ef1f06..dd3d8cbb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -255,11 +255,9 @@ nav {
       margin: 0;
     }
 
-    .underlay {
-      display: none;
-    }
-
-    #sidebar {
+    .underlay,
+    #sidebar,
+    #notifs-column {
       display: none;
     }
   }

From 6109fab14e4dac3a85ffa51ddfcd7e3aaef5149a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 8 Apr 2022 10:17:23 +0300
Subject: [PATCH 021/122] cleanup, fix some things, try to disable scrollbars
 on mobile

---
 src/App.scss                               | 26 +++++++++++++---------
 src/App.vue                                |  2 +-
 src/components/chat/chat.scss              |  9 --------
 src/components/media_modal/media_modal.vue |  2 +-
 src/components/modal/modal.vue             |  2 +-
 5 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index dd3d8cbb..0deac2b1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -116,7 +116,7 @@ nav {
 
 #content {
   overscroll-behavior-y: none;
-  overflow-y: auto;
+  overflow-y: scroll;
   overflow-x: hidden;
   position: sticky;
 }
@@ -198,19 +198,23 @@ nav {
       margin-left: -2em;
       padding-left: 2.5em;
 
-      &:not(.-show-scrollbar) {
-        scrollbar-width: none;
-        margin-right: -2em;
-        padding-right: 2.5em;
+      // Only show custom scrollbars on devices which
+      // have a cursor/pointer to operate them
+      @media (pointer: fine) {
+        &:not(.-show-scrollbar) {
+          scrollbar-width: none;
+          margin-right: -2em;
+          padding-right: 2.5em;
 
-        &::-webkit-scrollbar {
-          display: block;
-          width: 0;
+          &::-webkit-scrollbar {
+            display: block;
+            width: 0;
+          }
         }
-      }
 
-      .panel-heading.-sticky {
-        top: -10px;
+        .panel-heading.-sticky {
+          top: -10px;
+        }
       }
     }
   }
diff --git a/src/App.vue b/src/App.vue
index 243a3314..b5f6e7d3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -41,8 +41,8 @@
         <router-view />
       </div>
       <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/>
-      <media-modal />
     </div>
+    <media-modal />
     <shout-panel
       v-if="currentUser && shout && !hideShoutbox"
       :floating="true"
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 51bb3ea6..85e9f59d 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -133,18 +133,9 @@
     .chat-view-heading {
       box-sizing: border-box;
       position: static;
-      z-index: 9999;
       top: 0;
       margin-top: 0;
       border-radius: 0;
-
-      /* This practically overlays the panel heading color over panel background
-       * color. This is needed because we allow transparent panel background and
-       * it doesn't work well in this "disjointed panel header" case
-       */
-      background:
-        linear-gradient(to top, var(--panel), var(--panel)),
-        linear-gradient(to top, var(--bg), var(--bg));
       height: 50px;
     }
 
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index 708a43c6..c7dcd007 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em;
 $modal-view-button-icon-margin: 0.5em;
 
 .modal-view.media-modal-view {
-  z-index: 1001;
+  z-index: 9000;
   flex-direction: column;
 
   .modal-view-button-arrow,
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 2b58913f..9394efff 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -35,7 +35,7 @@ export default {
 
 <style lang="scss">
 .modal-view {
-  z-index: 1000;
+  z-index: 2000;
   position: fixed;
   top: 0;
   left: 0;

From 282e6812b38b5354b1f5a77297cf77ca7365397e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 8 Apr 2022 13:31:29 +0300
Subject: [PATCH 022/122] fix chats, boost popover's z-index some more

---
 src/components/chat/chat.scss      | 43 ------------------------------
 src/components/popover/popover.vue |  2 +-
 2 files changed, 1 insertion(+), 44 deletions(-)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 85e9f59d..34a335fe 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -108,47 +108,4 @@
       }
     }
   }
-
-  @media all and (max-width: 800px) {
-    height: 100%;
-    overflow: hidden;
-
-    .chat-view-inner {
-      overflow: hidden;
-      height: 100%;
-      margin-top: 0;
-      margin-left: 0;
-      margin-right: 0;
-    }
-
-    .chat-view-body {
-      display: flex;
-      min-height: auto;
-      overflow: hidden;
-      height: 100%;
-      margin: 0;
-      border-radius: 0;
-    }
-
-    .chat-view-heading {
-      box-sizing: border-box;
-      position: static;
-      top: 0;
-      margin-top: 0;
-      border-radius: 0;
-      height: 50px;
-    }
-
-    .scrollable-message-list {
-      display: unset;
-      overflow-y: scroll;
-      overflow-x: hidden;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .footer {
-      position: sticky;
-      bottom: auto;
-    }
-  }
 }
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 4b3ad7da..3f2a81f5 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -37,7 +37,7 @@
 }
 
 .popover {
-  z-index: 90;
+  z-index: 500;
   position: absolute;
   min-width: 0;
 }

From 5b478563296f7ebd5eef40d118d71fdb70f460b0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 8 Apr 2022 13:34:11 +0300
Subject: [PATCH 023/122] fix scrollbars for real now

---
 src/App.scss | 118 +++++++++++++++++++++++++--------------------------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 0deac2b1..048d9189 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -25,59 +25,61 @@ body {
   }
 }
 
-* {
-  scrollbar-color: var(--btn) transparent;
+@media (any-pointer: fine) {
+  * {
+    scrollbar-color: var(--btn) transparent;
 
-  &::-webkit-scrollbar {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-button,
-  &::-webkit-scrollbar-thumb {
-    background-color: var(--btn);
-    box-shadow: var(--buttonShadow);
-    border-radius: var(--btnRadius);
-  }
-
-  &::-webkit-scrollbar-button {
-    --___bgPadding: 2px;
-
-    color: var(--btnText);
-    background-repeat: no-repeat, no-repeat;
-
-    &:horizontal {
-      background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
-
-      &:increment {
-        background-image:
-          linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
-          linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
-        background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
-      }
-
-      &:decrement {
-        background-image:
-          linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
-          linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
-        background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
-      }
+    &::-webkit-scrollbar {
+      background: transparent;
     }
 
-    &:vertical {
-      background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
+    &::-webkit-scrollbar-button,
+    &::-webkit-scrollbar-thumb {
+      background-color: var(--btn);
+      box-shadow: var(--buttonShadow);
+      border-radius: var(--btnRadius);
+    }
 
-      &:increment {
-        background-image:
-          linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
-          linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
-        background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
+    &::-webkit-scrollbar-button {
+      --___bgPadding: 2px;
+
+      color: var(--btnText);
+      background-repeat: no-repeat, no-repeat;
+
+      &:horizontal {
+        background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
+
+        &:increment {
+          background-image:
+            linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
+            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
+          background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
+        }
+
+        &:decrement {
+          background-image:
+            linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
+            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
+          background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
+        }
       }
 
-      &:decrement {
-        background-image:
-          linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
-          linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
-        background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
+      &:vertical {
+        background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
+
+        &:increment {
+          background-image:
+            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
+            linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
+          background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
+        }
+
+        &:decrement {
+          background-image:
+            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
+            linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
+          background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
+        }
       }
     }
   }
@@ -200,21 +202,19 @@ nav {
 
       // Only show custom scrollbars on devices which
       // have a cursor/pointer to operate them
-      @media (pointer: fine) {
-        &:not(.-show-scrollbar) {
-          scrollbar-width: none;
-          margin-right: -2em;
-          padding-right: 2.5em;
+      &:not(.-show-scrollbar) {
+        scrollbar-width: none;
+        margin-right: -2em;
+        padding-right: 2.5em;
 
-          &::-webkit-scrollbar {
-            display: block;
-            width: 0;
-          }
+        &::-webkit-scrollbar {
+          display: block;
+          width: 0;
         }
+      }
 
-        .panel-heading.-sticky {
-          top: -10px;
-        }
+      .panel-heading.-sticky {
+        top: -10px;
       }
     }
   }

From 4750d9bb4c67b5a759a1eb0fde64d0270553e74c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 14:23:03 +0300
Subject: [PATCH 024/122] fix notifs' shadow peeking in when closed on mobile

---
 src/components/mobile_nav/mobile_nav.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6c810bba..4976105d 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"
     >
@@ -148,8 +148,9 @@
     z-index: 1001;
     -webkit-overflow-scrolling: touch;
 
-    &.closed {
+    &.-closed {
       transform: translateX(100%);
+      box-shadow: none;
     }
   }
 

From 0ff34f8a5ae88d3e0a3456a7054273e361689af6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 14:23:30 +0300
Subject: [PATCH 025/122] clean up and organize CSS, use ems for widths, use
 vars more

---
 src/App.scss | 29 +++++++++++++++++------------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 048d9189..bed67a1f 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,10 @@ nav {
 }
 
 .app-layout {
+  --miniColumn: 25em;
+  --maxiColumn: minmax(var(--miniColumn), 45em);
+  --columnGap: 1em;
+
   position: relative;
   display: grid;
   grid-template-columns: var(--miniColumn) var(--maxiColumn);
@@ -173,39 +177,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;

From 684650e14fd88e47180b2feda6c5cff9171eb566 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 14:47:47 +0300
Subject: [PATCH 026/122] restore margins for inline convos

---
 src/App.scss                                 | 1 +
 src/components/conversation/conversation.vue | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/App.scss b/src/App.scss
index bed67a1f..678c4410 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -166,6 +166,7 @@ nav {
   --miniColumn: 25em;
   --maxiColumn: minmax(var(--miniColumn), 45em);
   --columnGap: 1em;
+  --status-margin: 0.75em;
 
   position: relative;
   display: grid;
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index ccc523a2..04078cf4 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>

From 2df48b16438a5bfaa2650657f605cc58a540abac Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 17:47:54 +0300
Subject: [PATCH 027/122] revert timeline changes

---
 src/components/timeline/timeline.js | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index bfee2382..a3931d32 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -12,8 +12,6 @@ library.add(
   faCog
 )
 
-const scroller = () => document.getElementById('content')
-
 const Timeline = {
   props: [
     'timeline',
@@ -91,7 +89,7 @@ const Timeline = {
     const credentials = store.state.users.currentUser.credentials
     const showImmediately = this.timeline.visibleStatuses.length === 0
 
-    scroller() && scroller().addEventListener('scroll', this.handleScroll)
+    window.addEventListener('scroll', this.handleScroll)
 
     if (store.state.api.fetchers[this.timelineName]) { return false }
 
@@ -113,7 +111,7 @@ const Timeline = {
     setTimeout(this.determineVisibleStatuses, 250)
   },
   unmounted () {
-    scroller().removeEventListener('scroll', this.handleScroll)
+    window.removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('keydown', this.handleShortKey)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
@@ -143,7 +141,7 @@ const Timeline = {
         this.$store.commit('showNewStatuses', { timeline: this.timelineName })
         this.paused = false
       }
-      scroller().scrollTop = 0
+      window.scrollTop = 0
     },
     fetchOlderStatuses: throttle(function () {
       const store = this.$store
@@ -231,8 +229,8 @@ const Timeline = {
       }
       if (count > 0) {
         // only 'stream' them when you're scrolled to the top
-        const doc = document.getElementById('content')
-        const top = (doc.scrollTop) - (doc.clientTop || 0)
+        const doc = document.documentElement
+        const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
         if (top < 15 &&
             !this.paused &&
             !(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)

From 77505fa7c9f9188ab224e46fafcf5163a45f732b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 17:48:02 +0300
Subject: [PATCH 028/122] revert layout back to scrollable body

---
 src/App.scss | 43 ++++++++++++++++++-------------------------
 1 file changed, 18 insertions(+), 25 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 678c4410..590c053f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,16 +1,15 @@
 // stylelint-disable rscss/class-format
 @import './_variables.scss';
 
+:root {
+  --navbar-height: 50px;
+}
+
 html {
   font-size: 14px;
-  overflow: hidden;
-  max-height: 100vh;
 }
 
 body {
-  overflow: hidden;
-  max-height: 100vh;
-  max-width: 100vw;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
   margin: 0;
@@ -19,6 +18,7 @@ body {
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overscroll-behavior-y: none;
 
   &.hidden {
     display: none;
@@ -26,6 +26,10 @@ body {
 }
 
 @media (any-pointer: fine) {
+  body {
+    background: var(--bg);
+  }
+
   * {
     scrollbar-color: var(--btn) transparent;
 
@@ -106,35 +110,25 @@ nav {
   box-shadow: var(--topBarShadow);
   box-sizing: border-box;
   height: var(--navbar-height);
-}
-
-#app-loaded {
-  min-height: 100vh;
-  min-width: 100vw;
-  overflow: hidden;
-
-  --navbar-height: 50px;
-}
-
-#content {
-  overscroll-behavior-y: none;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  position: sticky;
+  position: fixed;
 }
 
 #sidebar {
   grid-area: sidebar;
+  top: var(--navbar-height);
+  position: sticky;
+}
+
+#main-scroller {
+  top: var(--navbar-height);
+  grid-area: content;
+  position: relative;
 }
 
 #notifs-column {
   grid-area: notifs;
 }
 
-#main-scroller {
-  grid-area: content;
-}
-
 .app-bg-wrapper {
   position: fixed;
   height: 100%;
@@ -175,7 +169,6 @@ nav {
   grid-template-rows: 1fr;
   box-sizing: border-box;
   margin: 0 auto;
-  height: calc(100vh - var(--navbar-height));
   align-content: flex-start;
   flex-wrap: wrap;
   padding: 0 10px;

From 4c2301bc9f07bbc2ffd3d715311d8980912fc9df Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 18:43:52 +0300
Subject: [PATCH 029/122] fix scrollable columns

---
 src/App.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 590c053f..8f391070 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -115,6 +115,9 @@ nav {
 
 #sidebar {
   grid-area: sidebar;
+}
+
+.column.-scrollable {
   top: var(--navbar-height);
   position: sticky;
 }
@@ -192,7 +195,7 @@ nav {
 
       padding-top: 10px;
       position: sticky;
-      top: 0;
+      top: var(--navbar-height);
       max-height: calc(100vh - var(--navbar-height));
       overflow-y: auto;
       overflow-x: hidden;

From a035fa4e6cca657c464b472c0bfd479197cc7f7e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 18:44:03 +0300
Subject: [PATCH 030/122] fix timeline scroll-to-top

---
 src/components/timeline/timeline.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index a3931d32..4ae7410e 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -141,7 +141,7 @@ const Timeline = {
         this.$store.commit('showNewStatuses', { timeline: this.timelineName })
         this.paused = false
       }
-      window.scrollTop = 0
+      window.scrollTo({ top: 0 })
     },
     fetchOlderStatuses: throttle(function () {
       const store = this.$store

From 7426417a525b30aa25a95bb64899c95df6ebf080 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 18:44:22 +0300
Subject: [PATCH 031/122] more fixes

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

diff --git a/src/panel.scss b/src/panel.scss
index bd56858f..049144ba 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -63,7 +63,7 @@
 
   &.-sticky {
     position: sticky;
-    top: 0;
+    top: var(--navbar-height);
     z-index: 2;
   }
 

From 5b664f464d2aa0121a372dd8b14e26160b6dad5c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 19:28:26 +0300
Subject: [PATCH 032/122] chat fixes

---
 src/components/chat/chat.js              | 66 +++++-------------------
 src/components/chat/chat.vue             |  1 -
 src/components/chat/chat_layout_utils.js | 27 ++++------
 src/components/chat_new/chat_new.vue     |  1 -
 4 files changed, 21 insertions(+), 74 deletions(-)

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 5d2c1d09..a2789d2e 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -19,8 +19,6 @@ library.add(
   faChevronLeft
 )
 
-const scroller = () => document.getElementById('content')
-
 const BOTTOMED_OUT_OFFSET = 10
 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 10
 const SAFE_RESIZE_TIME_OFFSET = 100
@@ -45,10 +43,9 @@ const Chat = {
   },
   created () {
     this.startFetching()
-    window.addEventListener('resize', this.handleLayoutChange)
   },
   mounted () {
-    scroller().addEventListener('scroll', this.handleScroll)
+    window.addEventListener('scroll', this.handleScroll)
     if (typeof document.hidden !== 'undefined') {
       document.addEventListener('visibilitychange', this.handleVisibilityChange, false)
     }
@@ -56,12 +53,9 @@ const Chat = {
     this.$nextTick(() => {
       this.handleResize()
     })
-    this.setChatLayout()
   },
   unmounted () {
-    scroller().removeEventListener('scroll', this.handleScroll)
-    window.removeEventListener('resize', this.handleLayoutChange)
-    this.unsetChatLayout()
+    window.removeEventListener('scroll', this.handleScroll)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
     this.$store.dispatch('clearCurrentChat')
   },
@@ -97,8 +91,6 @@ const Chat = {
     ...mapState({
       backendInteractor: state => state.api.backendInteractor,
       mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
-      mobileLayout: state => state.interface.mobileLayout,
-      layoutHeight: state => state.interface.layoutHeight,
       currentUser: state => state.users.currentUser
     })
   },
@@ -116,9 +108,6 @@ const Chat = {
     '$route': function () {
       this.startFetching()
     },
-    layoutHeight () {
-      this.handleResize({ expand: true })
-    },
     mastoUserSocketStatus (newValue) {
       if (newValue === WSConnectionStatus.JOINED) {
         this.fetchChat({ isFirstFetch: true })
@@ -142,30 +131,6 @@ const Chat = {
         }
       })
     },
-    setChatLayout () {
-      //   This is a hacky way to adjust the global layout to the mobile chat (without modifying the rest of the app).
-      //   This layout prevents empty spaces from being visible at the bottom
-      //   of the chat on iOS Safari (`safe-area-inset`) when
-      //   - the on-screen keyboard appears and the user starts typing
-      //   - the user selects the text inside the input area
-      //   - the user selects and deletes the text that is multiple lines long
-      //   TODO: unify the chat layout with the global layout.
-      let html = document.querySelector('html')
-      if (html) {
-        html.classList.add('chat-layout')
-      }
-    },
-    unsetChatLayout () {
-      let html = document.querySelector('html')
-      if (html) {
-        html.classList.remove('chat-layout')
-      }
-    },
-    handleLayoutChange () {
-      this.$nextTick(() => {
-        this.scrollDown()
-      })
-    },
     // Preserves the scroll position when OSK appears or the posting form changes its height.
     handleResize (opts = {}) {
       const { expand = false, delayed = false } = opts
@@ -179,25 +144,20 @@ const Chat = {
 
       this.$nextTick(() => {
         const { offsetHeight = undefined } = this.lastScrollPosition
-        this.lastScrollPosition = getScrollPosition(scroller())
+        this.lastScrollPosition = getScrollPosition()
 
         const diff = this.lastScrollPosition.offsetHeight - offsetHeight
         if (diff < 0 || (!this.bottomedOut() && expand)) {
           this.$nextTick(() => {
-            scroller().scrollTo({
-              top: scroller().scrollTop - diff,
-              left: 0
-            })
+            window.scrollTo({ top: window.scrollY - diff })
           })
         }
       })
     },
     scrollDown (options = {}) {
       const { behavior = 'auto', forceRead = false } = options
-      const scrollable = scroller()
-      if (!scrollable) { return }
       this.$nextTick(() => {
-        scrollable.scrollTo({ top: scrollable.scrollHeight, left: 0, behavior })
+        window.scrollTo({ top: document.documentElement.scrollHeight, behavior })
       })
       if (forceRead) {
         this.readChat()
@@ -213,11 +173,10 @@ const Chat = {
       })
     },
     bottomedOut (offset) {
-      return isBottomedOut(scroller(), offset)
+      return isBottomedOut(offset)
     },
     reachedTop () {
-      const scrollable = scroller()
-      return scrollable && scrollable.scrollTop <= 0
+      return window.scrollY <= 0
     },
     cullOlderCheck () {
       window.setTimeout(() => {
@@ -248,10 +207,9 @@ const Chat = {
       }
     }, 200),
     handleScrollUp (positionBeforeLoading) {
-      const positionAfterLoading = getScrollPosition(scroller())
-      scroller().scrollTo({
-        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading),
-        left: 0
+      const positionAfterLoading = getScrollPosition()
+      window.scrollTo({
+        top: getNewTopPosition(positionBeforeLoading, positionAfterLoading)
       })
     },
     fetchChat ({ isFirstFetch = false, fetchLatest = false, maxId }) {
@@ -270,7 +228,7 @@ const Chat = {
             chatService.clear(chatMessageService)
           }
 
-          const positionBeforeUpdate = getScrollPosition(scroller())
+          const positionBeforeUpdate = getScrollPosition()
           this.$store.dispatch('addChatMessages', { chatId, messages }).then(() => {
             this.$nextTick(() => {
               if (fetchOlderMessages) {
@@ -281,7 +239,7 @@ const Chat = {
               // full height of the scrollable container.
               // If this is the case, we want to fetch the messages until the scrollable container
               // is fully populated so that the user has the ability to scroll up and load the history.
-              if (!isScrollable(scroller()) && messages.length > 0) {
+              if (!isScrollable() && messages.length > 0) {
                 this.fetchChat({ maxId: this.currentChatMessageService.minId })
               }
             })
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 3b0129fa..d909bed9 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -2,7 +2,6 @@
   <div class="chat-view">
     <div class="chat-view-inner">
       <div
-        id="nav"
         ref="inner"
         class="panel-default panel chat-view-body"
       >
diff --git a/src/components/chat/chat_layout_utils.js b/src/components/chat/chat_layout_utils.js
index 50a933ac..c187892d 100644
--- a/src/components/chat/chat_layout_utils.js
+++ b/src/components/chat/chat_layout_utils.js
@@ -1,9 +1,9 @@
 // Captures a scroll position
-export const getScrollPosition = (el) => {
+export const getScrollPosition = () => {
   return {
-    scrollTop: el.scrollTop,
-    scrollHeight: el.scrollHeight,
-    offsetHeight: el.offsetHeight
+    scrollTop: window.scrollY,
+    scrollHeight: document.documentElement.scrollHeight,
+    offsetHeight: window.innerHeight
   }
 }
 
@@ -13,21 +13,12 @@ export const getNewTopPosition = (previousPosition, newPosition) => {
   return previousPosition.scrollTop + (newPosition.scrollHeight - previousPosition.scrollHeight)
 }
 
-export const isBottomedOut = (el, offset = 0) => {
-  if (!el) { return }
-  const scrollHeight = el.scrollTop + offset
-  const totalHeight = el.scrollHeight - el.offsetHeight
+export const isBottomedOut = (offset = 0) => {
+  const scrollHeight = window.scrollY + offset
+  const totalHeight = document.documentElement.scrollHeight - window.innerHeight
   return totalHeight <= scrollHeight
 }
-
-// Height of the scrollable container. The dynamic height is needed to ensure the mobile browser panel doesn't overlap or hide the posting form.
-export const scrollableContainerHeight = (inner, header, footer) => {
-  return inner.offsetHeight - header.clientHeight - footer.clientHeight
-}
-
 // Returns whether or not the scrollbar is visible.
-export const isScrollable = (el) => {
-  if (!el) return
-
-  return el.scrollHeight > el.clientHeight
+export const isScrollable = () => {
+  return document.documentElement.scrollHeight > window.innerHeight
 }
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index f3894a3a..0790bb37 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -1,6 +1,5 @@
 <template>
   <div
-    id="nav"
     class="panel-default panel chat-new"
   >
     <div

From d9f8091ce648d033a69b47d811edf1c8019fb179 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 19:28:52 +0300
Subject: [PATCH 033/122] fix extra padding in thread view

---
 src/components/conversation/conversation.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 04078cf4..2e7f8684 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -270,7 +270,8 @@
     border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
     border-bottom: 1px solid var(--border, $fallback--border);
   }
-  &.-expanded {
+
+  &.-expanded.status-fadein {
     margin: calc(var(--status-margin, $status-margin) / 2);
   }
 }

From 0f28c28760f7a8615da18630fa49ff963d3f7533 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 19:29:10 +0300
Subject: [PATCH 034/122] layout fixes

---
 src/App.scss | 46 ++++++++++++----------------------------------
 1 file changed, 12 insertions(+), 34 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 8f391070..e65f3b2a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -123,7 +123,7 @@ nav {
 }
 
 #main-scroller {
-  top: var(--navbar-height);
+  margin-top: var(--navbar-height);
   grid-area: content;
   position: relative;
 }
@@ -174,8 +174,9 @@ nav {
   margin: 0 auto;
   align-content: flex-start;
   flex-wrap: wrap;
-  padding: 0 10px;
+  padding: 0 calc(var(--columnGap) / 2);
   justify-content: center;
+  min-height: 100vh;
 
   .column {
     --___columnMargin: var(--columnGap);
@@ -183,17 +184,17 @@ nav {
     display: grid;
     grid-template-columns: 100%;
     box-sizing: border-box;
-    padding-top: 10px;
     grid-row-start: 1;
     grid-row-end: 1;
     margin: 0 calc(var(--___columnMargin) / 2);
+    padding: calc(var(--___columnMargin) / 2) 0;
     row-gap: var(--___columnMargin);
     align-content: start;
 
     &.-scrollable {
       --___paddingIncrease: calc(var(--columnGap) / 2);
 
-      padding-top: 10px;
+      padding-top: calc(var(--columnGap) / 2);
       position: sticky;
       top: var(--navbar-height);
       max-height: calc(100vh - var(--navbar-height));
@@ -216,7 +217,7 @@ nav {
       }
 
       .panel-heading.-sticky {
-        top: -10px;
+        top: calc(var(--columnGap) / -2);
       }
     }
   }
@@ -267,6 +268,12 @@ nav {
       display: none;
     }
   }
+
+  &.-normal {
+    #notifs-column {
+      display: none;
+    }
+  }
 }
 
 .text-center {
@@ -724,35 +731,6 @@ i[class*=icon-],
   flex: 1;
 }
 
-@media all and (min-width: 800px) {
-  .sidebar-bounds {
-    overflow: hidden;
-    max-height: 100vh;
-    width: 345px;
-    position: fixed;
-    margin-top: -10px;
-
-    .sidebar-scroller {
-      height: 96vh;
-      width: 365px;
-      padding-top: 10px;
-      padding-right: 50px;
-      overflow-x: hidden;
-      overflow-y: scroll;
-    }
-
-    .sidebar {
-      width: 345px;
-    }
-  }
-
-  .sidebar-flexer {
-    max-height: 96vh;
-    flex-shrink: 0;
-    flex-grow: 0;
-  }
-}
-
 @media all and (max-width: 800px) {
   .mobile-hidden {
     display: none;

From 3e1b40ce29feae8ab2b13da35eece15df8a7697c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 20:18:54 +0300
Subject: [PATCH 035/122] fix new post button not working day1, minor stylistic
 fixes

---
 src/App.js                                         | 14 ++++++++++++++
 src/App.scss                                       |  6 ++++++
 src/App.vue                                        |  2 +-
 src/components/chat/chat.js                        |  1 +
 src/components/chat/chat.scss                      |  3 +++
 .../mobile_post_status_button.js                   |  2 +-
 6 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/App.js b/src/App.js
index 75fa3a3c..39ef62e7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -50,6 +50,16 @@ export default {
     window.removeEventListener('resize', this.updateMobileState)
   },
   computed: {
+    classes () {
+      return [
+        {
+          '-reverse': this.reverseLayout,
+          '-no-sticky-headers': this.noSticky,
+          '-has-new-post-button': this.newPostButtonShown
+        },
+        '-' + this.layoutType
+      ]
+    },
     currentUser () { return this.$store.state.users.currentUser },
     userBackground () { return this.currentUser.background_image },
     instanceBackground () {
@@ -72,6 +82,10 @@ export default {
         !this.$store.getters.mergedConfig.hideISP &&
         this.$store.state.instance.instanceSpecificPanelContent
     },
+    newPostButtonShown () {
+      if (this.$route.name === 'chat' || this.$route.name === 'chats') return false
+      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
+    },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
     shoutboxPosition () {
       return this.$store.getters.mergedConfig.showNewPostButton || false
diff --git a/src/App.scss b/src/App.scss
index e65f3b2a..c8470c8a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -222,6 +222,12 @@ nav {
     }
   }
 
+  &.-has-new-post-button {
+    .column {
+      padding-bottom: 20em;
+    }
+  }
+
   &.-no-sticky-headers {
     .column {
       .panel-heading.-sticky {
diff --git a/src/App.vue b/src/App.vue
index b5f6e7d3..094a8ab9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,7 @@
     <div
       id="content"
       class="app-layout container"
-      :class="[{ '-reverse': reverseLayout, '-no-sticky-headers': noSticky }, '-' + layoutType]"
+      :class="classes"
     >
       <div class="underlay"/>
       <div id="sidebar" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }">
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index a2789d2e..9a0ae107 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -91,6 +91,7 @@ const Chat = {
     ...mapState({
       backendInteractor: state => state.api.backendInteractor,
       mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
+      mobileLayout: state => state.interface.layoutType === 'mobile',
       currentUser: state => state.users.currentUser
     })
   },
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 34a335fe..1bad51b9 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -1,6 +1,9 @@
 .chat-view {
   display: flex;
   height: 100%;
+  // Stick the form to the top/bottom of screen
+  margin-bottom: calc(var(--___columnMargin) / -2);
+  margin-top: calc(var(--___columnMargin) / -2);
 
   .chat-view-inner {
     height: auto;
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index 4866ac57..ecf79b64 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -45,7 +45,7 @@ const MobilePostStatusButton = {
       return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
     },
     isPersistent () {
-      return !!this.$store.getters.mergedConfig.showNewPostButton
+      return !!this.$store.getters.mergedConfig.alwaysShowNewPostButton
     },
     autohideFloatingPostButton () {
       return !!this.$store.getters.mergedConfig.autohideFloatingPostButton

From 3f9d9dd6bd9e15ea906d29ad04e35faa2a808367 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 20:26:59 +0300
Subject: [PATCH 036/122] underlay improvements

---
 src/App.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index c8470c8a..8c744752 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -151,12 +151,11 @@ nav {
   grid-column-end: span 3;
   grid-row-start: 1;
   grid-row-end: 1;
-  margin: 0 calc(var(--columnGap) * -2);
-  padding: 0 calc(var(--columnGap) * 2);
+  margin: 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));
-  z-index: -2000;
+  z-index: -1000;
 }
 
 .app-layout {
@@ -174,7 +173,6 @@ nav {
   margin: 0 auto;
   align-content: flex-start;
   flex-wrap: wrap;
-  padding: 0 calc(var(--columnGap) / 2);
   justify-content: center;
   min-height: 100vh;
 

From 62572c32049191328dfb8473ecf006cbfaa87413 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 20:41:36 +0300
Subject: [PATCH 037/122] remove margins from underlay since it causes
 horizontal scroll on smaller screens

---
 src/App.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 8c744752..01359f2c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -151,7 +151,6 @@ nav {
   grid-column-end: span 3;
   grid-row-start: 1;
   grid-row-end: 1;
-  margin: 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));

From aa07b219c9ece77a8bf11d6dc0f36e12658c7c61 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 21:31:58 +0300
Subject: [PATCH 038/122] fix horizontal scroll, make hovered column render
 stuff on top of other ones (popups, tooltips etc)

---
 src/App.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 01359f2c..d8396562 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -7,6 +7,7 @@
 
 html {
   font-size: 14px;
+  overflow-x: clip;
 }
 
 body {
@@ -15,10 +16,10 @@ body {
   margin: 0;
   color: $fallback--text;
   color: var(--text, $fallback--text);
-  overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
+  overflow-x: clip;
 
   &.hidden {
     display: none;
@@ -174,6 +175,7 @@ nav {
   flex-wrap: wrap;
   justify-content: center;
   min-height: 100vh;
+  overflow-x: clip;
 
   .column {
     --___columnMargin: var(--columnGap);
@@ -188,6 +190,10 @@ nav {
     row-gap: var(--___columnMargin);
     align-content: start;
 
+    &:hover {
+      z-index: 2;
+    }
+
     &.-scrollable {
       --___paddingIncrease: calc(var(--columnGap) / 2);
 

From 666498e7b76144b35d245d4b1c09e1dc62fac84b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 21:54:02 +0300
Subject: [PATCH 039/122] fix main post form having hidden emoji picker

---
 src/App.scss                                         | 12 ++++++------
 src/components/attachment/attachment.scss            |  2 +-
 src/components/desktop_nav/desktop_nav.scss          |  8 ++++----
 src/components/emoji_picker/emoji_picker.scss        |  2 +-
 src/components/media_modal/media_modal.vue           |  2 +-
 src/components/post_status_form/post_status_form.vue |  1 +
 src/components/user_panel/user_panel.vue             |  1 +
 src/hocs/with_load_more/with_load_more.scss          |  2 +-
 src/hocs/with_subscription/with_subscription.scss    |  2 +-
 9 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index d8396562..cc8ef592 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -2,7 +2,7 @@
 @import './_variables.scss';
 
 :root {
-  --navbar-height: 50px;
+  --navbar-height: 3.5em;
 }
 
 html {
@@ -159,8 +159,8 @@ nav {
 }
 
 .app-layout {
-  --miniColumn: 25em;
-  --maxiColumn: minmax(var(--miniColumn), 45em);
+  --miniColumn: 25rem;
+  --maxiColumn: minmax(var(--miniColumn), 45rem);
   --columnGap: 1em;
   --status-margin: 0.75em;
 
@@ -227,7 +227,7 @@ nav {
 
   &.-has-new-post-button {
     .column {
-      padding-bottom: 20em;
+      padding-bottom: 10rem;
     }
   }
 
@@ -301,7 +301,7 @@ nav {
   cursor: pointer;
   box-shadow: $fallback--buttonShadow;
   box-shadow: var(--buttonShadow);
-  font-size: 14px;
+  font-size: 1rem;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
@@ -429,7 +429,7 @@ textarea,
   color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
-  font-size: 14px;
+  font-size: 1rem;
   margin: 0;
   box-sizing: border-box;
   display: inline-block;
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index dfda15bf..b2dea98d 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -173,7 +173,7 @@
       margin: 8px;
       word-break: break-all;
       h1 {
-        font-size: 14px;
+        font-size: 1rem;
         margin: 0px;
       }
     }
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 1e731c70..3c2e70b5 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -9,7 +9,7 @@
 
   .inner-nav {
     display: grid;
-    grid-template-rows: 50px;
+    grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto 2fr;
     grid-template-areas: "sitename logo actions";
     box-sizing: border-box;
@@ -75,7 +75,7 @@
 
     img {
       display: inline-block;
-      height: 50px;
+      height: var(--navbar-height);
     }
   }
 
@@ -101,8 +101,8 @@
 
   .item {
     flex: 1;
-    line-height: 50px;
-    height: 50px;
+    line-height: var(--navbar-height);
+    height: var(--navbar-height);
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index ec711758..1a696584 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -7,7 +7,7 @@
   right: 0;
   left: 0;
   margin: 0 !important;
-  z-index: 1;
+  z-index: 100;
   background-color: $fallback--bg;
   background-color: var(--popover, $fallback--bg);
   color: $fallback--link;
diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
index c7dcd007..8b76aafb 100644
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@@ -234,7 +234,7 @@ $modal-view-button-icon-margin: 0.5em;
       position: absolute;
       height: $modal-view-button-icon-height;
       width: $modal-view-button-icon-width;
-      font-size: 14px;
+      font-size: 1rem;
       line-height: $modal-view-button-icon-height;
       color: #FFF;
       text-align: center;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0fdb6dc7..d6595354 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -509,6 +509,7 @@
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
     line-height:24px;
+    z-index: 50;
   }
 
   form textarea.form-cw {
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 50949b98..243de387 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -24,5 +24,6 @@
 <style lang="scss">
 .user-panel .signed-in {
   overflow: visible;
+  z-index: 10;
 }
 </style>
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index 1a26eb8d..de86ed4a 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -10,7 +10,7 @@
     border-top-color: var(--border, $fallback--border);
 
     .error {
-      font-size: 14px;
+      font-size: 1rem;
     }
 
     a {
diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss
index 52c7d94c..7fd83802 100644
--- a/src/hocs/with_subscription/with_subscription.scss
+++ b/src/hocs/with_subscription/with_subscription.scss
@@ -4,7 +4,7 @@
     text-align: center;
 
     .error {
-      font-size: 14px;
+      font-size: 1rem;
     }
   }
 }
\ No newline at end of file

From f27226b55cefe6e351e562bbc908f5517e236804 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 22:09:46 +0300
Subject: [PATCH 040/122] improvements to relative font sizes

---
 src/App.scss                       |  6 +++---
 src/components/popover/popover.vue |  2 +-
 src/panel.scss                     | 13 +++++++------
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index cc8ef592..1025bb50 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -301,7 +301,7 @@ nav {
   cursor: pointer;
   box-shadow: $fallback--buttonShadow;
   box-shadow: var(--buttonShadow);
-  font-size: 1rem;
+  font-size: 1em;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
@@ -429,7 +429,7 @@ textarea,
   color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
-  font-size: 1rem;
+  font-size: 1em;
   margin: 0;
   box-sizing: border-box;
   display: inline-block;
@@ -730,7 +730,7 @@ i[class*=icon-],
 }
 
 .btn.button-default {
-  min-height: 28px;
+  min-height: 2em;
 }
 
 .new-status-notification {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 3f2a81f5..973625d1 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -65,7 +65,7 @@
 .dropdown-menu {
   display: block;
   padding: .5rem 0;
-  font-size: 1rem;
+  font-size: 1em;
   text-align: left;
   list-style: none;
   max-width: 100vw;
diff --git a/src/panel.scss b/src/panel.scss
index 049144ba..b23ec4bb 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -28,7 +28,8 @@
 
 .panel-body:empty::before {
   content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
-  display: block; margin: 1em;
+  display: block;
+  margin: 1em;
   text-align: center;
 }
 
@@ -42,18 +43,18 @@
   background-size: cover;
   padding: 0.6em 0.6em;
   text-align: left;
-  line-height: 28px;
+  line-height: calc(var(--panel-heading-height) / 2);
   color: var(--panelText);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
   align-items: baseline;
-  height: var(--panelHeadingHeight);
+  height: var(--panel-heading-height);
   z-index: -2;
 
-  --panelHeadingHeight: 45px;
+  --panel-heading-height: 3.2em;
 
   &.-flexible-height {
-    --panelHeadingHeight: auto;
+    --panel-heading-height: auto;
 
     &::after,
     &::before {
@@ -92,7 +93,7 @@
     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(--panelHeadingHeight), transparent var(--panelHeadingHeight));
+    mask: linear-gradient(to bottom, white var(--panel-heading-height), transparent var(--panel-heading-height));
   }
 
   .title {

From fe8b5b62ae284c5e105d2b1063815dc28582194d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 22:23:07 +0300
Subject: [PATCH 041/122] fix chromium crashing on my machine :hyperjoy: LUL

---
 src/App.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 1025bb50..eae3afa3 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -7,7 +7,6 @@
 
 html {
   font-size: 14px;
-  overflow-x: clip;
 }
 
 body {

From 5d203e93ae6bc55988c6f4672d589787308099f0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 22:37:08 +0300
Subject: [PATCH 042/122] improvements to relative panel sizing

---
 src/App.scss   |  2 +-
 src/panel.scss | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index eae3afa3..acaf282a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -2,7 +2,7 @@
 @import './_variables.scss';
 
 :root {
-  --navbar-height: 3.5em;
+  --navbar-height: 3.5rem;
 }
 
 html {
diff --git a/src/panel.scss b/src/panel.scss
index b23ec4bb..57059cb9 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -34,6 +34,10 @@
 }
 
 .panel-heading {
+  --panel-heading-height: 3.2em;
+  --panel-heading-height-padding: 0.6em;
+  --__panel-heading-height-inner: calc(var(--panel-heading-height) - 2 * var(--panel-heading-height-padding));
+
   position: relative;
   box-sizing: border-box;
   display: flex;
@@ -43,7 +47,7 @@
   background-size: cover;
   padding: 0.6em 0.6em;
   text-align: left;
-  line-height: calc(var(--panel-heading-height) / 2);
+  line-height: var(--__panel-heading-height-inner);
   color: var(--panelText);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
@@ -51,8 +55,6 @@
   height: var(--panel-heading-height);
   z-index: -2;
 
-  --panel-heading-height: 3.2em;
-
   &.-flexible-height {
     --panel-heading-height: auto;
 
@@ -120,14 +122,12 @@
 
   .button-default,
   .alert {
-    // height: 100%;
-    line-height: 21px;
+    height: var(--__panel-heading-height-inner);
     min-height: 0;
     box-sizing: border-box;
     margin: 0;
     margin-left: 0.5em;
     min-width: 1px;
-    align-self: stretch;
   }
 
   .button-default {

From 21f7cb39a8e0cdac3034ae17f8ec6ea2b84ee128 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 22:50:33 +0300
Subject: [PATCH 043/122] cleanup

---
 src/App.scss | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index acaf282a..b5411585 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -7,6 +7,7 @@
 
 html {
   font-size: 14px;
+  // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
 body {
@@ -25,9 +26,12 @@ body {
   }
 }
 
+// Apply Custom scrollbars
 @media (any-pointer: fine) {
+  // Body should have background to scrollbar otherwise it will use white (body color?)
   body {
     background: var(--bg);
+    scrollbar-color: var(--btn) var(--bg);
   }
 
   * {
@@ -44,6 +48,9 @@ body {
       border-radius: var(--btnRadius);
     }
 
+    // horizontal/vertical/increment/decrement are webkit-specific stuff
+    // that indicates whether we're affecting vertical scrollbar, increase button etc
+    // stylelint-disable selector-pseudo-class-no-unknown
     &::-webkit-scrollbar-button {
       --___bgPadding: 2px;
 
@@ -86,6 +93,7 @@ body {
         }
       }
     }
+    // stylelint-enable selector-pseudo-class-no-unknown
   }
 }
 
@@ -99,6 +107,12 @@ h4 {
   margin: 0;
 }
 
+i[class*=icon-],
+.svg-inline--fa {
+  color: $fallback--icon;
+  color: var(--icon, $fallback--icon);
+}
+
 nav {
   z-index: 1000;
   color: var(--topBarText);
@@ -490,7 +504,6 @@ textarea,
       box-sizing: border-box;
       color: transparent;
       overflow: hidden;
-      box-sizing: border-box;
     }
   }
 
@@ -531,7 +544,6 @@ textarea,
       box-sizing: border-box;
       color: transparent;
       overflow: hidden;
-      box-sizing: border-box;
     }
   }
 
@@ -557,12 +569,6 @@ option {
   }
 }
 
-i[class*=icon-],
-.svg-inline--fa {
-  color: $fallback--icon;
-  color: var(--icon, $fallback--icon);
-}
-
 .btn-block {
   display: block;
   width: 100%;

From e5f0f95356fcae36310c98571b8ab8df9fbce958 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 00:20:27 +0300
Subject: [PATCH 044/122] fix dropzone

---
 src/components/post_status_form/post_status_form.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d6595354..47b8a213 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -572,7 +572,7 @@
 
   .drop-indicator {
     position: absolute;
-    z-index: 1;
+    z-index: 100;
     width: 100%;
     height: 100%;
     font-size: 5em;

From 2f1f1455aac268a138b0bf6a62d047a07c62e889 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 16:45:16 +0300
Subject: [PATCH 045/122] fix notifications scrolling the main column

---
 src/components/post_status_form/post_status_form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 84a9e29e..2febf226 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -486,7 +486,7 @@ const PostStatusForm = {
       const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
       const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)
 
-      const scrollerRef = this.$el.closest('.sidebar-scroller') ||
+      const scrollerRef = this.$el.closest('.column.-scrollable') ||
             this.$el.closest('.post-form-modal-view') ||
             window
 

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 046/122] 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 973625d1..91939ee7 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 47b8a213..f052e4de 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 57059cb9..175d2181 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 047/122] 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 39ef62e7..9cfaf4fa 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 b5411585..31d7fac2 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 094a8ab9..707b91e5 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 1bad51b9..7b4dd37f 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 048/122] 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 175d2181..1180d9e7 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,

From e744775ce8a5ca5f5fbad63e207ce75dbde04e63 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 23:49:46 +0300
Subject: [PATCH 049/122] fix dropdown menus

---
 src/components/popover/popover.vue | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 91939ee7..e1eb2c21 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -45,8 +45,19 @@
 .popover-default {
   transition: opacity 0.3s;
 
-  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-  box-shadow: var(--panelShadow);
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
+    box-shadow: var(--panelShadow);
+    pointer-events: none;
+  }
+
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
 
@@ -110,14 +121,15 @@
     &:active, &:hover {
       background-color: $fallback--lightBg;
       background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
+      box-shadow: none;
+      --btnText: var(--selectedMenuPopoverText, $fallback--link);
       --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
       svg {
         color: var(--selectedMenuPopoverIcon, $fallback--icon);
+        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
       }
     }
 

From 2e10c1b0a3513070ea89e3b6cc461b645ab0bfa5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 11 Apr 2022 23:54:44 +0300
Subject: [PATCH 050/122] enforce scroll to avoid jumpiness

---
 src/App.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.scss b/src/App.scss
index 31d7fac2..236a2b54 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -20,6 +20,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
   overflow-x: clip;
+  overflow-y: scroll;
 
   &.hidden {
     display: none;

From f4447eb3a0162a3223a19d0433105a70250759d4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 00:19:29 +0300
Subject: [PATCH 051/122] deal with browsers that don't support hiding
 scrollbars (somewhat)

---
 src/App.scss | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 236a2b54..90f1e0d5 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -27,14 +27,10 @@ body {
   }
 }
 
-// Apply Custom scrollbars
+// ## Custom scrollbars
+// Only show custom scrollbars on devices which
+// have a cursor/pointer to operate them
 @media (any-pointer: fine) {
-  // Body should have background to scrollbar otherwise it will use white (body color?)
-  body {
-    background: var(--bg);
-    scrollbar-color: var(--btn) var(--bg);
-  }
-
   * {
     scrollbar-color: var(--btn) transparent;
 
@@ -96,6 +92,10 @@ body {
     }
     // stylelint-enable selector-pseudo-class-no-unknown
   }
+  // Body should have background to scrollbar otherwise it will use white (body color?)
+  html {
+    scrollbar-color: var(--selectedMenu) var(--wallpaper);
+  }
 }
 
 a {
@@ -225,16 +225,18 @@ nav {
       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: calc(var(--___paddingIncrease) * -1);
-        padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
+      // On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
+      // might implement old style of hiding scrollbars later if there's demand
+      @supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
+        &:not(.-show-scrollbar) {
+          scrollbar-width: none;
+          margin-right: calc(var(--___paddingIncrease) * -1);
+          padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
-        &::-webkit-scrollbar {
-          display: block;
-          width: 0;
+          &::-webkit-scrollbar {
+            display: block;
+            width: 0;
+          }
         }
       }
 

From 0db756b4a55cafb59e8ab5baf721998b7289e937 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 01:22:31 +0300
Subject: [PATCH 052/122] fix post form/dropzone for good (?)

---
 .../post_status_form/post_status_form.vue     | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index f052e4de..9f2e8846 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -8,15 +8,6 @@
       @submit.prevent
       @dragover.prevent="fileDrag"
     >
-      <div
-        v-show="showDropIcon !== 'hide'"
-        :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
-        class="drop-indicator"
-        @dragleave="fileDragStop"
-        @drop.stop="fileDrop"
-      >
-        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
-      </div>
       <div class="form-group">
         <i18n-t
           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
@@ -277,6 +268,15 @@
           {{ $t('post_status.post') }}
         </button>
       </div>
+      <div
+        v-show="showDropIcon !== 'hide'"
+        :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
+        class="drop-indicator"
+        @dragleave="fileDragStop"
+        @drop.stop="fileDrop"
+      >
+        <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
+      </div>
       <div
         v-if="error"
         class="alert error"
@@ -509,7 +509,6 @@
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
     line-height:24px;
-    z-index: 10;
   }
 
   form textarea.form-cw {
@@ -572,7 +571,6 @@
 
   .drop-indicator {
     position: absolute;
-    z-index: 11;
     width: 100%;
     height: 100%;
     font-size: 5em;

From e5eca8a554446dfdfbe6049d14737979074cf18d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 17:03:29 +0300
Subject: [PATCH 053/122] reduce chats jumpiness

---
 src/components/chat/chat.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 7b4dd37f..430319d9 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -13,12 +13,13 @@
   }
 
   .chat-view-body {
+    box-sizing: border-box;
     background-color: var(--chatBg, $fallback--bg);
     display: flex;
     flex-direction: column;
     width: 100%;
     overflow: visible;
-    min-height: 100%;
+    min-height: calc(100vh - var(--navbar-height));
     margin: 0 0 0 0;
     border-radius: 10px 10px 0 0;
     border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;

From 08ad2923a58b08f8522b90938d9a330993904ea7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 17:17:52 +0300
Subject: [PATCH 054/122] fix chats button alignment

---
 src/components/chat/chat.scss            |  9 ++++-----
 src/components/chat/chat.vue             |  6 +++---
 src/components/chat_title/chat_title.vue | 16 +++++++++-------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 430319d9..8b745e86 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -47,7 +47,6 @@
   }
 
   .chat-view-heading {
-    align-items: center;
     justify-content: space-between;
     display: flex;
     z-index: 2;
@@ -56,11 +55,11 @@
   }
 
   .go-back-button {
-    cursor: pointer;
-    width: 28px;
     text-align: center;
-    padding: 0.6em;
-    margin: -0.6em 0.6em -0.6em -0.6em;
+    padding: 0 0.7em;
+    line-height: 100%;
+    height: 100%;
+    align-self: stretch;
   }
 
   .jump-to-bottom-button {
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index d909bed9..31eecbc0 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -9,15 +9,15 @@
           ref="header"
           class="panel-heading -sticky chat-view-heading mobile-hidden"
         >
-          <a
-            class="go-back-button"
+          <button
+            class="button-unstyled go-back-button"
             @click="goBack"
           >
             <FAIcon
               size="lg"
               icon="chevron-left"
             />
-          </a>
+          </button>
           <div class="title text-center">
             <ChatTitle
               :user="recipient"
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 06ad129d..99a7a64e 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -4,13 +4,13 @@
     :title="title"
   >
     <router-link
+      class="avatar-container"
       v-if="withAvatar && user"
       :to="getUserProfileLink(user)"
     >
       <UserAvatar
+        class="titlebar-avatar"
         :user="user"
-        width="23px"
-        height="23px"
       />
     </router-link>
     <RichContent
@@ -32,7 +32,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  align-items: center;
 
   --emoji-size: 14px;
 
@@ -45,11 +44,14 @@
     overflow: hidden;
   }
 
-  .Avatar {
-    width: 23px;
-    height: 23px;
-    margin-right: 0.5em;
+  .avatar-container {
+    align-self: center;
+  }
 
+  .titlebar-avatar {
+    margin-right: 0.5em;
+    height: 1.5em;
+    width: 1.5em;
     border-radius: $fallback--avatarAltRadius;
     border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
 

From b37932fdf434d23777eaa58fccbf7afb07a052ea Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 17:23:53 +0300
Subject: [PATCH 055/122] fix main scrollbar on chrome

---
 src/App.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.scss b/src/App.scss
index 90f1e0d5..0ee1c610 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -95,6 +95,7 @@ body {
   // Body should have background to scrollbar otherwise it will use white (body color?)
   html {
     scrollbar-color: var(--selectedMenu) var(--wallpaper);
+    background: var(--wallpaper);
   }
 }
 

From 3d37b9d8e1cad78fb1f666b3cfb7f28b1fdc1c2d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 21:18:06 +0300
Subject: [PATCH 056/122] unified layout-setting code and made an option to
 control or disable third column behavior

---
 src/App.js                                    | 20 ++++++++--------
 src/boot/after_store.js                       |  9 +++----
 .../settings_modal/tabs/general_tab.js        |  5 ++++
 .../settings_modal/tabs/general_tab.vue       |  9 +++++++
 src/modules/config.js                         |  4 ++++
 src/modules/interface.js                      | 24 ++++++++++++++++---
 6 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9cfaf4fa..19c58595 100644
--- a/src/App.js
+++ b/src/App.js
@@ -98,22 +98,22 @@ export default {
     },
     layoutType () { return this.$store.state.interface.layoutType },
     privateMode () { return this.$store.state.instance.private },
-    reverseLayout () { return this.$store.getters.mergedConfig.sidebarRight },
+    reverseLayout () {
+      const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
+      if (this.layoutType !== 'wide') {
+        return reverseSetting
+      } else {
+        return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
+      }
+    },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
     showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
     updateMobileState () {
-      const mobileLayout = windowWidth() <= 800
-      const wideLayout = windowWidth() >= 1300
-      const layoutHeight = windowHeight()
-      const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
-      const changed = layoutType !== this.layoutType
-      if (changed) {
-        this.$store.dispatch('setLayoutType', layoutType)
-      }
-      this.$store.dispatch('setLayoutHeight', layoutHeight)
+      this.$store.dispatch('setLayoutWidth', windowWidth())
+      this.$store.dispatch('setLayoutHeight', windowHeight())
     }
   }
 }
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index ce96141d..f655c38f 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -8,7 +8,7 @@ import App from '../App.vue'
 import routes from './routes'
 import VBodyScrollLock from 'src/directives/body_scroll_lock'
 
-import { windowWidth } from '../services/window_utils/window_utils'
+import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
@@ -332,11 +332,8 @@ const checkOAuthToken = async ({ store }) => {
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
-  // TODO cleanup copypasta
-  const mobileLayout = windowWidth() <= 800
-  const wideLayout = windowWidth() >= 1300
-  const layoutType = wideLayout ? 'wide' : (mobileLayout ? 'mobile' : 'normal')
-  store.dispatch('setLayoutType', layoutType)
+  store.dispatch('setLayoutWidth', windowWidth())
+  store.dispatch('setLayoutHeight', windowHeight())
 
   FaviconService.initFaviconService()
 
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 62d86176..89505cb3 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -38,6 +38,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.mention_link_display_${mode}`)
       })),
+      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.conversation_display_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index e29bc7cf..db8718cf 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -70,6 +70,15 @@
             {{ $t('settings.show_scrollbars') }}
           </BooleanSetting>
         </li>
+        <li>
+          <ChoiceSetting
+            id="thirdColumnMode"
+            path="thirdColumnMode"
+            :options="thirdColumnModeOptions"
+          >
+            {{ $t('settings.third_column_mode') }}
+          </ChoiceSetting>
+        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"
diff --git a/src/modules/config.js b/src/modules/config.js
index 6d2e6ce0..c0d5c3c2 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -46,6 +46,7 @@ export const defaultState = {
   pauseOnUnfocused: true,
   stopGifs: true,
   replyVisibility: 'all',
+  thirdColumnMode: 'notifications',
   notificationVisibility: {
     follows: true,
     mentions: true,
@@ -165,6 +166,9 @@ const config = {
         case 'interfaceLanguage':
           messages.setLanguage(this.getters.i18n, value)
           break
+        case 'thirdColumnMode':
+          dispatch('setLayoutWidth', undefined)
+          break
       }
     }
   }
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 9df72b88..ed31b6ff 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -72,6 +72,9 @@ const interfaceMod = {
     setLayoutHeight (state, value) {
       state.layoutHeight = value
     },
+    setLayoutWidth (state, value) {
+      state.layoutWidth = value
+    },
     setLastTimeline (state, value) {
       state.lastTimeline = value
     }
@@ -86,9 +89,6 @@ const interfaceMod = {
     setNotificationPermission ({ commit }, permission) {
       commit('setNotificationPermission', permission)
     },
-    setLayoutType ({ commit }, value) {
-      commit('setLayoutType', value)
-    },
     closeSettingsModal ({ commit }) {
       commit('closeSettingsModal')
     },
@@ -133,6 +133,24 @@ const interfaceMod = {
     setLayoutHeight ({ commit }, value) {
       commit('setLayoutHeight', value)
     },
+    // value is optional, assuming it was cached prior
+    setLayoutWidth ({ commit, state, rootGetters }, value) {
+      let width = value
+      if (value !== undefined) {
+        commit('setLayoutWidth', value)
+      } else {
+        width = state.layoutWidth
+      }
+      const mobileLayout = width <= 800
+      const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
+      const { thirdColumnMode } = rootGetters.mergedConfig
+      if (thirdColumnMode === 'none') {
+        commit('setLayoutType', normalOrMobile)
+      } else {
+        const wideLayout = width >= 1300
+        commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
+      }
+    },
     setLastTimeline ({ commit }, value) {
       commit('setLastTimeline', value)
     }

From 4b050c7fa5e21f3f19c295d3e4b32f312651a213 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 21:49:14 +0300
Subject: [PATCH 057/122] properly ignore sticky elements when calculating
 offset because they technically are following main scroll

---
 src/services/offset_finder/offset_finder.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/offset_finder/offset_finder.service.js b/src/services/offset_finder/offset_finder.service.js
index 9034f8c8..5a904f08 100644
--- a/src/services/offset_finder/offset_finder.service.js
+++ b/src/services/offset_finder/offset_finder.service.js
@@ -9,7 +9,7 @@ export const findOffset = (child, parent, { top = 0, left = 0 } = {}, ignorePadd
     result.left += ignorePadding ? 0 : leftPadding
   }
 
-  if (child.offsetParent && (parent === window || parent.contains(child.offsetParent) || parent === child.offsetParent)) {
+  if (child.offsetParent && window.getComputedStyle(child.offsetParent).position !== 'sticky' && (parent === window || parent.contains(child.offsetParent) || parent === child.offsetParent)) {
     return findOffset(child.offsetParent, parent, result, false)
   } else {
     if (parent !== window) {

From 28556f7c277ea96ac7216e019f448480108fba5d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Apr 2022 22:01:04 +0300
Subject: [PATCH 058/122] localization updates

---
 src/components/settings_modal/tabs/general_tab.js | 2 +-
 src/i18n/en.json                                  | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 89505cb3..c97b3410 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -41,7 +41,7 @@ const GeneralTab = {
       thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
         key: mode,
         value: mode,
-        label: this.$t(`settings.conversation_display_${mode}`)
+        label: this.$t(`settings.third_column_mode_${mode}`)
       })),
       loopSilentAvailable:
       // Firefox
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f8336e5c..d04df325 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -367,7 +367,7 @@
     "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
     "hide_isp": "Hide instance-specific panel",
     "hide_shoutbox": "Hide instance shoutbox",
-    "right_sidebar": "Show sidebar on the right side",
+    "right_sidebar": "Reverse order of columns",
     "always_show_post_button": "Always show floating New Post button",
     "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
@@ -481,6 +481,12 @@
     "subject_line_noop": "Do not copy",
     "conversation_display": "Conversation display style",
     "conversation_display_tree": "Tree-style",
+    "disable_sticky_headers": "Don't stick column headers to top of the screen",
+    "show_scrollbars": "Show side column's scrollbars",
+    "third_column_mode": "When there's enough space, show third column containing",
+    "third_column_mode_none": "Don't show third column at all",
+    "third_column_mode_notifications": "Notifications column",
+    "third_column_mode_postform": "Main post form and navigation",
     "tree_advanced": "Allow more flexible navigation in tree view",
     "tree_fade_ancestors": "Display ancestors of the current status in faint text",
     "conversation_display_linear": "Linear-style",

From b25c0c6f0289541bf1d7ef52da7d09db2893d38d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Apr 2022 22:22:16 +0300
Subject: [PATCH 059/122] fix overflow that sometimes happens in sidebar due to
 too wide file upload element

---
 src/components/media_upload/media_upload.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index e955aa72..2920387e 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -19,7 +19,7 @@
       v-if="uploadReady"
       :disabled="disabled"
       type="file"
-      style="position: fixed; top: -100em"
+      style="position: fixed; top: -100em; max-width: 0; max-height: 0"
       multiple="true"
       @change="change"
     >

From bb29218a6cb3682d230c12c630916562f8b24028 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Apr 2022 23:06:57 +0300
Subject: [PATCH 060/122] fixate conversation heading

---
 src/components/conversation/conversation.vue | 2 +-
 src/components/timeline/timeline.scss        | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 2e7f8684..c2c323c1 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -7,7 +7,7 @@
   >
     <div
       v-if="isExpanded"
-      class="panel-heading conversation-heading"
+      class="panel-heading conversation-heading -sticky"
     >
       <span class="title"> {{ $t('timeline.conversation') }} </span>
       <button
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index c10375d4..ae8324b3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -27,4 +27,8 @@
   .timeline-footer {
     border: none;
   }
+
+  .conversation-heading {
+    top: calc(var(--panel-heading-height) * 2);
+  }
 }

From 9ae8ff009817eae5ceaf632c1d76892d25467292 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 00:46:04 +0300
Subject: [PATCH 061/122] fix scrollbars in panel headers

---
 .../settings_modal/settings_modal.vue         | 23 ++++++-------------
 src/panel.scss                                |  2 ++
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index e0e8304d..d3bed061 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -11,22 +11,13 @@
           {{ $t('settings.settings') }}
         </span>
         <transition name="fade">
-          <div v-if="currentSaveStateNotice">
-            <div
-              v-if="currentSaveStateNotice.error"
-              class="alert error"
-              @click.prevent
-            >
-              {{ $t('settings.saving_err') }}
-            </div>
-
-            <div
-              v-if="!currentSaveStateNotice.error"
-              class="alert transparent"
-              @click.prevent
-            >
-              {{ $t('settings.saving_ok') }}
-            </div>
+          <div
+            v-if="currentSaveStateNotice"
+            class="alert"
+            :class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
+            @click.prevent
+          >
+            {{ currentSaveStateNotice.error ? $t('settings.saving_err') : $t('settings.saving_ok') }}
           </div>
         </transition>
         <button
diff --git a/src/panel.scss b/src/panel.scss
index 1180d9e7..f3e51d39 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -118,6 +118,8 @@
     margin: 0;
     margin-left: 0.5em;
     min-width: 1px;
+    padding-top: 0;
+    padding-bottom: 0;
   }
 
   .button-default {

From d87a1fda591a972571ce45dbb21bd193ef892555 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 00:37:08 +0300
Subject: [PATCH 062/122] fix scrollbars in dropdowns

---
 src/components/notifications/notification_filters.vue | 8 ++------
 src/components/popover/popover.vue                    | 2 +-
 src/panel.scss                                        | 6 +++---
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index ba0e90a0..7418fc7c 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -64,7 +64,7 @@
       </div>
     </template>
     <template v-slot:trigger>
-      <button class="button-unstyled">
+      <button class="filter-trigger-button button-unstyled">
         <FAIcon icon="filter" />
       </button>
     </template>
@@ -106,17 +106,13 @@ export default {
 .NotificationFilters {
   align-self: stretch;
 
-  > button {
+  .filter-trigger-button {
     font-size: 1.2em;
     padding-left: 0.7em;
     padding-right: 0.2em;
     line-height: 100%;
     height: 100%;
   }
-
-  .dropdown-item {
-    margin: 0;
-  }
 }
 
 </style>
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index e1eb2c21..044b887d 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -95,7 +95,7 @@
     line-height: 21px;
     overflow: auto;
     display: block;
-    padding: .5em 0.75em;
+    padding: 0.25em 0.75em;
     clear: both;
     font-weight: 400;
     text-align: inherit;
diff --git a/src/panel.scss b/src/panel.scss
index f3e51d39..147b17a9 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -110,8 +110,8 @@
     overflow-x: hidden;
   }
 
-  .button-default,
-  .alert {
+  > .button-default,
+  > .alert {
     height: var(--__panel-heading-height-inner);
     min-height: 0;
     box-sizing: border-box;
@@ -122,7 +122,7 @@
     padding-bottom: 0;
   }
 
-  .button-default {
+  > .button-default {
     flex-shrink: 0;
 
     &,

From aef6d529516f34d346faa7e6c424a16ff5f9a202 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 01:25:30 +0300
Subject: [PATCH 063/122] fix logoLeft not working at all

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

diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 3c2e70b5..0ca9802e 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -18,7 +18,7 @@
     max-width: 980px;
   }
 
-  &.-logoLeft {
+  &.-logoLeft .inner-nav {
     grid-template-columns: auto 2fr 2fr;
     grid-template-areas: "logo sitename actions";
   }

From 631b8b93a4a8dd548bae5ab9fa7bc4d6e892ae3f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 19:44:31 +0300
Subject: [PATCH 064/122] tons of fixes mainly aimed at panel headings

---
 src/App.scss                                  |   6 +-
 .../account_actions/account_actions.vue       |   4 -
 src/components/popover/popover.vue            |  12 +-
 .../tabs/theme_tab/theme_tab.scss             |  17 -
 src/components/timeline/timeline.js           |   2 +-
 src/components/timeline/timeline.scss         |  22 +-
 src/components/timeline/timeline.vue          |   2 +-
 .../timeline/timeline_quick_settings.vue      |  16 +-
 src/components/user_card/user_card.vue        | 325 +-----------------
 src/components/user_profile/user_profile.vue  |  18 -
 .../user_reporting_modal.vue                  |  11 -
 src/panel.scss                                |  73 ++--
 12 files changed, 71 insertions(+), 437 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 0ee1c610..bc792263 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -641,12 +641,10 @@ option {
 }
 
 .alert {
-  margin: 0.35em;
-  padding: 0.25em;
+  margin: 0 0.35em;
+  padding: 0 0.25em;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  min-height: 28px;
-  line-height: 28px;
 
   &.error {
     background-color: $fallback--alertError;
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 1e31151c..c35d01af 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -74,10 +74,6 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .AccountActions {
-  button.dropdown-item {
-    margin-left: 0;
-  }
-
   .ellipsis-button {
     width: 2.5em;
     margin: -0.5em 0;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 044b887d..0350daa1 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -93,7 +93,7 @@
 
   .dropdown-item {
     line-height: 21px;
-    overflow: auto;
+    overflow: hidden;
     display: block;
     padding: 0.25em 0.75em;
     clear: both;
@@ -154,9 +154,13 @@
         content: '✓';
       }
 
-      &.menu-checkbox-radio::after {
-        font-size: 2em;
-        content: '•';
+      &.-radio {
+        border-radius: 9999px;
+
+        &.menu-checkbox-checked::after {
+          font-size: 2em;
+          content: '•';
+        }
       }
     }
 
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 21b49a32..cb8e477c 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -245,25 +245,8 @@
         border-color: var(--border, $fallback--border);
       }
 
-      .panel-heading {
-        .badge, .alert, .btn, .faint {
-          margin-left: 1em;
-          white-space: nowrap;
-        }
-        .faint {
-          text-overflow: ellipsis;
-          min-width: 2em;
-          overflow-x: hidden;
-        }
-        .flex-spacer {
-          flex: 1;
-        }
-      }
       .btn {
-        margin-left: 0;
-        padding: 0 1em;
         min-width: 3em;
-        min-height: 30px;
       }
     }
   }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 4ae7410e..f79b5167 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -60,7 +60,7 @@ const Timeline = {
       }
     },
     classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index ae8324b3..4c58e686 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,15 +13,6 @@
     max-width: 100%;
     flex-wrap: nowrap;
     align-items: center;
-
-    .loadmore-button {
-      flex-shrink: 0;
-    }
-
-    .loadmore-text {
-      flex-shrink: 0;
-      line-height: 1em;
-    }
   }
 
   .timeline-footer {
@@ -31,4 +22,17 @@
   .conversation-heading {
     top: calc(var(--panel-heading-height) * 2);
   }
+
+  &.-nonpanel {
+    .timeline-heading {
+      text-align: center;
+      line-height: 2.75em;
+      padding: 0 0.5em;
+    }
+
+    .button-default, .alert {
+      line-height: 2em;
+      width: 100%;
+    }
+  }
 }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index d37a9e2a..ff3cd72d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[classes.root, 'Timeline']">
+  <div :class="['Timeline', classes.root]">
     <div :class="classes.header">
       <TimelineMenu v-if="!embedded" />
       <button
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 4d67e06b..c62d0fe9 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -12,8 +12,8 @@
             @click="replyVisibilityAll = true"
           >
             <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
             />{{ $t('settings.reply_visibility_all') }}
           </button>
           <button
@@ -21,8 +21,8 @@
             @click="replyVisibilityFollowing = true"
           >
             <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
             />{{ $t('settings.reply_visibility_following_short') }}
           </button>
           <button
@@ -30,8 +30,8 @@
             @click="replyVisibilitySelf = true"
           >
             <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
             />{{ $t('settings.reply_visibility_self_short') }}
           </button>
           <div
@@ -102,10 +102,6 @@
     line-height: 100%;
     height: 100%;
   }
-
-  .dropdown-item {
-    margin: 0;
-  }
 }
 
 </style>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 43a660e1..67837845 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -284,327 +284,4 @@
 
 <script src="./user_card.js"></script>
 
-<style lang="scss">
-@import '../../_variables.scss';
-
-.user-card {
-  position: relative;
-  z-index: 1;
-
-  &:hover {
-    --_still-image-img-visibility: visible;
-    --_still-image-canvas-visibility: hidden;
-    --_still-image-label-visibility: hidden;
-  }
-
-  .panel-heading {
-    padding: .5em 0;
-    text-align: center;
-    box-shadow: none;
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-    // create new stacking context
-    position: relative;
-  }
-
-  .panel-body {
-    word-wrap: break-word;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-    // create new stacking context
-    position: relative;
-  }
-
-  .background-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
-          linear-gradient(to top, white, white);
-    // Autoprefixed seem to ignore this one, and also syntax is different
-                                                 -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    background-size: cover;
-    mask-size: 100% 60%;
-    border-top-left-radius: calc(var(--panelRadius) - 1px);
-    border-top-right-radius: calc(var(--panelRadius) - 1px);
-    background-color: var(--profileBg);
-    z-index: -2;
-
-    &.hide-bio {
-      mask-size: 100% 40px;
-    }
-  }
-
-  &-bio {
-    text-align: center;
-    display: block;
-    line-height: 18px;
-    padding: 1em;
-    margin: 0;
-
-    a {
-      color: $fallback--link;
-      color: var(--postLink, $fallback--link);
-    }
-
-    img {
-      object-fit: contain;
-      vertical-align: middle;
-      max-width: 100%;
-      max-height: 400px;
-    }
-  }
-
-  // Modifiers
-
-  &-rounded-t {
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-  }
-
-  &-rounded {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-  }
-
-  &-bordered {
-    border-width: 1px;
-    border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-}
-
-.user-info {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  padding: 0 26px;
-
-  .container {
-    min-width: 0;
-    padding: 16px 0 6px;
-    display: flex;
-    align-items: flex-start;
-    max-height: 56px;
-
-    > * {
-      min-width: 0;
-    }
-
-    .Avatar {
-      --_avatarShadowBox: var(--avatarShadow);
-      --_avatarShadowFilter: var(--avatarShadowFilter);
-      --_avatarShadowInset: var(--avatarShadowInset);
-
-      flex: 1 0 100%;
-      width: 56px;
-      height: 56px;
-      object-fit: cover;
-    }
-  }
-
-  &-avatar-link {
-    position: relative;
-    cursor: pointer;
-
-    &-overlay {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.3);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
-      opacity: 0;
-      transition: opacity .2s ease;
-
-      svg {
-        color: #FFF;
-      }
-    }
-
-    &:hover &-overlay {
-      opacity: 1;
-    }
-  }
-
-  .external-link-button, .edit-profile-button {
-    cursor: pointer;
-    width: 2.5em;
-    text-align: center;
-    margin: -0.5em 0;
-    padding: 0.5em 0;
-
-    &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-  }
-
-  .user-summary {
-    display: block;
-    margin-left: 0.6em;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1 1 0;
-    // This is so that text doesn't get overlapped by avatar's shadow if it has
-    // big one
-    z-index: 1;
-
-    .top-line {
-      display: flex;
-    }
-  }
-
-  .user-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex: 1 1 auto;
-    margin-right: 1em;
-    font-size: 15px;
-
-    --emoji-size: 14px;
-  }
-
-  .bottom-line {
-    display: flex;
-    font-weight: light;
-    font-size: 15px;
-
-    .lock-icon {
-      margin-left: 0.5em;
-    }
-
-    .user-screen-name {
-      min-width: 1px;
-      flex: 0 1 auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-
-    .dailyAvg {
-      min-width: 1px;
-      flex: 0 0 auto;
-      margin-left: 1em;
-      font-size: 0.7em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
-    .user-role {
-      flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
-    }
-  }
-
-  .user-meta {
-    margin-bottom: .15em;
-    display: flex;
-    align-items: baseline;
-    font-size: 14px;
-    line-height: 22px;
-    flex-wrap: wrap;
-
-    .following {
-      flex: 1 0 auto;
-      margin: 0;
-      margin-bottom: .25em;
-      text-align: left;
-    }
-
-    .highlighter {
-      flex: 0 1 auto;
-      display: flex;
-      flex-wrap: wrap;
-      margin-right: -.5em;
-      align-self: start;
-
-      .userHighlightCl {
-        padding: 2px 10px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightSel {
-        padding-top: 0;
-        padding-bottom: 0;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightText {
-        width: 70px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightCl,
-      .userHighlightText,
-      .userHighlightSel {
-        vertical-align: top;
-        margin-right: .5em;
-        margin-bottom: .25em;
-      }
-    }
-  }
-  .user-interactions {
-    position: relative;
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -.75em;
-
-    > * {
-      margin: 0 .75em .6em 0;
-      white-space: nowrap;
-      min-width: 95px;
-    }
-
-    button {
-      margin: 0;
-    }
-  }
-}
-
-.sidebar .edit-profile-button {
-  display: none;
-}
-
-.user-counts {
-  display: flex;
-  line-height:16px;
-  padding: .5em 1.5em 0em 1.5em;
-  text-align: center;
-  justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  flex-wrap: wrap;
-}
-
-.user-count {
-  flex: 1 0 auto;
-  padding: .5em 0 .5em 0;
-  margin: 0 .5em;
-
-  h5 {
-    font-size:1em;
-    font-weight: bolder;
-    margin: 0 0 0.25em;
-  }
-  a {
-    text-decoration: none;
-  }
-}
-</style>
+<style lang="scss" src="./user_card.scss" />
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 726216ff..f1e3cb72 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -192,24 +192,6 @@
     align-items: middle;
     padding: 2em;
   }
-
-  .timeline-heading {
-    display: flex;
-    justify-content: center;
-
-    .loadmore-button, .alert {
-      flex: 1;
-    }
-
-    .loadmore-button {
-      height: 28px;
-      margin: 10px .6em;
-    }
-
-    .title, .loadmore-text {
-      display: none
-    }
-  }
 }
 .user-profile-placeholder {
   .panel-body {
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index cc456365..ba12a246 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -76,17 +76,6 @@
   min-height: 20vh;
   max-height: 80vh;
 
-  .panel-heading {
-    .title {
-      text-align: center;
-      // TODO: Consider making these as default of panel
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
   .panel-body {
     display: flex;
     flex-direction: column-reverse;
diff --git a/src/panel.scss b/src/panel.scss
index 147b17a9..167c60a6 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -39,7 +39,11 @@
 
   position: relative;
   box-sizing: border-box;
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr;
+  grid-auto-columns: auto;
+  grid-column-gap: 0.5em;
   flex: none;
   border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
@@ -89,7 +93,6 @@
   }
 
   .title {
-    flex: 1 0 auto;
     font-size: 1.3em;
   }
 
@@ -110,42 +113,44 @@
     overflow-x: hidden;
   }
 
-  > .button-default,
-  > .alert {
-    height: var(--__panel-heading-height-inner);
-    min-height: 0;
-    box-sizing: border-box;
-    margin: 0;
-    margin-left: 0.5em;
-    min-width: 1px;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  > .button-default {
-    flex-shrink: 0;
-
-    &,
-    i[class*=icon-] {
-      color: $fallback--text;
-      color: var(--btnPanelText, $fallback--text);
+  &:not(.-flexible-height) {
+    > .button-default,
+    > .alert {
+      height: var(--__panel-heading-height-inner);
+      min-height: 0;
+      box-sizing: border-box;
+      margin: 0;
+      min-width: 1px;
+      padding-top: 0;
+      padding-bottom: 0;
+      align-self: stretch;
     }
 
-    &:active {
-      background-color: $fallback--fg;
-      background-color: var(--btnPressedPanel, $fallback--fg);
-      color: $fallback--text;
-      color: var(--btnPressedPanelText, $fallback--text);
-    }
+    > .button-default {
+      flex-shrink: 0;
 
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledPanelText, $fallback--text);
-    }
+      &,
+      i[class*=icon-] {
+        color: $fallback--text;
+        color: var(--btnPanelText, $fallback--text);
+      }
 
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledPanelText, $fallback--text);
+      &:active {
+        background-color: $fallback--fg;
+        background-color: var(--btnPressedPanel, $fallback--fg);
+        color: $fallback--text;
+        color: var(--btnPressedPanelText, $fallback--text);
+      }
+
+      &:disabled {
+        color: $fallback--text;
+        color: var(--btnDisabledPanelText, $fallback--text);
+      }
+
+      &.toggled {
+        color: $fallback--text;
+        color: var(--btnToggledPanelText, $fallback--text);
+      }
     }
   }
 

From 85c515b3952d819b4bb983426ac562c4c00a193d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 19:57:01 +0300
Subject: [PATCH 065/122] more fixes for timeline headers

---
 src/components/notifications/notification_filters.vue | 11 +++++++----
 src/components/popover/popover.vue                    |  2 +-
 src/components/timeline/timeline.vue                  |  2 +-
 src/components/timeline/timeline_quick_settings.vue   |  9 ++++++---
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 7418fc7c..d0b11a13 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -106,12 +106,15 @@ export default {
 .NotificationFilters {
   align-self: stretch;
 
-  .filter-trigger-button {
-    font-size: 1.2em;
-    padding-left: 0.7em;
-    padding-right: 0.2em;
+  > button {
     line-height: 100%;
     height: 100%;
+    width: var(--__panel-heading-height-inner);
+    text-align: center;
+
+    svg {
+      font-size: 1.2em;
+    }
   }
 }
 
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 0350daa1..d98ca8e7 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -5,7 +5,7 @@
   >
     <button
       ref="trigger"
-      class="button-unstyled -fullwidth popover-trigger-button"
+      class="button-unstyled popover-trigger-button"
       type="button"
       @click="onClick"
     >
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index ff3cd72d..958808f6 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -60,7 +60,7 @@
       </div>
       <button
         v-else-if="!timeline.loading"
-        class="button-unstyled -link -fullwidth"
+        class="button-unstyled -link"
         @click.prevent="fetchOlderStatuses()"
       >
         <div class="new-status-notification text-center">
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index c62d0fe9..5efc5d7c 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -96,11 +96,14 @@
   align-self: stretch;
 
   > button {
-    font-size: 1.2em;
-    padding-left: 0.7em;
-    padding-right: 0.2em;
     line-height: 100%;
     height: 100%;
+    width: var(--__panel-heading-height-inner);
+    text-align: center;
+
+    svg {
+      font-size: 1.2em;
+    }
   }
 }
 

From 06f58f53493b0587dab4ecdcc7f81b181424da89 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 20:03:18 +0300
Subject: [PATCH 066/122] i forgor

---
 src/components/user_card/user_card.scss | 324 ++++++++++++++++++++++++
 1 file changed, 324 insertions(+)
 create mode 100644 src/components/user_card/user_card.scss

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
new file mode 100644
index 00000000..4dabafa2
--- /dev/null
+++ b/src/components/user_card/user_card.scss
@@ -0,0 +1,324 @@
+@import '../../_variables.scss';
+
+.user-card {
+  position: relative;
+  z-index: 1;
+
+  &:hover {
+    --_still-image-img-visibility: visible;
+    --_still-image-canvas-visibility: hidden;
+    --_still-image-label-visibility: hidden;
+  }
+
+  .panel-heading {
+    padding: .5em 0;
+    text-align: center;
+    box-shadow: none;
+    background: transparent;
+    flex-direction: column;
+    align-items: stretch;
+    // create new stacking context
+    position: relative;
+  }
+
+  .panel-body {
+    word-wrap: break-word;
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+    // create new stacking context
+    position: relative;
+  }
+
+  .background-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
+          linear-gradient(to top, white, white);
+    // Autoprefixer seem to ignore this one, and also syntax is different
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    background-size: cover;
+    mask-size: 100% 60%;
+    border-top-left-radius: calc(var(--panelRadius) - 1px);
+    border-top-right-radius: calc(var(--panelRadius) - 1px);
+    background-color: var(--profileBg);
+    z-index: -2;
+
+    &.hide-bio {
+      mask-size: 100% 40px;
+    }
+  }
+
+  &-bio {
+    text-align: center;
+    display: block;
+    line-height: 18px;
+    padding: 1em;
+    margin: 0;
+
+    a {
+      color: $fallback--link;
+      color: var(--postLink, $fallback--link);
+    }
+
+    img {
+      object-fit: contain;
+      vertical-align: middle;
+      max-width: 100%;
+      max-height: 400px;
+    }
+  }
+
+  // Modifiers
+
+  &-rounded-t {
+    border-top-left-radius: $fallback--panelRadius;
+    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-right-radius: $fallback--panelRadius;
+    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-rounded {
+    border-radius: $fallback--panelRadius;
+    border-radius: var(--panelRadius, $fallback--panelRadius);
+  }
+
+  &-bordered {
+    border-width: 1px;
+    border-style: solid;
+    border-color: $fallback--border;
+    border-color: var(--border, $fallback--border);
+  }
+}
+
+.user-info {
+  color: $fallback--lightText;
+  color: var(--lightText, $fallback--lightText);
+  padding: 0 26px;
+
+  .container {
+    min-width: 0;
+    padding: 16px 0 6px;
+    display: flex;
+    align-items: flex-start;
+    max-height: 56px;
+
+    > * {
+      min-width: 0;
+    }
+
+    .Avatar {
+      --_avatarShadowBox: var(--avatarShadow);
+      --_avatarShadowFilter: var(--avatarShadowFilter);
+      --_avatarShadowInset: var(--avatarShadowInset);
+
+      flex: 1 0 100%;
+      width: 56px;
+      height: 56px;
+      object-fit: cover;
+    }
+  }
+
+  &-avatar-link {
+    position: relative;
+    cursor: pointer;
+
+    &-overlay {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      background-color: rgba(0, 0, 0, 0.3);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: $fallback--avatarRadius;
+      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      opacity: 0;
+      transition: opacity .2s ease;
+
+      svg {
+        color: #FFF;
+      }
+    }
+
+    &:hover &-overlay {
+      opacity: 1;
+    }
+  }
+
+  .external-link-button, .edit-profile-button {
+    cursor: pointer;
+    width: 2.5em;
+    text-align: center;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+
+    &:not(:hover) .icon {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+
+  .user-summary {
+    display: block;
+    margin-left: 0.6em;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 0;
+    // This is so that text doesn't get overlapped by avatar's shadow if it has
+    // big one
+    z-index: 1;
+    line-height: 2em;
+
+    --emoji-size: 1.7em;
+
+    .top-line,
+    .bottom-line {
+      display: flex;
+    }
+  }
+
+  .user-name {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 1 1 auto;
+    margin-right: 1em;
+    font-size: 15px;
+  }
+
+  .bottom-line {
+    font-weight: light;
+    font-size: 15px;
+    align-items: baseline;
+
+    .lock-icon {
+      margin-left: 0.5em;
+    }
+
+    .user-screen-name {
+      min-width: 1px;
+      flex: 0 1 auto;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+
+    .dailyAvg {
+      min-width: 1px;
+      flex: 0 0 auto;
+      margin-left: 1em;
+      font-size: 0.7em;
+      color: $fallback--text;
+      color: var(--text, $fallback--text);
+    }
+
+    .user-role {
+      flex: none;
+      color: $fallback--text;
+      color: var(--alertNeutralText, $fallback--text);
+      background-color: $fallback--fg;
+      background-color: var(--alertNeutral, $fallback--fg);
+    }
+  }
+
+  .user-meta {
+    margin-bottom: .15em;
+    display: flex;
+    align-items: baseline;
+    font-size: 14px;
+    line-height: 22px;
+    flex-wrap: wrap;
+
+    .following {
+      flex: 1 0 auto;
+      margin: 0;
+      margin-bottom: .25em;
+      text-align: left;
+    }
+
+    .highlighter {
+      flex: 0 1 auto;
+      display: flex;
+      flex-wrap: wrap;
+      margin-right: -.5em;
+      align-self: start;
+
+      .userHighlightCl {
+        padding: 2px 10px;
+        flex: 1 0 auto;
+      }
+
+      .userHighlightSel {
+        padding-top: 0;
+        padding-bottom: 0;
+        flex: 1 0 auto;
+      }
+
+      .userHighlightText {
+        width: 70px;
+        flex: 1 0 auto;
+      }
+
+      .userHighlightCl,
+      .userHighlightText,
+      .userHighlightSel {
+        vertical-align: top;
+        margin-right: .5em;
+        margin-bottom: .25em;
+      }
+    }
+  }
+  .user-interactions {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -.75em;
+
+    > * {
+      margin: 0 .75em .6em 0;
+      white-space: nowrap;
+      min-width: 95px;
+    }
+
+    button {
+      margin: 0;
+    }
+  }
+}
+
+.sidebar .edit-profile-button {
+  display: none;
+}
+
+.user-counts {
+  display: flex;
+  line-height:16px;
+  padding: .5em 1.5em 0em 1.5em;
+  text-align: center;
+  justify-content: space-between;
+  color: $fallback--lightText;
+  color: var(--lightText, $fallback--lightText);
+  flex-wrap: wrap;
+}
+
+.user-count {
+  flex: 1 0 auto;
+  padding: .5em 0 .5em 0;
+  margin: 0 .5em;
+
+  h5 {
+    font-size:1em;
+    font-weight: bolder;
+    margin: 0 0 0.25em;
+  }
+  a {
+    text-decoration: none;
+  }
+}

From be8098e8ec41ffa909987ee5db990a8c349a9034 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 20:16:41 +0300
Subject: [PATCH 067/122] fix chat

---
 src/components/chat/chat.scss            | 10 +++-------
 src/components/chat_title/chat_title.vue |  1 +
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 8b745e86..63fd2a1f 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -47,19 +47,15 @@
   }
 
   .chat-view-heading {
-    justify-content: space-between;
-    display: flex;
-    z-index: 2;
-    position: sticky;
-    overflow: hidden;
+    grid-template-columns: auto 1fr;
   }
 
   .go-back-button {
     text-align: center;
-    padding: 0 0.7em;
     line-height: 100%;
     height: 100%;
-    align-self: stretch;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
   }
 
   .jump-to-bottom-button {
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 99a7a64e..e62c52b2 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -46,6 +46,7 @@
 
   .avatar-container {
     align-self: center;
+    line-height: 1;
   }
 
   .titlebar-avatar {

From 80b1ccb26797079b327fee72d605f3f558a7277d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 20:40:10 +0300
Subject: [PATCH 068/122] restore old chat inputbox behavior

---
 src/components/chat/chat.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 9a0ae107..02f3a2f2 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -144,13 +144,13 @@ const Chat = {
       }
 
       this.$nextTick(() => {
-        const { offsetHeight = undefined } = this.lastScrollPosition
+        const { scrollHeight = undefined } = this.lastScrollPosition
         this.lastScrollPosition = getScrollPosition()
 
-        const diff = this.lastScrollPosition.offsetHeight - offsetHeight
-        if (diff < 0 || (!this.bottomedOut() && expand)) {
+        const diff = this.lastScrollPosition.scrollHeight - scrollHeight
+        if (diff > 0 || (!this.bottomedOut() && expand)) {
           this.$nextTick(() => {
-            window.scrollTo({ top: window.scrollY - diff })
+            window.scrollTo({ top: window.scrollY + diff })
           })
         }
       })

From 076c52788b46258078ce2d83fdac82d75692c74b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 20:43:10 +0300
Subject: [PATCH 069/122] fixes for mobile

---
 src/components/chat/chat.vue             | 2 +-
 src/components/mobile_nav/mobile_nav.vue | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 31eecbc0..2e7df7bd 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -7,7 +7,7 @@
       >
         <div
           ref="header"
-          class="panel-heading -sticky chat-view-heading mobile-hidden"
+          class="panel-heading -sticky chat-view-heading"
         >
           <button
             class="button-unstyled go-back-button"
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 362441bb..d2d48a03 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -5,7 +5,6 @@
     <nav
       id="nav"
       class="mobile-nav"
-      :class="{ 'mobile-hidden': isChat }"
       @click="scrollToTop()"
     >
       <div class="item">

From 58a975e8df0d72ea330a6120195cc9bc374d68ad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:22:51 +0300
Subject: [PATCH 070/122] cleanup and fixes

---
 src/App.scss                                  |  2 +-
 src/components/chat/chat.scss                 |  2 +-
 src/components/chat_new/chat_new.scss         |  8 +++----
 src/components/chat_new/chat_new.vue          |  6 ++---
 src/components/login_form/login_form.vue      |  2 +-
 src/components/media_upload/media_upload.vue  |  2 +-
 .../post_status_form/post_status_form.vue     | 24 ++++++-------------
 src/components/registration/registration.vue  |  6 ++---
 .../remote_follow/remote_follow.vue           |  2 +-
 src/components/select/select.vue              |  6 ++---
 .../settings_modal/settings_modal.scss        |  2 +-
 .../tabs/mutes_and_blocks_tab.scss            |  2 +-
 .../settings_modal/tabs/profile_tab.scss      |  2 +-
 .../tabs/theme_tab/theme_tab.scss             |  2 +-
 src/components/tab_switcher/tab_switcher.scss |  3 ++-
 src/panel.scss                                |  2 +-
 16 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index bc792263..8c59c77a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -456,7 +456,7 @@ textarea,
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  height: 28px;
+  height: 2em;
   line-height: 16px;
   hyphens: none;
   padding: 8px 0.5em;
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 63fd2a1f..1e046300 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -52,7 +52,7 @@
 
   .go-back-button {
     text-align: center;
-    line-height: 100%;
+    line-height: 1;
     height: 100%;
     align-self: start;
     width: var(--__panel-heading-height-inner);
diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
index 5506143d..240e1a38 100644
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@@ -22,10 +22,10 @@
   }
 
   .go-back-button {
-    cursor: pointer;
-    width: 28px;
     text-align: center;
-    padding: 0.6em;
-    margin: -0.6em 0.6em -0.6em -0.6em;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
   }
 }
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 0790bb37..bf09a379 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -6,15 +6,15 @@
       ref="header"
       class="panel-heading"
     >
-      <a
-        class="go-back-button"
+      <button
+        class="button-unstyled go-back-button"
         @click="goBack"
       >
         <FAIcon
           size="lg"
           icon="chevron-left"
         />
-      </a>
+      </button>
     </div>
     <div class="input-wrap">
       <div class="input-search">
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 87fa37c6..21482977 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -101,7 +101,7 @@
   padding: 0.6em;
 
   .btn {
-    min-height: 28px;
+    min-height: 2em;
     width: 10em;
   }
 
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 2920387e..2668a34f 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -32,6 +32,6 @@
 @import '../../_variables.scss';
 
 .media-upload {
-  cursor: pointer;
+  cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
 }
  </style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9f2e8846..657a2710 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -336,7 +336,7 @@
     display: flex;
     justify-content: space-between;
     padding: 0.5em;
-    height: 32px;
+    height: 2.5em;
 
     button {
       width: 10em;
@@ -411,10 +411,12 @@
   }
 
   .media-upload-icon, .poll-icon, .emoji-icon {
-    font-size: 26px;
+    font-size: 1.85em;
     line-height: 1.1;
     flex: 1;
     padding: 0 0.1em;
+    display: flex;
+    align-items: center;
 
     &.selected, &:hover {
       // needs to be specific to override icon default color
@@ -441,21 +443,17 @@
   // Order is not necessary but a good indicator
   .media-upload-icon {
     order: 1;
-    text-align: left;
+    justify-content: left;
   }
 
   .emoji-icon {
     order: 2;
-    text-align: center;
+    justify-content: center;
   }
 
   .poll-icon {
     order: 3;
-    text-align: right;
-  }
-
-  .poll-icon {
-    cursor: pointer;
+    justify-content: right;
   }
 
   .error {
@@ -489,10 +487,6 @@
     flex-direction: column;
   }
 
-  .btn {
-    cursor: pointer;
-  }
-
   .btn[disabled] {
     cursor: not-allowed;
   }
@@ -551,10 +545,6 @@
     }
   }
 
-  .btn {
-    cursor: pointer;
-  }
-
   .btn[disabled] {
     cursor: not-allowed;
   }
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 1e735c69..1c83a47e 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -297,8 +297,8 @@ $validations-cRed: #f04124;
   .form-group {
     display: flex;
     flex-direction: column;
-    padding: 0.3em 0.0em 0.3em;
-    line-height:24px;
+    padding: 0.3em 0;
+    line-height: 2;
     margin-bottom: 1em;
   }
 
@@ -344,7 +344,7 @@ $validations-cRed: #f04124;
 
   .btn {
     margin-top: 0.6em;
-    height: 28px;
+    height: 2em;
   }
 
   .error {
diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue
index be827400..e17aa2e9 100644
--- a/src/components/remote_follow/remote_follow.vue
+++ b/src/components/remote_follow/remote_follow.vue
@@ -32,7 +32,7 @@
 
   .remote-button {
     width: 100%;
-    min-height: 28px;
+    min-height: 2em;
   }
 }
 </style>
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index ea8c8b69..92493b0b 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -39,10 +39,10 @@ label.Select {
     padding: 0 2em 0 .2em;
     font-family: sans-serif;
     font-family: var(--inputFont, sans-serif);
-    font-size: 14px;
+    font-size: 1em;
     width: 100%;
     z-index: 1;
-    height: 28px;
+    height: 2em;
     line-height: 16px;
   }
 
@@ -55,7 +55,7 @@ label.Select {
     width: 0.875em;
     color: $fallback--text;
     color: var(--inputText, $fallback--text);
-    line-height: 28px;
+    line-height: 2;
     z-index: 0;
     pointer-events: none;
   }
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index f3738a8c..13cb0e65 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -54,7 +54,7 @@
       overflow-y: hidden;
 
       .btn {
-        min-height: 28px;
+        min-height: 2em;
         min-width: 10em;
         padding: 0 2em;
       }
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
index ceb64efb..2adff847 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.scss
@@ -8,7 +8,7 @@
     .bulk-actions {
         text-align: right;
         padding: 0 1em;
-        min-height: 28px;
+        min-height: 2em;
     }
 
     .bulk-action-button {
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 3c9683cd..201f1a76 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -89,7 +89,7 @@
   &-bulk-actions {
     text-align: right;
     padding: 0 1em;
-    min-height: 28px;
+    min-height: 2em;
 
     button {
       width: 10em;
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index cb8e477c..bad6f51b 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -325,7 +325,7 @@
 
     .btn {
       flex-grow: 1;
-      min-height: 28px;
+      min-height: 2em;
       min-width: 0;
       max-width: 10em;
       padding: 0;
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 575d41e1..7a086b26 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -25,8 +25,9 @@
         border-bottom-color: $fallback--border;
         border-bottom-color: var(--border, $fallback--border);
       }
+
       .tab-wrapper {
-        height: 28px;
+        height: 2em;
 
         &:not(.active)::after {
           left: 0;
diff --git a/src/panel.scss b/src/panel.scss
index 167c60a6..637ea17c 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -176,7 +176,7 @@
   flex: none;
   padding: 0.6em 0.6em;
   text-align: left;
-  line-height: 28px;
+  line-height: 2;
   align-items: baseline;
   border-width: 1px 0 0 0;
   border-style: solid;

From 7f513fe46fbf631190445b21b7cb4b7cb431d019 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:44:33 +0300
Subject: [PATCH 071/122] more em-sized fonts

---
 src/components/emoji_input/emoji_input.vue             | 2 +-
 src/components/emoji_picker/emoji_picker.scss          | 6 ++++--
 src/components/link-preview/link-preview.vue           | 2 +-
 src/components/notifications/notifications.scss        | 8 ++++----
 src/components/registration/registration.vue           | 2 +-
 src/components/status/status.scss                      | 9 ++++-----
 src/components/still-image/still-image.vue             | 8 ++++----
 src/components/user_card/user_card.scss                | 5 ++---
 src/components/user_list_popover/user_list_popover.vue | 2 +-
 9 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index aa2950ce..7d95ab7e 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -78,7 +78,7 @@
     top: 0;
     right: 0;
     margin: .2em .25em;
-    font-size: 16px;
+    font-size: 1.3em;
     cursor: pointer;
     line-height: 24px;
 
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 1a696584..2055e02e 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -73,12 +73,13 @@
     &-item {
       padding: 0 7px;
       cursor: pointer;
-      font-size: 24px;
+      font-size: 1.85em;
 
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
       }
+
       &.active {
         border-bottom: 4px solid;
 
@@ -151,9 +152,10 @@
       justify-content: left;
 
       &-title {
-        font-size: 12px;
+        font-size: 0.85em;
         width: 100%;
         margin: 0;
+
         &.disabled {
           display: none;
         }
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index d3ca39b8..220527f2 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -63,7 +63,7 @@
   }
 
   .card-host {
-    font-size: 12px;
+    font-size: 0.85em;
   }
 
   .card-description {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index a285027d..aa4ae346 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -113,13 +113,13 @@
   }
 
   .emoji-reaction-emoji {
-    font-size: 16px;
+    font-size: 1.3em;
   }
 
   .notification-details {
-    min-width: 0px;
+    min-width: 0;
     word-wrap: break-word;
-    line-height:18px;
+    line-height: 1.4;
     position: relative;
     overflow: hidden;
     width: 100%;
@@ -142,7 +142,7 @@
     }
 
     .timeago {
-      margin-right: .2em;
+      margin-right: 0.2em;
     }
 
     .status-content {
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 1c83a47e..c3fee6f8 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -318,7 +318,7 @@ $validations-cRed: #f04124;
     text-align: left;
 
     span {
-      font-size: 12px;
+      font-size: 0.85em;
     }
   }
 
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index e38e2a53..36a2cca1 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -82,7 +82,6 @@
 
   .status-username {
     white-space: nowrap;
-    font-size: 14px;
     overflow: hidden;
     max-width: 85%;
     font-weight: bold;
@@ -160,7 +159,7 @@
   & .heading-reply-row {
     position: relative;
     align-content: baseline;
-    font-size: 12px;
+    font-size: 0.85em;
     margin-top: 0.2em;
     line-height: 130%;
     max-width: 100%;
@@ -229,7 +228,7 @@
   .replies {
     margin-top: 0.25em;
     line-height: 18px;
-    font-size: 12px;
+    font-size: 0.85em;
     display: flex;
     flex-wrap: wrap;
 
@@ -389,14 +388,14 @@
 
     .stat-title {
       color: var(--faint, $fallback--faint);
-      font-size: 12px;
+      font-size: 0.85em;
       text-transform: uppercase;
       position: relative;
     }
 
     .stat-number {
       font-weight: bolder;
-      font-size: 16px;
+      font-size: 1.1em;
       line-height: 1em;
     }
 
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index e939b532..ab3080c8 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -58,10 +58,10 @@
       zoom: var(--_still_image-label-scale, 1);
       content: 'gif';
       position: absolute;
-      line-height: 10px;
-      font-size: 10px;
-      top: 5px;
-      left: 5px;
+      line-height: 1;
+      font-size: 0.7em;
+      top: 0.5em;
+      left: 0.5em;
       background: rgba(127, 127, 127, 0.5);
       color: #fff;
       display: block;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4dabafa2..44657bdf 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -189,12 +189,12 @@
     overflow: hidden;
     flex: 1 1 auto;
     margin-right: 1em;
-    font-size: 15px;
+    font-size: 1.1em;
   }
 
   .bottom-line {
     font-weight: light;
-    font-size: 15px;
+    font-size: 1.1em;
     align-items: baseline;
 
     .lock-icon {
@@ -232,7 +232,6 @@
     margin-bottom: .15em;
     display: flex;
     align-items: baseline;
-    font-size: 14px;
     line-height: 22px;
     flex-wrap: wrap;
 
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 8706d0ff..bdc3aa92 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -73,7 +73,7 @@
     }
 
     .user-list-screen-name {
-      font-size: 9px;
+      font-size: 0.65em;
     }
   }
 }

From 33d92f9b16267415d1e62285a4f305ae10baf489 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:55:34 +0300
Subject: [PATCH 072/122] relative units in line-height + some cleanup

---
 src/App.scss                                     | 6 +++---
 src/components/notifications/notifications.scss  | 3 ++-
 src/components/password_reset/password_reset.vue | 7 ++++---
 src/components/react_button/react_button.vue     | 2 +-
 src/components/status/status.scss                | 4 ++--
 src/components/user_card/user_card.scss          | 2 +-
 src/components/user_profile/user_profile.vue     | 2 +-
 src/panel.scss                                   | 2 +-
 8 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 8c59c77a..3d30ec79 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -457,7 +457,7 @@ textarea,
   display: inline-block;
   position: relative;
   height: 2em;
-  line-height: 16px;
+  line-height: 1.2;
   hyphens: none;
   padding: 8px 0.5em;
 
@@ -508,7 +508,7 @@ textarea,
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
-      line-height: 1.1em;
+      line-height: 1.1;
       font-size: 1.1em;
       box-sizing: border-box;
       color: transparent;
@@ -548,7 +548,7 @@ textarea,
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
-      line-height: 1.1em;
+      line-height: 1.1;
       font-size: 1.1em;
       box-sizing: border-box;
       color: transparent;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index aa4ae346..976688d1 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -155,7 +155,8 @@
       margin: 0 0 0.3em;
       padding: 0;
       font-size: 1em;
-      line-height:20px;
+      line-height: 1.5;
+
       small {
         font-weight: lighter;
       }
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index e0579568..90673f44 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -91,6 +91,7 @@
     flex-direction: column;
     margin-top: 0.6em;
     max-width: 18rem;
+
     > * {
       min-width: 0;
     }
@@ -100,8 +101,8 @@
     display: flex;
     flex-direction: column;
     margin-bottom: 1em;
-    padding: 0.3em 0.0em 0.3em;
-    line-height: 24px;
+    padding: 0.3em 0;
+    line-height: 1.85em;
   }
 
   .error {
@@ -113,7 +114,7 @@
 
   .alert {
     padding: 0.5em;
-    margin: 0.3em 0.0em 1em;
+    margin: 0.3em 0 1em;
   }
 
   .password-reset-required {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c69c315b..7f35b7b5 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -101,7 +101,7 @@
       cursor: pointer;
 
       flex-basis: 20%;
-      line-height: 1.5em;
+      line-height: 1.5;
       align-content: center;
 
       &:hover {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 36a2cca1..b3ad3818 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -106,7 +106,7 @@
   .heading-name-row {
     display: flex;
     justify-content: space-between;
-    line-height: 18px;
+    line-height: 1.3;
 
     a {
       display: inline-block;
@@ -227,7 +227,7 @@
 
   .replies {
     margin-top: 0.25em;
-    line-height: 18px;
+    line-height: 1.3;
     font-size: 0.85em;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 44657bdf..2e153120 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -55,7 +55,7 @@
   &-bio {
     text-align: center;
     display: block;
-    line-height: 18px;
+    line-height: 1.3;
     padding: 1em;
     margin: 0;
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index f1e3cb72..67966ff4 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -176,7 +176,7 @@
       }
 
       .user-profile-field-name, .user-profile-field-value {
-        line-height: 18px;
+        line-height: 1.3;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
diff --git a/src/panel.scss b/src/panel.scss
index 637ea17c..776ed863 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -195,7 +195,7 @@
 }
 
 .panel-body > p {
-  line-height: 18px;
+  line-height: 1.3;
   padding: 1em;
   margin: 0;
 }

From 491449c41883c0ab3436c2ea16c5c49424097ce9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 21 Apr 2022 00:21:46 +0300
Subject: [PATCH 073/122] undo mistake

---
 src/components/popover/popover.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index d98ca8e7..c2a3e801 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -95,7 +95,7 @@
     line-height: 21px;
     overflow: hidden;
     display: block;
-    padding: 0.25em 0.75em;
+    padding: 0.5em 0.75em;
     clear: both;
     font-weight: 400;
     text-align: inherit;

From ed80ecfdbd41998830f6888bbd5fe60bb687bae6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 21 Apr 2022 00:27:48 +0300
Subject: [PATCH 074/122] cleanup

---
 src/components/dialog_modal/dialog_modal.vue |  9 ---------
 src/components/timeline/timeline.scss        | 10 ----------
 2 files changed, 19 deletions(-)

diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 3241ce3e..06b270c3 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -58,16 +58,7 @@
   background-color: var(--bg, $fallback--bg);
 
   .dialog-modal-heading {
-    padding: .5em .5em;
-    margin-right: auto;
-    margin-bottom: 0;
-    white-space: nowrap;
-    color: var(--panelText);
-    background-color: $fallback--fg;
-    background-color: var(--panel, $fallback--fg);
-
     .title {
-      margin-bottom: 0;
       text-align: center;
     }
   }
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 4c58e686..d5dd05f2 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -9,16 +9,6 @@
     cursor: progress;
   }
 
-  .timeline-heading {
-    max-width: 100%;
-    flex-wrap: nowrap;
-    align-items: center;
-  }
-
-  .timeline-footer {
-    border: none;
-  }
-
   .conversation-heading {
     top: calc(var(--panel-heading-height) * 2);
   }

From d4bd64a5f5fb95cd1050ced9f1029ebbe057b6c4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 21 Apr 2022 00:39:54 +0300
Subject: [PATCH 075/122] fix panel headers on mobile

---
 src/components/chat/chat.scss | 2 +-
 src/panel.scss                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 1e046300..90926904 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -47,7 +47,7 @@
   }
 
   .chat-view-heading {
-    grid-template-columns: auto 1fr;
+    grid-template-columns: auto minmax(50%, 1fr);
   }
 
   .go-back-button {
diff --git a/src/panel.scss b/src/panel.scss
index 776ed863..ffd48a75 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -41,7 +41,7 @@
   box-sizing: border-box;
   display: grid;
   grid-auto-flow: column;
-  grid-template-columns: 1fr;
+  grid-template-columns: minmax(50%, 1fr);
   grid-auto-columns: auto;
   grid-column-gap: 0.5em;
   flex: none;

From cd021bc6df8360d3b1ae71284255f81ccb1b8a85 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 21 Apr 2022 19:57:00 +0300
Subject: [PATCH 076/122] cleanup & more fixes for alignments and sizing

---
 .../post_status_form/post_status_form.vue         | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 657a2710..ebeead07 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -408,6 +408,7 @@
     display: flex;
     justify-content: space-between;
     padding-top: 5px;
+    align-items: baseline;
   }
 
   .media-upload-icon, .poll-icon, .emoji-icon {
@@ -502,25 +503,15 @@
     display: flex;
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
-    line-height:24px;
-  }
-
-  form textarea.form-cw {
-    line-height:16px;
-    resize: none;
-    overflow: hidden;
-    transition: min-height 200ms 100ms;
-    min-height: 1px;
+    line-height: 1.85em;
   }
 
   .form-post-body {
-    height: 16px; // Only affects the empty-height
-    line-height: 16px;
     resize: none;
     overflow: hidden;
     transition: min-height 200ms 100ms;
     padding-bottom: 1.75em;
-    min-height: 1px;
+    min-height: 2em;
     box-sizing: content-box;
 
     &.scrollable-form {

From f2b75a075da546739a659566f3be16e9e1e59949 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 22 Apr 2022 00:28:58 +0300
Subject: [PATCH 077/122] switching to center because baseline looks extremely
 off

---
 src/panel.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panel.scss b/src/panel.scss
index ffd48a75..cdd7a291 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -54,7 +54,7 @@
   color: var(--panelText);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
-  align-items: baseline;
+  align-items: center;
   height: var(--panel-heading-height);
   z-index: 2;
 
@@ -177,7 +177,7 @@
   padding: 0.6em 0.6em;
   text-align: left;
   line-height: 2;
-  align-items: baseline;
+  align-items: center;
   border-width: 1px 0 0 0;
   border-style: solid;
   border-color: var(--border, $fallback--border);

From 2a6f42fef3ff9c087aab4589d229e0f6c1b45c90 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Apr 2022 23:50:22 +0300
Subject: [PATCH 078/122] unified how panel-footer works between regular
 timelines and user timeline

---
 src/components/conversation/conversation.vue  |  5 ++
 .../notifications/notifications.scss          |  8 +--
 .../notifications/notifications.vue           |  2 +-
 src/components/timeline/timeline.js           |  3 +-
 src/components/timeline/timeline.vue          | 62 ++++++++++---------
 src/components/user_profile/user_profile.js   |  6 +-
 src/components/user_profile/user_profile.vue  |  4 ++
 7 files changed, 53 insertions(+), 37 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index c2c323c1..48e7934c 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -223,6 +223,7 @@
     --text: var(--faint);
     color: var(--text);
   }
+
   .thread-ancestor-dive-box {
     padding-left: var(--status-margin, $status-margin);
     border-bottom-width: 1px;
@@ -254,6 +255,10 @@
     border-bottom: none;
   }
 
+  &:last-child .conversation-status {
+    border-bottom: none;
+  }
+
   .thread-ancestors + .thread-tree > .conversation-status {
     border-top-width: 1px;
     border-top-style: solid;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 976688d1..07abee27 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -11,10 +11,6 @@
     color: var(--text, $fallback--text);
   }
 
-  .notifications-footer {
-    border: none;
-  }
-
   .notification {
     position: relative;
 
@@ -47,6 +43,10 @@
     }
   }
 
+  &:last-child .Notification {
+    border-bottom: none;
+  }
+
   .non-mention {
     display: flex;
     flex: 1;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index bfc97dc0..d5b2d1d5 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -36,7 +36,7 @@
             <notification :notification="notification" />
           </div>
         </div>
-        <div class="panel-footer notifications-footer">
+        <div class="panel-footer">
           <div
             v-if="bottomedOut"
             class="new-status-notification text-center faint"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index f79b5167..94f0e916 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -22,7 +22,8 @@ const Timeline = {
     'embedded',
     'count',
     'pinnedStatusIds',
-    'inProfile'
+    'inProfile',
+    'footerSlipgate' // reference to an element where we should put our footer
   ],
   data () {
     return {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 958808f6..ebf8ab52 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -46,37 +46,39 @@
       </div>
     </div>
     <div :class="classes.footer">
-      <div
-        v-if="count===0"
-        class="new-status-notification text-center faint"
-      >
-        {{ $t('timeline.no_statuses') }}
-      </div>
-      <div
-        v-else-if="bottomedOut"
-        class="new-status-notification text-center faint"
-      >
-        {{ $t('timeline.no_more_statuses') }}
-      </div>
-      <button
-        v-else-if="!timeline.loading"
-        class="button-unstyled -link"
-        @click.prevent="fetchOlderStatuses()"
-      >
-        <div class="new-status-notification text-center">
-          {{ $t('timeline.load_older') }}
+      <teleport :to="footerSlipgate" :disabled="!embedded || !footerSlipgate">
+        <div
+          v-if="count===0"
+          class="new-status-notification text-center faint"
+        >
+          {{ $t('timeline.no_statuses') }}
         </div>
-      </button>
-      <div
-        v-else
-        class="new-status-notification text-center"
-      >
-        <FAIcon
-          icon="circle-notch"
-          spin
-          size="lg"
-        />
-      </div>
+        <div
+          v-else-if="bottomedOut"
+          class="new-status-notification text-center faint"
+        >
+          {{ $t('timeline.no_more_statuses') }}
+        </div>
+        <button
+          v-else-if="!timeline.loading"
+          class="button-unstyled -link"
+          @click.prevent="fetchOlderStatuses()"
+        >
+          <div class="new-status-notification text-center">
+            {{ $t('timeline.load_older') }}
+          </div>
+        </button>
+        <div
+          v-else
+          class="new-status-notification text-center"
+        >
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
+        </div>
+      </teleport>
     </div>
   </div>
 </template>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index eeb6ea40..f779b823 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -39,7 +39,8 @@ const UserProfile = {
     return {
       error: false,
       userId: null,
-      tab: defaultTabKey
+      tab: defaultTabKey,
+      footerRef: null
     }
   },
   created () {
@@ -78,6 +79,9 @@ const UserProfile = {
     }
   },
   methods: {
+    setFooterRef (el) {
+      this.footerRef = el
+    },
     load (userNameOrId) {
       const startFetchingTimeline = (timeline, userId) => {
         // Clear timeline only if load another user's profile
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 67966ff4..74d101c4 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -56,6 +56,7 @@
           :user-id="userId"
           :pinned-status-ids="user.pinnedStatusIds"
           :in-profile="true"
+          :footerSlipgate="footerRef"
         />
         <div
           v-if="followsTabVisible"
@@ -94,6 +95,7 @@
           :timeline="media"
           :user-id="userId"
           :in-profile="true"
+          :footerSlipgate="footerRef"
         />
         <Timeline
           v-if="isUs"
@@ -105,8 +107,10 @@
           timeline-name="favorites"
           :timeline="favorites"
           :in-profile="true"
+          :footerSlipgate="footerRef"
         />
       </tab-switcher>
+      <div class="panel-footer" :ref="setFooterRef"></div>
     </div>
     <div
       v-else

From 318c62c8526f2513f9760dba9ccc48d8c27c7645 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 00:07:51 +0300
Subject: [PATCH 079/122] reduce height of post form by default

---
 src/App.scss                                         |  6 ++++--
 src/components/post_status_form/post_status_form.vue | 10 ++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 3d30ec79..3a0204d1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -440,6 +440,8 @@ textarea,
     height: unset;
   }
 
+  --padding: 0.5em;
+
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
@@ -456,10 +458,10 @@ textarea,
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  height: 2em;
+  height: 2.4em;
   line-height: 1.2;
   hyphens: none;
-  padding: 8px 0.5em;
+  padding: var(--padding);
 
   &:disabled,
   &[disabled=disabled],
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index ebeead07..a967d3a3 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -507,12 +507,14 @@
   }
 
   .form-post-body {
-    resize: none;
+    box-sizing: content-box;
     overflow: hidden;
     transition: min-height 200ms 100ms;
-    padding-bottom: 1.75em;
-    min-height: 2em;
-    box-sizing: content-box;
+    padding-bottom: calc(var(--padding) + 1.2em);
+    // Because we changed box-sizing original height values are no longer correct
+    height: 1.2em;
+    min-height: 1.2em;
+    resize: none;
 
     &.scrollable-form {
       overflow-y: auto;

From deece5758437d305d8df3db87c5012322e1e53c8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 00:10:33 +0300
Subject: [PATCH 080/122] better formatting

---
 src/components/conversation/conversation.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 48e7934c..ccedc121 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -251,14 +251,11 @@
   .thread-ancestor-has-other-replies .conversation-status,
   .thread-ancestor:last-child .conversation-status,
   .thread-ancestor:last-child .thread-ancestor-dive-box,
+  &:last-child .conversation-status,
   &.-expanded .thread-tree .conversation-status {
     border-bottom: none;
   }
 
-  &:last-child .conversation-status {
-    border-bottom: none;
-  }
-
   .thread-ancestors + .thread-tree > .conversation-status {
     border-top-width: 1px;
     border-top-style: solid;

From 1860bb354f0800f0f930c1ca8481f28c8f58a343 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 00:10:51 +0300
Subject: [PATCH 081/122] make panel height property private since it relies on
 font size

---
 src/components/timeline/timeline.scss | 2 +-
 src/panel.scss                        | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index d5dd05f2..897ebeb9 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,7 +10,7 @@
   }
 
   .conversation-heading {
-    top: calc(var(--panel-heading-height) * 2);
+    top: calc(var(--__panel-heading-height) * 2);
   }
 
   &.-nonpanel {
diff --git a/src/panel.scss b/src/panel.scss
index cdd7a291..b36ad9b7 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -33,9 +33,9 @@
 }
 
 .panel-heading {
-  --panel-heading-height: 3.2em;
   --panel-heading-height-padding: 0.6em;
-  --__panel-heading-height-inner: calc(var(--panel-heading-height) - 2 * var(--panel-heading-height-padding));
+  --__panel-heading-height: 3.2em;
+  --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
 
   position: relative;
   box-sizing: border-box;
@@ -55,7 +55,7 @@
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
   align-items: center;
-  height: var(--panel-heading-height);
+  height: var(--__panel-heading-height);
   z-index: 2;
 
   &.-flexible-height {

From a96367139ca1c5716dce738c0e24300fadaeafac Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 00:12:24 +0300
Subject: [PATCH 082/122] oops

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

diff --git a/src/panel.scss b/src/panel.scss
index b36ad9b7..2f0b9ba5 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -59,7 +59,7 @@
   z-index: 2;
 
   &.-flexible-height {
-    --panel-heading-height: auto;
+    --__panel-heading-height: auto;
 
     &::after,
     &::before {

From 079e289260bfdf0ac8804f43b09f0c14c5338f5d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 17:31:26 +0300
Subject: [PATCH 083/122] improvements and cleanup to input components

---
 src/App.scss                                      | 14 ++++++++++----
 src/components/chat_list_item/chat_list_item.scss |  4 ++--
 src/components/notifications/notifications.scss   |  2 +-
 .../post_status_form/post_status_form.vue         | 15 ++++++++-------
 src/components/status_body/status_body.scss       |  4 ++--
 .../user_reporting_modal/user_reporting_modal.vue |  2 +-
 6 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 3a0204d1..3ea31b97 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,6 +3,7 @@
 
 :root {
   --navbar-height: 3.5rem;
+  --post-line-height: 1.4;
 }
 
 html {
@@ -440,7 +441,7 @@ textarea,
     height: unset;
   }
 
-  --padding: 0.5em;
+  --_padding: 0.5em;
 
   border: none;
   border-radius: $fallback--inputRadius;
@@ -458,10 +459,9 @@ textarea,
   box-sizing: border-box;
   display: inline-block;
   position: relative;
-  height: 2.4em;
-  line-height: 1.2;
+  line-height: 2;
   hyphens: none;
-  padding: var(--padding);
+  padding: 0 var(--_padding);
 
   &:disabled,
   &[disabled=disabled],
@@ -563,6 +563,12 @@ textarea,
   }
 }
 
+// Textareas should have stock line-height + vertical padding instead of huge line-height
+textarea {
+  padding: var(--_padding);
+  line-height: var(--post-line-height);
+}
+
 option {
   color: $fallback--text;
   color: var(--text, $fallback--text);
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 57332bed..c6b45c34 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -43,7 +43,7 @@
     white-space: nowrap;
     overflow: hidden;
     flex-shrink: 1;
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
   }
 
   .chat-preview {
@@ -82,7 +82,7 @@
   }
 
   .time-wrapper {
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
   }
 
   .chat-preview-body {
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 07abee27..3d3408f7 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -119,7 +119,7 @@
   .notification-details {
     min-width: 0;
     word-wrap: break-word;
-    line-height: 1.4;
+    line-height: var(--post-line-height);
     position: relative;
     overflow: hidden;
     width: 100%;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a967d3a3..62613bd1 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -394,7 +394,6 @@
     border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
     padding: 0.5em;
     margin: 0;
-    line-height: 1.4em;
   }
 
   .text-format {
@@ -503,17 +502,19 @@
     display: flex;
     flex-direction: column;
     padding: 0.25em 0.5em 0.5em;
-    line-height: 1.85em;
+    line-height: 1.85;
   }
 
   .form-post-body {
-    box-sizing: content-box;
+    // TODO: make a resizable textarea component?
+    box-sizing: content-box; // needed for easier computation of dynamic size
     overflow: hidden;
     transition: min-height 200ms 100ms;
-    padding-bottom: calc(var(--padding) + 1.2em);
-    // Because we changed box-sizing original height values are no longer correct
-    height: 1.2em;
-    min-height: 1.2em;
+    // stock padding + 1 line of text (for counter)
+    padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
+    // two lines of text
+    height: calc(var(--post-line-height) * 1em);
+    min-height: calc(var(--post-line-height) * 1em);
     resize: none;
 
     &.scrollable-form {
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index f261108e..1c1ecea2 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -19,7 +19,7 @@
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
   }
 
   .summary {
@@ -33,7 +33,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      height: 1.4em;
+      height: 1.4;
     }
   }
 
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index ba12a246..030ce2c4 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -87,7 +87,7 @@
 
   &-left {
     padding: 1.1em 0.7em 0.7em;
-    line-height: 1.4em;
+    line-height: var(--post-line-height);
     box-sizing: border-box;
 
     > div {

From 49db16318b8072cf15f2ffd5a8a237ee86034b74 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 18:12:45 +0300
Subject: [PATCH 084/122] more fixes for shoutbox

---
 src/App.js                                 |  2 +-
 src/App.vue                                |  2 +-
 src/components/shout_panel/shout_panel.vue | 19 ++++++++++---------
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/App.js b/src/App.js
index 19c58595..f01f8788 100644
--- a/src/App.js
+++ b/src/App.js
@@ -91,7 +91,7 @@ export default {
     },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
     shoutboxPosition () {
-      return this.$store.getters.mergedConfig.showNewPostButton || false
+      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
     },
     hideShoutbox () {
       return this.$store.getters.mergedConfig.hideShoutbox
diff --git a/src/App.vue b/src/App.vue
index 707b91e5..5b448972 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -47,7 +47,7 @@
       v-if="currentUser && shout && !hideShoutbox"
       :floating="true"
       class="floating-shout mobile-hidden"
-      :class="{ 'left': shoutboxPosition }"
+      :class="{ '-left': shoutboxPosition }"
     />
     <MobilePostStatusButton />
     <UserReportingModal />
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index f3e9ff96..1eca88a7 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -57,7 +57,7 @@
   >
     <div class="panel panel-default">
       <div
-        class="panel-heading stub timeline-heading shout-heading"
+        class="panel-heading -stub timeline-heading shout-heading"
         @click.stop.prevent="togglePanel"
       >
         <div class="title">
@@ -79,17 +79,17 @@
 
 .floating-shout {
   position: fixed;
-  bottom: 0px;
+  bottom: 0.5em;
   z-index: 1000;
   max-width: 25em;
-}
 
-.floating-shout.left {
-  left: 0px;
-}
+  &.-left {
+    left: 0.5em;
+  }
 
-.floating-shout:not(.left) {
-  right: 0px;
+  &:not(.-left) {
+    right: 0.5em;
+  }
 }
 
 .shout-panel {
@@ -121,7 +121,7 @@
 
   .shout-message {
     display: flex;
-    padding: 0.2em 0.5em
+    padding: 0.2em 0.5em;
   }
 
   .shout-avatar {
@@ -137,6 +137,7 @@
 
   .shout-input {
     display: flex;
+
     textarea {
       flex: 1;
       margin: 0.6em;

From f0f56bf1485dfbfa73fda5437fa928ce61b4b43a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 18:11:46 +0300
Subject: [PATCH 085/122] more cleanup/fixes, gap b/w panels and topbar is
 closer to original now

---
 src/App.scss   |  5 ++--
 src/panel.scss | 80 ++++++++++++++++++++++++++------------------------
 2 files changed, 44 insertions(+), 41 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 3ea31b97..d319aa52 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -202,7 +202,7 @@ nav {
     grid-row-start: 1;
     grid-row-end: 1;
     margin: 0 calc(var(--___columnMargin) / 2);
-    padding: calc(var(--___columnMargin) / 2) 0;
+    padding: calc(var(--___columnMargin)) 0;
     row-gap: var(--___columnMargin);
     align-content: start;
 
@@ -218,7 +218,6 @@ nav {
     &.-scrollable {
       --___paddingIncrease: calc(var(--columnGap) / 2);
 
-      padding-top: calc(var(--columnGap) / 2);
       position: sticky;
       top: var(--navbar-height);
       max-height: calc(100vh - var(--navbar-height));
@@ -243,7 +242,7 @@ nav {
       }
 
       .panel-heading.-sticky {
-        top: calc(var(--columnGap) / -2);
+        top: calc(var(--columnGap) / -1);
       }
     }
   }
diff --git a/src/panel.scss b/src/panel.scss
index 2f0b9ba5..b801976b 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -32,7 +32,8 @@
   text-align: center;
 }
 
-.panel-heading {
+.panel-heading,
+.panel-footer {
   --panel-heading-height-padding: 0.6em;
   --__panel-heading-height: 3.2em;
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
@@ -45,17 +46,10 @@
   grid-auto-columns: auto;
   grid-column-gap: 0.5em;
   flex: none;
-  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
   background-size: cover;
-  padding: 0.6em 0.6em;
-  text-align: left;
-  line-height: var(--__panel-heading-height-inner);
-  color: var(--panelText);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-  align-items: center;
+  padding: 0.6em;
   height: var(--__panel-heading-height);
+  line-height: var(--__panel-heading-height-inner);
   z-index: 2;
 
   &.-flexible-height {
@@ -67,6 +61,14 @@
     }
   }
 
+  &.-stub {
+    &,
+    &::after {
+      border-radius: $fallback--panelRadius;
+      border-radius: var(--panelRadius, $fallback--panelRadius);
+    }
+  }
+
   &.-sticky {
     position: sticky;
     top: var(--navbar-height);
@@ -83,15 +85,6 @@
     pointer-events: none;
   }
 
-  &::after {
-    background-color: $fallback--fg;
-    background-color: var(--panel, $fallback--fg);
-    z-index: -2;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    box-shadow: var(--panelHeaderShadow);
-  }
-
   .title {
     font-size: 1.3em;
   }
@@ -125,7 +118,37 @@
       padding-bottom: 0;
       align-self: stretch;
     }
+  }
+}
 
+// TODO Should refactor panels into separate component and utilize slots
+
+.panel-heading {
+  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+  border-width: 0 0 1px 0;
+  align-items: left;
+  // panel theme
+  color: var(--panelText);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
+  &::after {
+    background-color: $fallback--fg;
+    background-color: var(--panel, $fallback--fg);
+    z-index: -2;
+    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
+    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    box-shadow: var(--panelHeaderShadow);
+  }
+
+  a,
+  .-link {
+    color: $fallback--link;
+    color: var(--panelLink, $fallback--link);
+  }
+
+  &:not(.-flexible-height) {
     > .button-default {
       flex-shrink: 0;
 
@@ -153,30 +176,11 @@
       }
     }
   }
-
-  a,
-  .-link {
-    color: $fallback--link;
-    color: var(--panelLink, $fallback--link);
-  }
 }
 
-.panel-heading.stub {
-  border-radius: $fallback--panelRadius;
-  border-radius: var(--panelRadius, $fallback--panelRadius);
-}
-
-/* TODO Should remove timeline-footer from here when we refactor panels into
- * separate component and utilize slots
- */
 .panel-footer {
-  display: flex;
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-  flex: none;
-  padding: 0.6em 0.6em;
-  text-align: left;
-  line-height: 2;
   align-items: center;
   border-width: 1px 0 0 0;
   border-style: solid;

From 4e4c96dfaf5c16cb6c0e965601bbd53070f198a0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 18:15:12 +0300
Subject: [PATCH 086/122] fix for notices being glued together

---
 .../global_notice_list/global_notice_list.vue         | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index a45f4586..ddc45b81 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -44,20 +44,18 @@
     max-width: calc(100% - 3em);
     display: flex;
     padding-left: 1.5em;
-    line-height: 2em;
+    line-height: 2;
+    margin-bottom: 0.5em;
+
     .notice-message {
       flex: 1 1 100%;
     }
-    i {
-      flex: 0 0;
-      width: 1.5em;
-      cursor: pointer;
-    }
   }
 
   .global-error {
     background-color: var(--alertPopupError, $fallback--cRed);
     color: var(--alertPopupErrorText, $fallback--text);
+
     .svg-inline--fa {
       color: var(--alertPopupErrorText, $fallback--text);
     }
@@ -66,6 +64,7 @@
   .global-warning {
     background-color: var(--alertPopupWarning, $fallback--cOrange);
     color: var(--alertPopupWarningText, $fallback--text);
+
     .svg-inline--fa {
       color: var(--alertPopupWarningText, $fallback--text);
     }

From cc8448565083031ff6bb7afaecbf43f26eff608f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 18:50:11 +0300
Subject: [PATCH 087/122] improvements to chats view

---
 src/App.scss                  | 8 ++++++--
 src/components/chat/chat.scss | 5 -----
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index d319aa52..018d0313 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -140,7 +140,6 @@ nav {
 }
 
 #main-scroller {
-  margin-top: var(--navbar-height);
   grid-area: content;
   position: relative;
 }
@@ -206,13 +205,18 @@ nav {
     row-gap: var(--___columnMargin);
     align-content: start;
 
+    &:not(.-scrollable) {
+      margin-top: var(--navbar-height);
+    }
+
     &:hover {
       z-index: 2;
     }
 
     &.-full-height {
-      margin-top: 0;
       margin-bottom: 0;
+      padding-top: 0;
+      padding-bottom: 0;
     }
 
     &.-scrollable {
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 90926904..9c98871d 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -1,9 +1,6 @@
 .chat-view {
   display: flex;
   height: 100%;
-  // Stick the form to the top/bottom of screen
-  margin-bottom: calc(var(--___columnMargin) / -2);
-  margin-top: calc(var(--___columnMargin) / -2);
 
   .chat-view-inner {
     height: auto;
@@ -23,8 +20,6 @@
     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;

From e5be00dae14a6578c6d37bf49920eefac6fab67a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 18:55:21 +0300
Subject: [PATCH 088/122] fix mobile version

---
 src/App.scss | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 018d0313..d62d9ac2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -294,7 +294,11 @@ nav {
     padding: 0;
 
     .column {
-      margin: 0;
+      margin-left: 0;
+      margin-right: 0;
+      padding-top: 0;
+      margin-top: var(--navbar-height);
+      margin-bottom: 0;
     }
 
     .underlay,

From 5775abb25cb69900f99197301a2dcf6d68fdcd70 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 28 Apr 2022 10:52:41 +0300
Subject: [PATCH 089/122] fix panel footer colors

---
 src/panel.scss | 33 +++++++++++----------------------
 1 file changed, 11 insertions(+), 22 deletions(-)

diff --git a/src/panel.scss b/src/panel.scss
index b801976b..d9e2efb6 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -89,17 +89,6 @@
     font-size: 1.3em;
   }
 
-  .faint {
-    background-color: transparent;
-    color: $fallback--faint;
-    color: var(--panelFaint, $fallback--faint);
-  }
-
-  .faint-link {
-    color: $fallback--faint;
-    color: var(--faintLink, $fallback--faint);
-  }
-
   .alert {
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -148,6 +137,17 @@
     color: var(--panelLink, $fallback--link);
   }
 
+  .faint {
+    background-color: transparent;
+    color: $fallback--faint;
+    color: var(--panelFaint, $fallback--faint);
+  }
+
+  .faint-link {
+    color: $fallback--faint;
+    color: var(--faintLink, $fallback--faint);
+  }
+
   &:not(.-flexible-height) {
     > .button-default {
       flex-shrink: 0;
@@ -185,17 +185,6 @@
   border-width: 1px 0 0 0;
   border-style: solid;
   border-color: var(--border, $fallback--border);
-
-  .faint {
-    color: $fallback--faint;
-    color: var(--panelFaint, $fallback--faint);
-  }
-
-  a,
-  .-link {
-    color: $fallback--link;
-    color: var(--panelLink, $fallback--link);
-  }
 }
 
 .panel-body > p {

From 23c5627639620704b9768412ad13b30e5bc14409 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 28 Apr 2022 10:57:06 +0300
Subject: [PATCH 090/122] sort and optimize panel.scss

---
 src/panel.scss | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/panel.scss b/src/panel.scss
index d9e2efb6..5737f54e 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -25,11 +25,21 @@
   }
 }
 
-.panel-body:empty::before {
-  content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
-  display: block;
-  margin: 1em;
-  text-align: center;
+.panel-body {
+  padding: var(--panel-body-padding, 0);
+
+  &:empty::before {
+    content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
+    display: block;
+    margin: 1em;
+    text-align: center;
+  }
+
+  > p {
+    line-height: 1.3;
+    padding: 1em;
+    margin: 0;
+  }
 }
 
 .panel-heading,
@@ -186,13 +196,3 @@
   border-style: solid;
   border-color: var(--border, $fallback--border);
 }
-
-.panel-body > p {
-  line-height: 1.3;
-  padding: 1em;
-  margin: 0;
-}
-
-.panel-body {
-  padding: var(--panel-body-padding, 0);
-}

From 4d720974c385042d558bee4ac8b6dccf57cb347f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 28 Apr 2022 16:36:53 +0300
Subject: [PATCH 091/122] minor fixes

---
 src/components/timeline/timeline.scss | 8 +++++---
 src/panel.scss                        | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 897ebeb9..f5d22f47 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -20,9 +20,11 @@
       padding: 0 0.5em;
     }
 
-    .button-default, .alert {
-      line-height: 2em;
-      width: 100%;
+    .timeline-heading {
+      .button-default, .alert {
+        line-height: 2em;
+        width: 100%;
+      }
     }
   }
 }
diff --git a/src/panel.scss b/src/panel.scss
index 5737f54e..fb9d1731 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -126,7 +126,7 @@
   border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
   border-width: 0 0 1px 0;
-  align-items: left;
+  align-items: start;
   // panel theme
   color: var(--panelText);
   background-color: $fallback--bg;

From a5e861cd019eb7770b8524ecdb6237f33fd18d12 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 26 Mar 2022 12:21:34 -0400
Subject: [PATCH 092/122] Set userLanguage cookie when setting interface
 language

---
 package.json                                  |  1 +
 .../interface_language_switcher.vue           | 26 +++++++-----------
 .../settings_modal/tabs/general_tab.js        |  6 +++++
 .../settings_modal/tabs/general_tab.vue       |  5 +++-
 src/modules/config.js                         |  6 +++++
 src/services/locale/locale.service.js         | 27 +++++++++++++++++--
 yarn.lock                                     |  5 ++++
 7 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index e9a246b3..ab9043d3 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "cropperjs": "1.5.12",
     "diff": "3.5.0",
     "escape-html": "1.0.3",
+    "js-cookie": "^3.0.1",
     "localforage": "1.10.0",
     "parse-link-header": "1.0.1",
     "phoenix": "1.6.2",
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 6d1f83c4..757ec01f 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -6,7 +6,7 @@
     {{ ' ' }}
     <Select
       id="interface-language-switcher"
-      v-model="language"
+      v-model="controlledLanguage"
     >
       <option
         v-for="lang in languages"
@@ -20,39 +20,33 @@
 </template>
 
 <script>
-import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
-import ISO6391 from 'iso-639-1'
-import _ from 'lodash'
 import Select from '../select/select.vue'
 
 export default {
   components: {
     Select
   },
+  props: {
+    language: String,
+    setLanguage: Function
+  },
   computed: {
     languages () {
-      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+      return localeService.languages
     },
 
-    language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+    controlledLanguage: {
+      get: function () { return this.language },
       set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+        this.setLanguage(val)
       }
     }
   },
 
   methods: {
     getLanguageName (code) {
-      const specialLanguageNames = {
-        'ja_easy': 'やさしいにほんご',
-        'zh': '简体中文',
-        'zh_Hant': '繁體中文'
-      }
-      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
-      const browserLocale = localeService.internalToBrowserLocale(code)
-      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+      return localeService.getLanguageName(code)
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 62d86176..de925155 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -72,6 +72,12 @@ const GeneralTab = {
         !this.$store.state.users.currentUser.background_image
     },
     instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+      }
+    },
     ...SharedComputedObject()
   },
   methods: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index a2c6bffa..5bc0f516 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -4,7 +4,10 @@
       <h2>{{ $t('settings.interface') }}</h2>
       <ul class="setting-list">
         <li>
-          <interface-language-switcher />
+          <interface-language-switcher
+            :language="language"
+            :set-language="val => language = val"
+          />
         </li>
         <li v-if="instanceSpecificPanelPresent">
           <BooleanSetting path="hideISP">
diff --git a/src/modules/config.js b/src/modules/config.js
index ff5ef270..eeefd896 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,5 +1,10 @@
+import { set, delete as del } from 'vue'
+import Cookies from 'js-cookie'
 import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
+import localeService from '../services/locale/locale.service.js'
+
+const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
 
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
@@ -162,6 +167,7 @@ const config = {
           break
         case 'interfaceLanguage':
           messages.setLanguage(this.getters.i18n, value)
+          Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value))
           break
       }
     }
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index 5be99d81..8cef2522 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -1,12 +1,35 @@
+import languagesObject from '../../i18n/messages'
+import ISO6391 from 'iso-639-1'
+import _ from 'lodash'
+
 const specialLanguageCodes = {
   'ja_easy': 'ja',
-  'zh_Hant': 'zh-HANT'
+  'zh_Hant': 'zh-HANT',
+  'zh': 'zh-Hans'
 }
 
 const internalToBrowserLocale = code => specialLanguageCodes[code] || code
 
+const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_', '-')
+
+const getLanguageName = (code) => {
+  const specialLanguageNames = {
+    'ja_easy': 'やさしいにほんご',
+    'zh': '简体中文',
+    'zh_Hant': '繁體中文'
+  }
+  const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
+  const browserLocale = internalToBrowserLocale(code)
+  return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+}
+
+const languages = _.map(languagesObject.languages, (code) => ({ code: code, name: getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+
 const localeService = {
-  internalToBrowserLocale
+  internalToBrowserLocale,
+  internalToBackendLocale,
+  languages,
+  getLanguageName
 }
 
 export default localeService
diff --git a/yarn.lock b/yarn.lock
index 042d87ac..cd96543b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5722,6 +5722,11 @@ js-base64@^2.1.9:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.0.tgz#42255ba183ab67ce59a0dee640afdc00ab5ae93e"
 
+js-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
+  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"

From d39de3022108c4a42d20fe2a38265179ae0062f9 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 26 Mar 2022 12:39:26 -0400
Subject: [PATCH 093/122] Add config opts for email language

---
 .../interface_language_switcher.vue           | 16 ++++++--
 .../settings_modal/tabs/general_tab.vue       |  1 +
 .../settings_modal/tabs/profile_tab.js        | 38 ++++++++++++-------
 .../settings_modal/tabs/profile_tab.vue       |  7 ++++
 src/services/api/api.service.js               |  1 +
 5 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 757ec01f..078535dc 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <label for="interface-language-switcher">
-      {{ $t('settings.interfaceLanguage') }}
+      {{ promptText }}
     </label>
     {{ ' ' }}
     <Select
@@ -28,8 +28,18 @@ export default {
     Select
   },
   props: {
-    language: String,
-    setLanguage: Function
+    promptText: {
+      type: String,
+      required: true
+    },
+    language: {
+      type: String,
+      required: true
+    },
+    setLanguage: {
+      type: String,
+      required: true
+    }
   },
   computed: {
     languages () {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 5bc0f516..39149d7f 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -5,6 +5,7 @@
       <ul class="setting-list">
         <li>
           <interface-language-switcher
+            :prompt-text="$t('settings.interfaceLanguage')"
             :language="language"
             :set-language="val => language = val"
           />
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index bee8a7bb..953f17f0 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -8,8 +8,10 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import localeService from 'src/services/locale/locale.service.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -40,7 +42,8 @@ const ProfileTab = {
       banner: null,
       bannerPreview: null,
       background: null,
-      backgroundPreview: null
+      backgroundPreview: null,
+      emailLanguage: this.$store.state.users.currentUser.language
     }
   },
   components: {
@@ -50,7 +53,8 @@ const ProfileTab = {
     Autosuggest,
     ProgressButton,
     Checkbox,
-    BooleanSetting
+    BooleanSetting,
+    InterfaceLanguageSwitcher
   },
   computed: {
     user () {
@@ -111,19 +115,25 @@ const ProfileTab = {
   },
   methods: {
     updateProfile () {
+      const params = {
+        note: this.newBio,
+        locked: this.newLocked,
+        // Backend notation.
+        /* eslint-disable camelcase */
+        display_name: this.newName,
+        fields_attributes: this.newFields.filter(el => el != null),
+        bot: this.bot,
+        show_role: this.showRole,
+        /* eslint-enable camelcase */
+      }
+
+      if (this.emailLanguage) {
+        params.language = localeService.internalToBackendLocale(this.emailLanguage)
+      }
+
       this.$store.state.api.backendInteractor
-        .updateProfile({
-          params: {
-            note: this.newBio,
-            locked: this.newLocked,
-            // Backend notation.
-            /* eslint-disable camelcase */
-            display_name: this.newName,
-            fields_attributes: this.newFields.filter(el => el != null),
-            bot: this.bot,
-            show_role: this.showRole
-            /* eslint-enable camelcase */
-          } }).then((user) => {
+        .updateProfile({ params })
+        .then((user) => {
           this.newFields.splice(user.fields.length)
           merge(this.newFields, user.fields)
           this.$store.commit('addNewUsers', [user])
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 881016fb..4cd93772 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -89,6 +89,13 @@
           {{ $t('settings.bot') }}
         </Checkbox>
       </p>
+      <p>
+        <interface-language-switcher
+          :prompt-text="$t('settings.email_language')"
+          :language="emailLanguage"
+          :set-language="val => emailLanguage = val"
+        />
+      </p>
       <button
         :disabled="newName && newName.length === 0"
         class="btn button-default"
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 436b8b0a..1b1722ab 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -191,6 +191,7 @@ const updateProfile = ({ credentials, params }) => {
 // homepage
 // location
 // token
+// language
 const register = ({ params, credentials }) => {
   const { nickname, ...rest } = params
   return fetch(MASTODON_REGISTRATION_URL, {

From 1d36ea5ec58c8df870a0c6c1ec267b78b8db28f0 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 26 Mar 2022 13:03:23 -0400
Subject: [PATCH 094/122] Add email language option to registration form

---
 .../interface_language_switcher.vue                |  2 +-
 src/components/registration/registration.js        | 14 ++++++++++++--
 src/components/registration/registration.vue       | 12 ++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 078535dc..7ad1fe2e 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -37,7 +37,7 @@ export default {
       required: true
     },
     setLanguage: {
-      type: String,
+      type: Function,
       required: true
     }
   },
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index a3ef0f04..e3f6b875 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -1,6 +1,8 @@
 import useVuelidate from '@vuelidate/core'
 import { required, requiredIf, sameAs } from '@vuelidate/validators'
 import { mapActions, mapState } from 'vuex'
+import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
+import localeService from '../../services/locale/locale.service.js'
 
 const registration = {
   setup () { return { v$: useVuelidate() } },
@@ -11,10 +13,14 @@ const registration = {
       username: '',
       password: '',
       confirm: '',
-      reason: ''
+      reason: '',
+      language: '',
     },
     captcha: {}
   }),
+  components: {
+    InterfaceLanguageSwitcher
+  },
   validations () {
     return {
       user: {
@@ -26,7 +32,8 @@ const registration = {
           required,
           sameAs: sameAs(this.user.password)
         },
-        reason: { required: requiredIf(() => this.accountApprovalRequired) }
+        reason: { required: requiredIf(() => this.accountApprovalRequired) },
+        language: {}
       }
     }
   },
@@ -64,6 +71,9 @@ const registration = {
       this.user.captcha_solution = this.captcha.solution
       this.user.captcha_token = this.captcha.token
       this.user.captcha_answer_data = this.captcha.answer_data
+      if (this.user.language) {
+        this.user.language = localeService.internalToBackendLocale(this.user.language)
+      }
 
       this.v$.$touch()
 
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 3d409109..6fa70a09 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -162,6 +162,18 @@
               </ul>
             </div>
 
+            <div
+              class="form-group"
+              :class="{ 'form-group--error': $v.user.language.$error }"
+            >
+              <interface-language-switcher
+                for="email-language"
+                :prompt-text="$t('registration.email_language')"
+                :language="$v.user.language.$model"
+                :set-language="val => $v.user.language.$model = val"
+              />
+            </div>
+
             <div
               v-if="accountApprovalRequired"
               class="form-group"

From 093c85d006fac375bcdbf38964da9c011e4f00f3 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 26 Mar 2022 13:03:39 -0400
Subject: [PATCH 095/122] Add English translation for language options

---
 src/i18n/en.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index f8336e5c..76a29426 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -254,7 +254,8 @@
       "password_required": "cannot be left blank",
       "password_confirmation_required": "cannot be left blank",
       "password_confirmation_match": "should be the same as password"
-    }
+    },
+    "email_language": "In which language do you want to receive emails from the server?"
   },
   "remote_user_resolver": {
     "remote_user_resolver": "Remote user resolver",
@@ -303,6 +304,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
+    "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",
     "block_import": "Block import",

From 3633ea66d4c6f362510788f3ae7ae4cad020629a Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Sat, 26 Mar 2022 13:08:22 -0400
Subject: [PATCH 096/122] Make lint happy

---
 src/components/registration/registration.js       | 2 +-
 src/components/settings_modal/tabs/profile_tab.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index e3f6b875..6eb316d0 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -14,7 +14,7 @@ const registration = {
       password: '',
       confirm: '',
       reason: '',
-      language: '',
+      language: ''
     },
     captcha: {}
   }),
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 953f17f0..9a8628f0 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -43,7 +43,7 @@ const ProfileTab = {
       bannerPreview: null,
       background: null,
       backgroundPreview: null,
-      emailLanguage: this.$store.state.users.currentUser.language
+      emailLanguage: this.$store.state.users.currentUser.language || ''
     }
   },
   components: {
@@ -123,7 +123,7 @@ const ProfileTab = {
         display_name: this.newName,
         fields_attributes: this.newFields.filter(el => el != null),
         bot: this.bot,
-        show_role: this.showRole,
+        show_role: this.showRole
         /* eslint-enable camelcase */
       }
 

From f57171d7b97d344d1a30df4cf6e5a5b29a8e2b5d Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 29 Apr 2022 20:36:56 -0400
Subject: [PATCH 097/122] Make lint happy

---
 src/modules/config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/modules/config.js b/src/modules/config.js
index eeefd896..10d1a90a 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,4 +1,3 @@
-import { set, delete as del } from 'vue'
 import Cookies from 'js-cookie'
 import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'

From 45614b8804a669c73a457a16a359d22470dcbda5 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Mon, 2 May 2022 09:06:51 +0000
Subject: [PATCH 098/122] Update dependency @vuelidate/core to v2.0.0-alpha.41

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index e9a246b3..0c172047 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/vue-fontawesome": "3.0.0-5",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
-    "@vuelidate/core": "2.0.0-alpha.35",
+    "@vuelidate/core": "2.0.0-alpha.41",
     "@vuelidate/validators": "2.0.0-alpha.27",
     "body-scroll-lock": "2.7.1",
     "chromatism": "3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 042d87ac..03756aea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1559,10 +1559,10 @@
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.0.0-rc.17.tgz#e6dcf5b5bd3ae23595bdb154b9b578ebcdffd698"
   integrity sha512-7LHZKsFRV/HqDoMVY+cJamFzgHgsrmQFalROHC5FMWrzPzd+utG5e11krj1tVsnxYufGA2ABShX4nlcHXED+zQ==
 
-"@vuelidate/core@2.0.0-alpha.35":
-  version "2.0.0-alpha.35"
-  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.0-alpha.35.tgz#22d91787147b0883d31585fab44d0218622b7560"
-  integrity sha512-BSGQElu5lyI0GzqehFzUWy7GXhEUC7Z8oEpdxgCyGGN5gOFlAQ5Zr4dDFzfIOhU4jik3CfPHK+i+Juqg2OCKNw==
+"@vuelidate/core@2.0.0-alpha.41":
+  version "2.0.0-alpha.41"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.0-alpha.41.tgz#eb4644aa45755c20901b4b8d20e1fecfd5389142"
+  integrity sha512-fST7s5wiLW8ZNTexe8+7fDdBZYT7HjbuA43/XDtKTlHs1BMRDDaBoFLZbHSqmHisQvGXa7zLG9bvG8X5cHZaxg==
   dependencies:
     vue-demi "^0.12.0"
 

From 4a956fa18df73c1aa4d01cfe3008a512682d2b62 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:07:55 +0300
Subject: [PATCH 099/122] fix hidden input for file upload causing unintended
 scrolls

---
 src/components/media_upload/media_upload.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 2668a34f..56f67d35 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -17,9 +17,9 @@
     />
     <input
       v-if="uploadReady"
+      class="hidden-input-file"
       :disabled="disabled"
       type="file"
-      style="position: fixed; top: -100em; max-width: 0; max-height: 0"
       multiple="true"
       @change="change"
     >
@@ -33,5 +33,12 @@
 
 .media-upload {
   cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
+
+  .hidden-input-file {
+    max-width: 0;
+    max-height: 0;
+    pointer-events: none;
+    opacity: 0;
+  }
 }
  </style>

From fb70ea3b9510e579d5b596883a546a28a7dc297c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:11:50 +0300
Subject: [PATCH 100/122] fix panel overlaps in firefox

---
 src/components/timeline/timeline.scss | 1 +
 src/panel.scss                        | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index f5d22f47..bed2a175 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -11,6 +11,7 @@
 
   .conversation-heading {
     top: calc(var(--__panel-heading-height) * 2);
+    z-index: 1;
   }
 
   &.-nonpanel {
diff --git a/src/panel.scss b/src/panel.scss
index fb9d1731..a14e732f 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -60,7 +60,7 @@
   padding: 0.6em;
   height: var(--__panel-heading-height);
   line-height: var(--__panel-heading-height-inner);
-  z-index: 2;
+  z-index: 3;
 
   &.-flexible-height {
     --__panel-heading-height: auto;

From cc1e3c6792747553cb1b2aa55a2a9077e3eefa2d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:14:58 +0300
Subject: [PATCH 101/122] fix incorrect sticking in user profile page

---
 src/components/timeline/timeline.scss        | 2 +-
 src/components/user_profile/user_profile.vue | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index bed2a175..c7ea0dff 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,7 +10,7 @@
   }
 
   .conversation-heading {
-    top: calc(var(--__panel-heading-height) * 2);
+    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
     z-index: 1;
   }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 74d101c4..62792599 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -142,6 +142,9 @@
   flex: 2;
   flex-basis: 500px;
 
+  // No sticky header on user profile
+  --currentPanelStack: 1;
+
   .user-profile-fields {
     margin: 0 0.5em;
 

From 54a40bfa01b64214b45f1d1142cb6bc2909a8673 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:18:39 +0300
Subject: [PATCH 102/122] fix inline conversation's shadow showing through
 outer header

---
 src/components/conversation/conversation.vue | 2 ++
 src/panel.scss                               | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index ccedc121..6088e1ca 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -201,6 +201,8 @@
 @import '../../_variables.scss';
 
 .Conversation {
+  z-index: 1;
+
   .conversation-dive-to-top-level-box {
     padding: var(--status-margin, $status-margin);
     border-bottom-width: 1px;
diff --git a/src/panel.scss b/src/panel.scss
index a14e732f..3a814269 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -18,7 +18,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 3;
+    z-index: 5;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     pointer-events: none;
@@ -60,7 +60,7 @@
   padding: 0.6em;
   height: var(--__panel-heading-height);
   line-height: var(--__panel-heading-height-inner);
-  z-index: 3;
+  z-index: 4;
 
   &.-flexible-height {
     --__panel-heading-height: auto;

From ce8722b0e67bd69cfcd5c43a311e0da0c5f6ce87 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:22:01 +0300
Subject: [PATCH 103/122] don't show "up to date" in user profile TL

---
 src/components/timeline/timeline.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index ebf8ab52..f65881b6 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -10,7 +10,7 @@
         {{ loadButtonString }}
       </button>
       <div
-        v-else
+        v-else-if="!embedded"
         class="loadmore-text faint"
         @click.prevent
       >

From edbbbaad48311d5d791183f724e819926c09e638 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:24:35 +0300
Subject: [PATCH 104/122] don't use wide mode for anon viewers

---
 src/components/settings_modal/tabs/general_tab.vue | 1 +
 src/modules/interface.js                           | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index db8718cf..79c69449 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -72,6 +72,7 @@
         </li>
         <li>
           <ChoiceSetting
+            v-if="user"
             id="thirdColumnMode"
             path="thirdColumnMode"
             :options="thirdColumnModeOptions"
diff --git a/src/modules/interface.js b/src/modules/interface.js
index ed31b6ff..a86193ea 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -134,7 +134,7 @@ const interfaceMod = {
       commit('setLayoutHeight', value)
     },
     // value is optional, assuming it was cached prior
-    setLayoutWidth ({ commit, state, rootGetters }, value) {
+    setLayoutWidth ({ commit, state, rootGetters, rootState }, value) {
       let width = value
       if (value !== undefined) {
         commit('setLayoutWidth', value)
@@ -144,7 +144,7 @@ const interfaceMod = {
       const mobileLayout = width <= 800
       const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
       const { thirdColumnMode } = rootGetters.mergedConfig
-      if (thirdColumnMode === 'none') {
+      if (thirdColumnMode === 'none' || !rootState.users.currentUser) {
         commit('setLayoutType', normalOrMobile)
       } else {
         const wideLayout = width >= 1300

From 8d93e9c13c509446e46b6ea0bbb126e42be0f618 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 16 May 2022 23:40:51 +0300
Subject: [PATCH 105/122] set/unset threecolumn mode on login/logout

---
 src/modules/users.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/modules/users.js b/src/modules/users.js
index e5889fdb..f951483f 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -1,4 +1,5 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
+import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import oauthApi from '../services/new_api/oauth.js'
 import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
 import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
@@ -506,6 +507,8 @@ const users = {
           store.commit('resetStatuses')
           store.dispatch('resetChats')
           store.dispatch('setLastTimeline', 'public-timeline')
+          store.dispatch('setLayoutWidth', windowWidth())
+          store.dispatch('setLayoutHeight', windowHeight())
         })
     },
     loginUser (store, accessToken) {
@@ -566,6 +569,9 @@ const users = {
               // Get user mutes
               store.dispatch('fetchMutes')
 
+              store.dispatch('setLayoutWidth', windowWidth())
+              store.dispatch('setLayoutHeight', windowHeight())
+
               // Fetch our friends
               store.rootState.api.backendInteractor.fetchFriends({ id: user.id })
                 .then((friends) => commit('addNewUsers', friends))

From a45a05fbb2358af4b3ec20e6a7520683918e1499 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 16 May 2022 23:46:32 +0300
Subject: [PATCH 106/122] try out fully hidden input field

---
 src/components/media_upload/media_upload.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 56f67d35..7cc59f5a 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -35,10 +35,7 @@
   cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
 
   .hidden-input-file {
-    max-width: 0;
-    max-height: 0;
-    pointer-events: none;
-    opacity: 0;
+    display: none;
   }
 }
  </style>

From c83657a072dc0d6e77a9c866147094099fb5dc24 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 May 2022 00:28:34 +0300
Subject: [PATCH 107/122] stick chats to bottom

---
 src/components/chat/chat.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 9c98871d..f2e154ab 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -31,6 +31,7 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    justify-content: end;
   }
 
   .footer {

From df487e3980f7128fa366ea25e99bed17af114d52 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 20 May 2022 12:39:46 -0400
Subject: [PATCH 108/122] Show poll-end notifications

Ref: poll-notif
---
 src/components/notification/notification.vue          | 8 ++++++++
 src/services/notification_utils/notification_utils.js | 8 ++++++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 9ecb034f..7d3d0c69 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -120,6 +120,14 @@
                 </i18n-t>
               </small>
             </span>
+            <span v-if="notification.type === 'poll'">
+              <FAIcon
+                class="type-icon"
+                icon="poll-h"
+              />
+              {{ ' ' }}
+              <small>{{ $t('notifications.poll_ended') }}</small>
+            </span>
           </div>
           <div
             v-if="isStatusNotification"
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 6fef1022..8a05f77b 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -14,11 +14,12 @@ export const visibleTypes = store => {
     rootState.config.notificationVisibility.follows && 'follow',
     rootState.config.notificationVisibility.followRequest && 'follow_request',
     rootState.config.notificationVisibility.moves && 'move',
-    rootState.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction'
+    rootState.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction',
+    'poll'
   ].filter(_ => _))
 }
 
-const statusNotifications = ['like', 'mention', 'repeat', 'pleroma:emoji_reaction']
+const statusNotifications = ['like', 'mention', 'repeat', 'pleroma:emoji_reaction', 'poll']
 
 export const isStatusNotification = (type) => includes(statusNotifications, type)
 
@@ -98,6 +99,9 @@ export const prepareNotificationObject = (notification, i18n) => {
     case 'follow_request':
       i18nString = 'follow_request'
       break
+    case 'poll':
+      i18nString = 'poll_ended'
+      break
   }
 
   if (notification.type === 'pleroma:emoji_reaction') {

From a4b6a97b1b96a15d5a74ae59e36eba7649ac8515 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 20 May 2022 16:35:07 -0400
Subject: [PATCH 109/122] Add English translations for poll-end notifications

Ref: poll-notif
---
 src/i18n/en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index f8336e5c..699917fe 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -160,7 +160,8 @@
     "repeated_you": "repeated your status",
     "no_more_notifications": "No more notifications",
     "migrated_to": "migrated to",
-    "reacted_with": "reacted with {0}"
+    "reacted_with": "reacted with {0}",
+    "poll_ended": "poll has ended"
   },
   "polls": {
     "add_poll": "Add poll",

From a35daceb5ba96ba0f843ee405617fc043cd68f61 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 20 May 2022 16:41:45 -0400
Subject: [PATCH 110/122] Add settings for filtering end-of-poll notifications

Ref: poll-notif
---
 src/components/notifications/notification_filters.vue    | 9 +++++++++
 src/components/settings_modal/tabs/notifications_tab.vue | 5 +++++
 src/modules/config.js                                    | 3 ++-
 src/services/notification_utils/notification_utils.js    | 2 +-
 4 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index ba0e90a0..0fe6713f 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -61,6 +61,15 @@
             :class="{ 'menu-checkbox-checked': filters.moves }"
           />{{ $t('settings.notification_visibility_moves') }}
         </button>
+        <button
+          class="button-default dropdown-item"
+          @click="toggleNotificationFilter('polls')"
+        >
+          <span
+            class="menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.polls }"
+          />{{ $t('settings.notification_visibility_polls') }}
+        </button>
       </div>
     </template>
     <template v-slot:trigger>
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 86be6095..dd3806ed 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -41,6 +41,11 @@
                 {{ $t('settings.notification_visibility_emoji_reactions') }}
               </BooleanSetting>
             </li>
+            <li>
+              <BooleanSetting path="notificationVisibility.polls">
+                {{ $t('settings.notification_visibility_polls') }}
+              </BooleanSetting>
+            </li>
           </ul>
         </li>
       </ul>
diff --git a/src/modules/config.js b/src/modules/config.js
index ff5ef270..13f1045b 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -54,7 +54,8 @@ export const defaultState = {
     moves: true,
     emojiReactions: true,
     followRequest: true,
-    chatMention: true
+    chatMention: true,
+    polls: true
   },
   webPushNotifications: false,
   muteWords: [],
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 8a05f77b..a221b022 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -15,7 +15,7 @@ export const visibleTypes = store => {
     rootState.config.notificationVisibility.followRequest && 'follow_request',
     rootState.config.notificationVisibility.moves && 'move',
     rootState.config.notificationVisibility.emojiReactions && 'pleroma:emoji_reaction',
-    'poll'
+    rootState.config.notificationVisibility.polls && 'poll'
   ].filter(_ => _))
 }
 

From 6e0ceda968625259bafea72cf90446b610f0b913 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Fri, 20 May 2022 16:42:18 -0400
Subject: [PATCH 111/122] Add English translation for filtering end-of-poll
 notifications

Ref: poll-notif
---
 src/i18n/en.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 699917fe..733df0a0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -428,6 +428,7 @@
     "notification_visibility_repeats": "Repeats",
     "notification_visibility_moves": "User Migrates",
     "notification_visibility_emoji_reactions": "Reactions",
+    "notification_visibility_polls": "Ends of polls you voted in",
     "no_rich_text_description": "Strip rich text formatting from all posts",
     "no_blocks": "No blocks",
     "no_mutes": "No mutes",

From 29b084b4b85c84ef1a780a48f79e940405a127d9 Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Fri, 20 May 2022 02:36:55 +0300
Subject: [PATCH 112/122] Pass file name of cropped avatar to form data

---
 src/components/settings_modal/tabs/profile_tab.js |  8 ++++----
 src/services/api/api.service.js                   | 10 ++++++++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index bee8a7bb..f2b48b4b 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -193,8 +193,8 @@ const ProfileTab = {
     submitAvatar (cropper, file) {
       const that = this
       return new Promise((resolve, reject) => {
-        function updateAvatar (avatar) {
-          that.$store.state.api.backendInteractor.updateProfileImages({ avatar })
+        function updateAvatar (avatar, avatarName) {
+          that.$store.state.api.backendInteractor.updateProfileImages({ avatar, avatarName })
             .then((user) => {
               that.$store.commit('addNewUsers', [user])
               that.$store.commit('setCurrentUser', user)
@@ -207,9 +207,9 @@ const ProfileTab = {
         }
 
         if (cropper) {
-          cropper.getCroppedCanvas().toBlob(updateAvatar, file.type)
+          cropper.getCroppedCanvas().toBlob((data) => updateAvatar(data, file.name), file.type)
         } else {
-          updateAvatar(file)
+          updateAvatar(file, file.name)
         }
       })
     },
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 436b8b0a..50fa3d50 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -151,9 +151,15 @@ const updateNotificationSettings = ({ credentials, settings }) => {
   }).then((data) => data.json())
 }
 
-const updateProfileImages = ({ credentials, avatar = null, banner = null, background = null }) => {
+const updateProfileImages = ({ credentials, avatar = null, avatarName = null, banner = null, background = null }) => {
   const form = new FormData()
-  if (avatar !== null) form.append('avatar', avatar)
+  if (avatar !== null) {
+    if (avatarName !== null) {
+      form.append('avatar', avatar, avatarName)
+    } else {
+      form.append('avatar', avatar)
+    }
+  }
   if (banner !== null) form.append('header', banner)
   if (background !== null) form.append('pleroma_background_image', background)
   return fetch(MASTODON_PROFILE_UPDATE_URL, {

From d137d5800a44e598d67d0134ed071167c1c6e98e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 22 May 2022 12:18:20 +0300
Subject: [PATCH 113/122] stick chat scroll to bottom to help with OSK resizing
 the viewport

---
 src/components/chat/chat.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 02f3a2f2..9f6e64e3 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -43,6 +43,7 @@ const Chat = {
   },
   created () {
     this.startFetching()
+    window.addEventListener('resize', this.handleResize)
   },
   mounted () {
     window.addEventListener('scroll', this.handleScroll)
@@ -132,7 +133,7 @@ const Chat = {
         }
       })
     },
-    // Preserves the scroll position when OSK appears or the posting form changes its height.
+    // "Sticks" scroll to bottom instead of top, helps with OSK resizing the viewport
     handleResize (opts = {}) {
       const { expand = false, delayed = false } = opts
 
@@ -144,15 +145,14 @@ const Chat = {
       }
 
       this.$nextTick(() => {
-        const { scrollHeight = undefined } = this.lastScrollPosition
-        this.lastScrollPosition = getScrollPosition()
-
-        const diff = this.lastScrollPosition.scrollHeight - scrollHeight
-        if (diff > 0 || (!this.bottomedOut() && expand)) {
+        const { offsetHeight = undefined } = getScrollPosition()
+        const diff = this.lastScrollPosition.offsetHeight - offsetHeight
+        if (diff !== 0 || (!this.bottomedOut() && expand)) {
           this.$nextTick(() => {
             window.scrollTo({ top: window.scrollY + diff })
           })
         }
+        this.lastScrollPosition = getScrollPosition()
       })
     },
     scrollDown (options = {}) {

From 79ee77a6fe11e4ad24b2e443f5bccff35602be31 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Tue, 17 May 2022 23:43:37 -0400
Subject: [PATCH 114/122] Fix registration error

---
 src/components/registration/registration.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 6fa70a09..1f323f9d 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -164,13 +164,13 @@
 
             <div
               class="form-group"
-              :class="{ 'form-group--error': $v.user.language.$error }"
+              :class="{ 'form-group--error': v$.user.language.$error }"
             >
               <interface-language-switcher
                 for="email-language"
                 :prompt-text="$t('registration.email_language')"
-                :language="$v.user.language.$model"
-                :set-language="val => $v.user.language.$model = val"
+                :language="v$.user.language.$model"
+                :set-language="val => v$.user.language.$model = val"
               />
             </div>
 

From 069cf3fa87c0d29803275fe66864d5e439cad309 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sun, 22 May 2022 16:38:09 +0000
Subject: [PATCH 115/122] Revert "Merge branch 'from/develop/tusooa/lang-opts'
 into 'develop'"

This reverts merge request !1494
---
 package.json                                  |  1 -
 .../interface_language_switcher.vue           | 38 +++++++++----------
 src/components/registration/registration.js   | 14 +------
 src/components/registration/registration.vue  | 12 ------
 .../settings_modal/tabs/general_tab.js        |  6 ---
 .../settings_modal/tabs/general_tab.vue       |  6 +--
 .../settings_modal/tabs/profile_tab.js        | 38 +++++++------------
 .../settings_modal/tabs/profile_tab.vue       |  7 ----
 src/i18n/en.json                              |  4 +-
 src/modules/config.js                         |  5 ---
 src/services/api/api.service.js               |  1 -
 src/services/locale/locale.service.js         | 27 +------------
 yarn.lock                                     |  5 ---
 13 files changed, 37 insertions(+), 127 deletions(-)

diff --git a/package.json b/package.json
index 58aeb363..b5ece450 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,6 @@
     "cropperjs": "1.5.12",
     "diff": "3.5.0",
     "escape-html": "1.0.3",
-    "js-cookie": "^3.0.1",
     "localforage": "1.10.0",
     "parse-link-header": "1.0.1",
     "phoenix": "1.6.2",
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 7ad1fe2e..6d1f83c4 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <label for="interface-language-switcher">
-      {{ promptText }}
+      {{ $t('settings.interfaceLanguage') }}
     </label>
     {{ ' ' }}
     <Select
       id="interface-language-switcher"
-      v-model="controlledLanguage"
+      v-model="language"
     >
       <option
         v-for="lang in languages"
@@ -20,43 +20,39 @@
 </template>
 
 <script>
+import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
+import ISO6391 from 'iso-639-1'
+import _ from 'lodash'
 import Select from '../select/select.vue'
 
 export default {
   components: {
     Select
   },
-  props: {
-    promptText: {
-      type: String,
-      required: true
-    },
-    language: {
-      type: String,
-      required: true
-    },
-    setLanguage: {
-      type: Function,
-      required: true
-    }
-  },
   computed: {
     languages () {
-      return localeService.languages
+      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
     },
 
-    controlledLanguage: {
-      get: function () { return this.language },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
       set: function (val) {
-        this.setLanguage(val)
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     }
   },
 
   methods: {
     getLanguageName (code) {
-      return localeService.getLanguageName(code)
+      const specialLanguageNames = {
+        'ja_easy': 'やさしいにほんご',
+        'zh': '简体中文',
+        'zh_Hant': '繁體中文'
+      }
+      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
+      const browserLocale = localeService.internalToBrowserLocale(code)
+      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
     }
   }
 }
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 6eb316d0..a3ef0f04 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -1,8 +1,6 @@
 import useVuelidate from '@vuelidate/core'
 import { required, requiredIf, sameAs } from '@vuelidate/validators'
 import { mapActions, mapState } from 'vuex'
-import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
-import localeService from '../../services/locale/locale.service.js'
 
 const registration = {
   setup () { return { v$: useVuelidate() } },
@@ -13,14 +11,10 @@ const registration = {
       username: '',
       password: '',
       confirm: '',
-      reason: '',
-      language: ''
+      reason: ''
     },
     captcha: {}
   }),
-  components: {
-    InterfaceLanguageSwitcher
-  },
   validations () {
     return {
       user: {
@@ -32,8 +26,7 @@ const registration = {
           required,
           sameAs: sameAs(this.user.password)
         },
-        reason: { required: requiredIf(() => this.accountApprovalRequired) },
-        language: {}
+        reason: { required: requiredIf(() => this.accountApprovalRequired) }
       }
     }
   },
@@ -71,9 +64,6 @@ const registration = {
       this.user.captcha_solution = this.captcha.solution
       this.user.captcha_token = this.captcha.token
       this.user.captcha_answer_data = this.captcha.answer_data
-      if (this.user.language) {
-        this.user.language = localeService.internalToBackendLocale(this.user.language)
-      }
 
       this.v$.$touch()
 
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 6fa70a09..3d409109 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -162,18 +162,6 @@
               </ul>
             </div>
 
-            <div
-              class="form-group"
-              :class="{ 'form-group--error': $v.user.language.$error }"
-            >
-              <interface-language-switcher
-                for="email-language"
-                :prompt-text="$t('registration.email_language')"
-                :language="$v.user.language.$model"
-                :set-language="val => $v.user.language.$model = val"
-              />
-            </div>
-
             <div
               v-if="accountApprovalRequired"
               class="form-group"
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index de925155..62d86176 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -72,12 +72,6 @@ const GeneralTab = {
         !this.$store.state.users.currentUser.background_image
     },
     instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
-    language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
-      set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
-      }
-    },
     ...SharedComputedObject()
   },
   methods: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 39149d7f..a2c6bffa 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -4,11 +4,7 @@
       <h2>{{ $t('settings.interface') }}</h2>
       <ul class="setting-list">
         <li>
-          <interface-language-switcher
-            :prompt-text="$t('settings.interfaceLanguage')"
-            :language="language"
-            :set-language="val => language = val"
-          />
+          <interface-language-switcher />
         </li>
         <li v-if="instanceSpecificPanelPresent">
           <BooleanSetting path="hideISP">
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 8781bb91..f2b48b4b 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -8,10 +8,8 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
-import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import localeService from 'src/services/locale/locale.service.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -42,8 +40,7 @@ const ProfileTab = {
       banner: null,
       bannerPreview: null,
       background: null,
-      backgroundPreview: null,
-      emailLanguage: this.$store.state.users.currentUser.language || ''
+      backgroundPreview: null
     }
   },
   components: {
@@ -53,8 +50,7 @@ const ProfileTab = {
     Autosuggest,
     ProgressButton,
     Checkbox,
-    BooleanSetting,
-    InterfaceLanguageSwitcher
+    BooleanSetting
   },
   computed: {
     user () {
@@ -115,25 +111,19 @@ const ProfileTab = {
   },
   methods: {
     updateProfile () {
-      const params = {
-        note: this.newBio,
-        locked: this.newLocked,
-        // Backend notation.
-        /* eslint-disable camelcase */
-        display_name: this.newName,
-        fields_attributes: this.newFields.filter(el => el != null),
-        bot: this.bot,
-        show_role: this.showRole
-        /* eslint-enable camelcase */
-      }
-
-      if (this.emailLanguage) {
-        params.language = localeService.internalToBackendLocale(this.emailLanguage)
-      }
-
       this.$store.state.api.backendInteractor
-        .updateProfile({ params })
-        .then((user) => {
+        .updateProfile({
+          params: {
+            note: this.newBio,
+            locked: this.newLocked,
+            // Backend notation.
+            /* eslint-disable camelcase */
+            display_name: this.newName,
+            fields_attributes: this.newFields.filter(el => el != null),
+            bot: this.bot,
+            show_role: this.showRole
+            /* eslint-enable camelcase */
+          } }).then((user) => {
           this.newFields.splice(user.fields.length)
           merge(this.newFields, user.fields)
           this.$store.commit('addNewUsers', [user])
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 4cd93772..881016fb 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -89,13 +89,6 @@
           {{ $t('settings.bot') }}
         </Checkbox>
       </p>
-      <p>
-        <interface-language-switcher
-          :prompt-text="$t('settings.email_language')"
-          :language="emailLanguage"
-          :set-language="val => emailLanguage = val"
-        />
-      </p>
       <button
         :disabled="newName && newName.length === 0"
         class="btn button-default"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a3174492..733df0a0 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -255,8 +255,7 @@
       "password_required": "cannot be left blank",
       "password_confirmation_required": "cannot be left blank",
       "password_confirmation_match": "should be the same as password"
-    },
-    "email_language": "In which language do you want to receive emails from the server?"
+    }
   },
   "remote_user_resolver": {
     "remote_user_resolver": "Remote user resolver",
@@ -305,7 +304,6 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
-    "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",
     "block_import": "Block import",
diff --git a/src/modules/config.js b/src/modules/config.js
index e0401339..13f1045b 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,9 +1,5 @@
-import Cookies from 'js-cookie'
 import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
-import localeService from '../services/locale/locale.service.js'
-
-const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
 
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
@@ -167,7 +163,6 @@ const config = {
           break
         case 'interfaceLanguage':
           messages.setLanguage(this.getters.i18n, value)
-          Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value))
           break
       }
     }
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index ca84ba2c..50fa3d50 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -197,7 +197,6 @@ const updateProfile = ({ credentials, params }) => {
 // homepage
 // location
 // token
-// language
 const register = ({ params, credentials }) => {
   const { nickname, ...rest } = params
   return fetch(MASTODON_REGISTRATION_URL, {
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index 8cef2522..5be99d81 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -1,35 +1,12 @@
-import languagesObject from '../../i18n/messages'
-import ISO6391 from 'iso-639-1'
-import _ from 'lodash'
-
 const specialLanguageCodes = {
   'ja_easy': 'ja',
-  'zh_Hant': 'zh-HANT',
-  'zh': 'zh-Hans'
+  'zh_Hant': 'zh-HANT'
 }
 
 const internalToBrowserLocale = code => specialLanguageCodes[code] || code
 
-const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_', '-')
-
-const getLanguageName = (code) => {
-  const specialLanguageNames = {
-    'ja_easy': 'やさしいにほんご',
-    'zh': '简体中文',
-    'zh_Hant': '繁體中文'
-  }
-  const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
-  const browserLocale = internalToBrowserLocale(code)
-  return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
-}
-
-const languages = _.map(languagesObject.languages, (code) => ({ code: code, name: getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
-
 const localeService = {
-  internalToBrowserLocale,
-  internalToBackendLocale,
-  languages,
-  getLanguageName
+  internalToBrowserLocale
 }
 
 export default localeService
diff --git a/yarn.lock b/yarn.lock
index e413b6d1..a898a932 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5722,11 +5722,6 @@ js-base64@^2.1.9:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.0.tgz#42255ba183ab67ce59a0dee640afdc00ab5ae93e"
 
-js-cookie@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
-  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"

From 9725443e60bc6e147fdc8d195dab048d1d5aa461 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sun, 22 May 2022 16:40:59 +0000
Subject: [PATCH 116/122] Revert "Merge branch 'revert-a88abc7e' into
 'develop'"

This reverts merge request !1526
---
 package.json                                  |  1 +
 .../interface_language_switcher.vue           | 38 ++++++++++---------
 src/components/registration/registration.js   | 14 ++++++-
 src/components/registration/registration.vue  | 12 ++++++
 .../settings_modal/tabs/general_tab.js        |  6 +++
 .../settings_modal/tabs/general_tab.vue       |  6 ++-
 .../settings_modal/tabs/profile_tab.js        | 38 ++++++++++++-------
 .../settings_modal/tabs/profile_tab.vue       |  7 ++++
 src/i18n/en.json                              |  4 +-
 src/modules/config.js                         |  5 +++
 src/services/api/api.service.js               |  1 +
 src/services/locale/locale.service.js         | 27 ++++++++++++-
 yarn.lock                                     |  5 +++
 13 files changed, 127 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index b5ece450..58aeb363 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "cropperjs": "1.5.12",
     "diff": "3.5.0",
     "escape-html": "1.0.3",
+    "js-cookie": "^3.0.1",
     "localforage": "1.10.0",
     "parse-link-header": "1.0.1",
     "phoenix": "1.6.2",
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 6d1f83c4..7ad1fe2e 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
     <label for="interface-language-switcher">
-      {{ $t('settings.interfaceLanguage') }}
+      {{ promptText }}
     </label>
     {{ ' ' }}
     <Select
       id="interface-language-switcher"
-      v-model="language"
+      v-model="controlledLanguage"
     >
       <option
         v-for="lang in languages"
@@ -20,39 +20,43 @@
 </template>
 
 <script>
-import languagesObject from '../../i18n/messages'
 import localeService from '../../services/locale/locale.service.js'
-import ISO6391 from 'iso-639-1'
-import _ from 'lodash'
 import Select from '../select/select.vue'
 
 export default {
   components: {
     Select
   },
+  props: {
+    promptText: {
+      type: String,
+      required: true
+    },
+    language: {
+      type: String,
+      required: true
+    },
+    setLanguage: {
+      type: Function,
+      required: true
+    }
+  },
   computed: {
     languages () {
-      return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+      return localeService.languages
     },
 
-    language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+    controlledLanguage: {
+      get: function () { return this.language },
       set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+        this.setLanguage(val)
       }
     }
   },
 
   methods: {
     getLanguageName (code) {
-      const specialLanguageNames = {
-        'ja_easy': 'やさしいにほんご',
-        'zh': '简体中文',
-        'zh_Hant': '繁體中文'
-      }
-      const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
-      const browserLocale = localeService.internalToBrowserLocale(code)
-      return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+      return localeService.getLanguageName(code)
     }
   }
 }
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index a3ef0f04..6eb316d0 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -1,6 +1,8 @@
 import useVuelidate from '@vuelidate/core'
 import { required, requiredIf, sameAs } from '@vuelidate/validators'
 import { mapActions, mapState } from 'vuex'
+import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
+import localeService from '../../services/locale/locale.service.js'
 
 const registration = {
   setup () { return { v$: useVuelidate() } },
@@ -11,10 +13,14 @@ const registration = {
       username: '',
       password: '',
       confirm: '',
-      reason: ''
+      reason: '',
+      language: ''
     },
     captcha: {}
   }),
+  components: {
+    InterfaceLanguageSwitcher
+  },
   validations () {
     return {
       user: {
@@ -26,7 +32,8 @@ const registration = {
           required,
           sameAs: sameAs(this.user.password)
         },
-        reason: { required: requiredIf(() => this.accountApprovalRequired) }
+        reason: { required: requiredIf(() => this.accountApprovalRequired) },
+        language: {}
       }
     }
   },
@@ -64,6 +71,9 @@ const registration = {
       this.user.captcha_solution = this.captcha.solution
       this.user.captcha_token = this.captcha.token
       this.user.captcha_answer_data = this.captcha.answer_data
+      if (this.user.language) {
+        this.user.language = localeService.internalToBackendLocale(this.user.language)
+      }
 
       this.v$.$touch()
 
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 3d409109..6fa70a09 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -162,6 +162,18 @@
               </ul>
             </div>
 
+            <div
+              class="form-group"
+              :class="{ 'form-group--error': $v.user.language.$error }"
+            >
+              <interface-language-switcher
+                for="email-language"
+                :prompt-text="$t('registration.email_language')"
+                :language="$v.user.language.$model"
+                :set-language="val => $v.user.language.$model = val"
+              />
+            </div>
+
             <div
               v-if="accountApprovalRequired"
               class="form-group"
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 62d86176..de925155 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -72,6 +72,12 @@ const GeneralTab = {
         !this.$store.state.users.currentUser.background_image
     },
     instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+      }
+    },
     ...SharedComputedObject()
   },
   methods: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index a2c6bffa..39149d7f 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -4,7 +4,11 @@
       <h2>{{ $t('settings.interface') }}</h2>
       <ul class="setting-list">
         <li>
-          <interface-language-switcher />
+          <interface-language-switcher
+            :prompt-text="$t('settings.interfaceLanguage')"
+            :language="language"
+            :set-language="val => language = val"
+          />
         </li>
         <li v-if="instanceSpecificPanelPresent">
           <BooleanSetting path="hideISP">
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index f2b48b4b..8781bb91 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -8,8 +8,10 @@ import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
+import localeService from 'src/services/locale/locale.service.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -40,7 +42,8 @@ const ProfileTab = {
       banner: null,
       bannerPreview: null,
       background: null,
-      backgroundPreview: null
+      backgroundPreview: null,
+      emailLanguage: this.$store.state.users.currentUser.language || ''
     }
   },
   components: {
@@ -50,7 +53,8 @@ const ProfileTab = {
     Autosuggest,
     ProgressButton,
     Checkbox,
-    BooleanSetting
+    BooleanSetting,
+    InterfaceLanguageSwitcher
   },
   computed: {
     user () {
@@ -111,19 +115,25 @@ const ProfileTab = {
   },
   methods: {
     updateProfile () {
+      const params = {
+        note: this.newBio,
+        locked: this.newLocked,
+        // Backend notation.
+        /* eslint-disable camelcase */
+        display_name: this.newName,
+        fields_attributes: this.newFields.filter(el => el != null),
+        bot: this.bot,
+        show_role: this.showRole
+        /* eslint-enable camelcase */
+      }
+
+      if (this.emailLanguage) {
+        params.language = localeService.internalToBackendLocale(this.emailLanguage)
+      }
+
       this.$store.state.api.backendInteractor
-        .updateProfile({
-          params: {
-            note: this.newBio,
-            locked: this.newLocked,
-            // Backend notation.
-            /* eslint-disable camelcase */
-            display_name: this.newName,
-            fields_attributes: this.newFields.filter(el => el != null),
-            bot: this.bot,
-            show_role: this.showRole
-            /* eslint-enable camelcase */
-          } }).then((user) => {
+        .updateProfile({ params })
+        .then((user) => {
           this.newFields.splice(user.fields.length)
           merge(this.newFields, user.fields)
           this.$store.commit('addNewUsers', [user])
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 881016fb..4cd93772 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -89,6 +89,13 @@
           {{ $t('settings.bot') }}
         </Checkbox>
       </p>
+      <p>
+        <interface-language-switcher
+          :prompt-text="$t('settings.email_language')"
+          :language="emailLanguage"
+          :set-language="val => emailLanguage = val"
+        />
+      </p>
       <button
         :disabled="newName && newName.length === 0"
         class="btn button-default"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 733df0a0..a3174492 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -255,7 +255,8 @@
       "password_required": "cannot be left blank",
       "password_confirmation_required": "cannot be left blank",
       "password_confirmation_match": "should be the same as password"
-    }
+    },
+    "email_language": "In which language do you want to receive emails from the server?"
   },
   "remote_user_resolver": {
     "remote_user_resolver": "Remote user resolver",
@@ -304,6 +305,7 @@
     "avatarRadius": "Avatars",
     "background": "Background",
     "bio": "Bio",
+    "email_language": "Language for receiving emails from the server",
     "block_export": "Block export",
     "block_export_button": "Export your blocks to a csv file",
     "block_import": "Block import",
diff --git a/src/modules/config.js b/src/modules/config.js
index 13f1045b..e0401339 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,5 +1,9 @@
+import Cookies from 'js-cookie'
 import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
+import localeService from '../services/locale/locale.service.js'
+
+const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
 
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
@@ -163,6 +167,7 @@ const config = {
           break
         case 'interfaceLanguage':
           messages.setLanguage(this.getters.i18n, value)
+          Cookies.set(BACKEND_LANGUAGE_COOKIE_NAME, localeService.internalToBackendLocale(value))
           break
       }
     }
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 50fa3d50..ca84ba2c 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -197,6 +197,7 @@ const updateProfile = ({ credentials, params }) => {
 // homepage
 // location
 // token
+// language
 const register = ({ params, credentials }) => {
   const { nickname, ...rest } = params
   return fetch(MASTODON_REGISTRATION_URL, {
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index 5be99d81..8cef2522 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -1,12 +1,35 @@
+import languagesObject from '../../i18n/messages'
+import ISO6391 from 'iso-639-1'
+import _ from 'lodash'
+
 const specialLanguageCodes = {
   'ja_easy': 'ja',
-  'zh_Hant': 'zh-HANT'
+  'zh_Hant': 'zh-HANT',
+  'zh': 'zh-Hans'
 }
 
 const internalToBrowserLocale = code => specialLanguageCodes[code] || code
 
+const internalToBackendLocale = code => internalToBrowserLocale(code).replace('_', '-')
+
+const getLanguageName = (code) => {
+  const specialLanguageNames = {
+    'ja_easy': 'やさしいにほんご',
+    'zh': '简体中文',
+    'zh_Hant': '繁體中文'
+  }
+  const languageName = specialLanguageNames[code] || ISO6391.getNativeName(code)
+  const browserLocale = internalToBrowserLocale(code)
+  return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
+}
+
+const languages = _.map(languagesObject.languages, (code) => ({ code: code, name: getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
+
 const localeService = {
-  internalToBrowserLocale
+  internalToBrowserLocale,
+  internalToBackendLocale,
+  languages,
+  getLanguageName
 }
 
 export default localeService
diff --git a/yarn.lock b/yarn.lock
index a898a932..e413b6d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5722,6 +5722,11 @@ js-base64@^2.1.9:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.0.tgz#42255ba183ab67ce59a0dee640afdc00ab5ae93e"
 
+js-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
+  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"

From 1feff4dcc7d416815b5967d330c2e02573fec854 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 22 May 2022 21:47:19 +0300
Subject: [PATCH 117/122] fix

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

diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 1c1ecea2..039d4c7f 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -33,7 +33,7 @@
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
-      height: 1.4;
+      height: 1.4em;
     }
   }
 

From c3c120e91da987ecb54c7d743b6791f904b56f4d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 22 May 2022 21:50:30 +0300
Subject: [PATCH 118/122] fix?

---
 src/components/notifications/notifications.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d5b2d1d5..794ef51d 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -30,7 +30,7 @@
             v-for="notification in notificationsToDisplay"
             :key="notification.id"
             class="notification"
-            :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
+            :class="{unseen: !minimalMode && !notification.seen}"
           >
             <div class="notification-overlay" />
             <notification :notification="notification" />

From 152302cbff4e311da2922021efa9c326ceca6570 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Wed, 25 May 2022 13:34:26 -0400
Subject: [PATCH 119/122] Fix Open Chat button

---
 src/components/account_actions/account_actions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index e53c4f77..99762562 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -40,7 +40,7 @@ const AccountActions = {
     openChat () {
       this.$router.push({
         name: 'chat',
-        params: { recipient_id: this.user.id }
+        params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }
       })
     }
   },

From 58b82172836c71204c9c71f2aead284caf76b969 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 31 May 2022 20:28:47 +0300
Subject: [PATCH 120/122] fix gap between panel heading and timeline menu

---
 src/components/timeline/timeline_quick_settings.vue | 1 -
 src/components/timeline_menu/timeline_menu.vue      | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 5efc5d7c..98fab926 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -93,7 +93,6 @@
 <style lang="scss">
 
 .TimelineQuickSettings {
-  align-self: stretch;
 
   > button {
     line-height: 100%;
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 8f14093f..61119482 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -43,6 +43,10 @@
   min-width: 0;
   width: 24rem;
 
+  .popover-trigger-button {
+    vertical-align: bottom;
+  }
+
   .timeline-menu-popover-wrap {
     overflow: hidden;
     // Match panel heading padding to line up menu with bottom of heading

From a63aeccbcc919cd053f1f88b83a962e9dd1a89d5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 31 May 2022 20:35:30 +0300
Subject: [PATCH 121/122] force panel headers to be square on mobile (for now?)

---
 src/App.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/App.scss b/src/App.scss
index d62d9ac2..5cd0b96e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -301,6 +301,15 @@ nav {
       margin-bottom: 0;
     }
 
+    .panel-heading,
+    .panel-heading::after,
+    .panel-heading::before,
+    .panel,
+    .panel::after {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
     .underlay,
     #sidebar,
     #notifs-column {

From 9b5fe24ca455af5420a326e78878ca7b35b5bf66 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jun 2022 16:52:03 +0300
Subject: [PATCH 122/122] restore notifications page, fix z-index issues

---
 src/App.vue                                    | 2 +-
 src/boot/routes.js                             | 2 +-
 src/components/notifications/notifications.js  | 4 +++-
 src/components/notifications/notifications.vue | 2 +-
 src/components/timeline/timeline.scss          | 2 +-
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5b448972..21f6f686 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
     />
     <MobileNav v-if="layoutType === 'mobile'" />
     <DesktopNav v-else />
-    <notifications v-if="currentUser" />
+    <Notifications v-if="currentUser" />
     <div
       id="content"
       class="app-layout container"
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 905ffe41..726476a8 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -62,7 +62,7 @@ export default (store) => {
     { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
     { name: 'registration-token', path: '/registration/:token', component: Registration },
     { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
-    { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
+    { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
     { name: 'login', path: '/login', component: AuthForm },
     { name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
     { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index fb2579a5..82aa1489 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -27,7 +27,9 @@ const Notifications = {
     // meant for "Interactions" timeline
     minimalMode: Boolean,
     // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
-    filterMode: Array
+    filterMode: Array,
+    // Disable teleporting (i.e. for /users/user/notifications)
+    disableTeleport: Boolean
   },
   data () {
     return {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 794ef51d..b46c06aa 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport :disabled="minimalMode" :to="teleportTarget">
+  <teleport :disabled="minimalMode || disableTeleport" :to="teleportTarget">
     <div
       :class="{ minimal: minimalMode }"
       class="Notifications"
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index c7ea0dff..9e009fd3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -11,7 +11,7 @@
 
   .conversation-heading {
     top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
-    z-index: 1;
+    z-index: 2;
   }
 
   &.-nonpanel {