Resolve styling discrepancies introduced with ft-list-channel and ft-tooltip

Author: kommunarr

src/renderer/components/ft-list-channel/ft-list-channel.scss

@@ -1,14 +1,18 @@
 @use '../../scss-partials/ft-list-item';
 
+.infoAndSubscribe {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  inline-size: 100%;
+}
+
 .ft-list-channel {
   &.grid {
     align-items: center;
     text-align: center;
 
     .infoAndSubscribe {
-      display: flex;
-      justify-content: center;
-      inline-size: 100%;
       flex-flow: column wrap;
       align-items: center;
 
@@ -24,9 +28,6 @@
 
   &.list {
     .infoAndSubscribe {
-      flex-flow: row wrap;
-      justify-content: center;
-
       .channelSubscribeButton {
         margin-block: auto;
         margin-inline: 7px;

src/renderer/components/ft-select/ft-select.css

@@ -52,7 +52,7 @@
 
   /* Use custom arrow */
 .select .select-text {
-  appearance:none;
+  appearance: none;
   text-overflow: ellipsis;
   padding-inline-end: 1.5rem;
 }

src/renderer/components/ft-tooltip/ft-tooltip.css

@@ -63,6 +63,27 @@
   transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 1em);
 }
 
+.button:focus + .text,
+.button:hover + .text {
+  opacity: 1;
+  visibility: visible;
+}
+
+.button:focus + .text.bottom,
+.button:hover + .text.bottom,
+.button:hover + .text.bottom-left,
+.button:focus + .text.top,
+.button:hover + .text.top {
+  transform: translate(calc(-50% * var(--horizontal-directionality-coefficient)), 0);
+}
+
+.button:focus + .text.left,
+.button:hover + .text.left,
+.button:focus + .text.right,
+.button:hover + .text.right {
+  transform: translate(0, -50%);
+}
+
 .text.allowNewlines {
   white-space: pre-wrap;
   text-align: start;