Merge branch 'threecolumn' into shigusegubu-vue3

* threecolumn:
  don't use wide mode for anon viewers
  don't show "up to date" in user profile TL
  fix inline conversation's shadow showing through outer header
  fix incorrect sticking in user profile page
  fix panel overlaps in firefox
  fix hidden input for file upload causing unintended scrolls

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;

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>

src/components/settings_modal/tabs/general_tab.vue

@@ -72,6 +72,7 @@
         </li>
         <li>
           <ChoiceSetting
+            v-if="user"
             id="thirdColumnMode"
             path="thirdColumnMode"
             :options="thirdColumnModeOptions"

src/components/timeline/timeline.scss

@@ -10,7 +10,8 @@
   }
 
   .conversation-heading {
-    top: calc(var(--__panel-heading-height) * 2);
+    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
+    z-index: 1;
   }
 
   &.-nonpanel {

src/components/timeline/timeline.vue

@@ -10,7 +10,7 @@
         {{ loadButtonString }}
       </button>
       <div
-        v-else
+        v-else-if="!embedded"
         class="loadmore-text faint"
         @click.prevent
       >

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;
 

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

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: 2;
+  z-index: 4;
 
   &.-flexible-height {
     --__panel-heading-height: auto;