move channel title to top; fix vertical range input layout

src/components/Channel.vue

@@ -1,14 +1,12 @@
 <template>
     <div :class="['channel', `channel-${loadingState}`]">
+        <div class="name">{{name}}</div>
         <div class="volume-wrapper">
             <!--suppress HtmlFormInputWithoutLabel -->
             <input class="volume" :disabled="loadingState === 'unloaded'"
                    type="range" min="0" max="100" v-model="volume"/>
         </div>
-        <div class="description">
-            <div class="name">{{name}}</div>
-            <div class="title">{{loadingState === "loading" ? "Loading..." : title}}</div>
-        </div>
+        <div class="title">{{loadingState === "loading" ? "Loading..." : title}}</div>
         <div class="youtube-player" ref="ytpl"/>
     </div>
 </template>
@@ -177,27 +175,28 @@ export default class Channel extends Vue {
     background: lightgray;
 }
 
-
 .volume-wrapper {
     --height: 180px;
     --width: 30px;
     height: var(--height);
     width: var(--width);
-    display: block;
+    display: flex;
+    align-items: center;
 }
 
 .volume {
     position: relative;
     width: var(--height);
     height: var(--width);
-    top: calc(var(--height) / 2);
     left: calc(var(--height) / 2 * -1 + var(--width) / 2);
     transform: rotate(270deg);
+    margin: 0;
 }
 
 .name {
     text-align: center;
     font-weight: bold;
+    padding: 2px 0;
 }
 
 .title {