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

(limited to 'src/components/media_upload/media_upload.vue')

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"
     >
-- 
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/media_upload/media_upload.vue')

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 4a956fa18df73c1aa4d01cfe3008a512682d2b62 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:07:55 +0300
Subject: fix hidden input for file upload causing unintended scrolls

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

(limited to 'src/components/media_upload/media_upload.vue')

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


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: try out fully hidden input field

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

(limited to 'src/components/media_upload/media_upload.vue')

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