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: fixed tons of stuff, at least it looks normalish on desktop

---
 src/components/settings_modal/settings_modal.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

(limited to 'src/components/settings_modal')

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:
-- 
cgit v1.2.3-70-g09d2


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: options to enable scrollbars and disable sticky headers

---
 src/App.js                                         |  2 ++
 src/App.scss                                       | 27 ++++++++++++++++++----
 src/App.vue                                        |  6 ++---
 src/components/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(-)

(limited to 'src/components/settings_modal')

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;
 }
 
-- 
cgit v1.2.3-70-g09d2


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: 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 +++-----
 src/components/settings_modal/tabs/general_tab.js  |  5 +++++
 src/components/settings_modal/tabs/general_tab.vue |  9 ++++++++
 src/modules/config.js                              |  4 ++++
 src/modules/interface.js                           | 24 +++++++++++++++++++---
 6 files changed, 52 insertions(+), 19 deletions(-)

(limited to 'src/components/settings_modal')

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)
     }
-- 
cgit v1.2.3-70-g09d2


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: localization updates

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

(limited to 'src/components/settings_modal')

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",
-- 
cgit v1.2.3-70-g09d2


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: fix scrollbars in panel headers

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

(limited to 'src/components/settings_modal')

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 {
-- 
cgit v1.2.3-70-g09d2


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: tons of fixes mainly aimed at panel headings

---
 src/App.scss                                       |   6 +-
 src/components/account_actions/account_actions.vue |   4 -
 src/components/popover/popover.vue                 |  12 +-
 .../settings_modal/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/user_reporting_modal.vue  |  11 -
 src/panel.scss                                     |  77 ++---
 12 files changed, 73 insertions(+), 439 deletions(-)

(limited to 'src/components/settings_modal')

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);
-    }
-
-    &: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);
+  &: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;
     }
 
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledPanelText, $fallback--text);
+    > .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);
+      }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


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: 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 +++---
 src/components/remote_follow/remote_follow.vue     |  2 +-
 src/components/select/select.vue                   |  6 +++---
 src/components/settings_modal/settings_modal.scss  |  2 +-
 .../settings_modal/tabs/mutes_and_blocks_tab.scss  |  2 +-
 .../settings_modal/tabs/profile_tab.scss           |  2 +-
 .../settings_modal/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(-)

(limited to 'src/components/settings_modal')

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;
-- 
cgit v1.2.3-70-g09d2


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: 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(-)

(limited to 'src/components/settings_modal')

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
-- 
cgit v1.2.3-70-g09d2