Fixed order of elements to allow for proper tabbing in comments secti…

…on (FreeTubeApp#4099) * Rearranged elements and fixed css * Fixed unclickable comment sorting at 800<=width --------- Co-authored-by: Wes Appler <wes@lamemakes>
PikachuEXE · Nov 18, 2023 · c5d7c6c · c5d7c6c
1 parent 947cd3d
commit c5d7c6c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.css b/src/renderer/components/watch-video-comments/watch-video-comments.css
@@ -24,12 +24,21 @@
 
 .commentsTitle {
   padding-block: 1em;
+  display: inline-block;
 }
 
 .commentSort {
   float: var(--float-right-ltr-rtl-value);
 }
 
+@media only screen and (max-width: 800px) {
+  .commentSort {
+    float: none;
+    inline-size: fit-content;
+  }
+}
+
+
 .comment {
   padding: 15px;
   position: relative;

diff --git a/src/renderer/components/watch-video-comments/watch-video-comments.vue b/src/renderer/components/watch-video-comments/watch-video-comments.vue
@@ -2,6 +2,22 @@
   <ft-card
     class="card"
   >
+    <h3
+      v-if="commentData.length > 0 && !isLoading && showComments"
+      class="commentsTitle"
+    >
+      {{ $t("Comments.Comments") }}
+      <span
+        class="hideComments"
+        role="button"
+        tabindex="0"
+        @click="showComments = false"
+        @keydown.space.prevent="showComments = false"
+        @keydown.enter.prevent="showComments = false"
+      >
+        {{ $t("Comments.Hide Comments") }}
+      </span>
+    </h3>
     <h4
       v-if="canPerformInitialCommentLoading"
       class="getCommentsTitle"
@@ -33,22 +49,6 @@
       :select-values="sortValues"
       @change="handleSortChange"
     />
-    <h3
-      v-if="commentData.length > 0 && !isLoading && showComments"
-      class="commentsTitle"
-    >
-      {{ $t("Comments.Comments") }}
-      <span
-        class="hideComments"
-        role="button"
-        tabindex="0"
-        @click="showComments = false"
-        @keydown.space.prevent="showComments = false"
-        @keydown.enter.prevent="showComments = false"
-      >
-        {{ $t("Comments.Hide Comments") }}
-      </span>
-    </h3>
     <div
       v-if="commentData.length > 0 && showComments"
     >