Merge branch '1125-buttons' into 'develop'

Resolve "Ensure all buttons in the application are operable using only the keyboard"

Closes #1125

See merge request funkwhale/funkwhale!1196

front/src/components/Queue.vue

@@ -194,7 +194,7 @@
                   <i class="feed icon"></i> <translate translate-context="Sidebar/Player/Title">You have a radio playing</translate>
                 </h3>
                 <p><translate translate-context="Sidebar/Player/Paragraph">New tracks will be appended here automatically.</translate></p>
-                <div @click="$store.dispatch('radios/stop')" class="ui basic primary button"><translate translate-context="*/Player/Button.Label/Short, Verb">Stop radio</translate></div>
+                <button @click="$store.dispatch('radios/stop')" class="ui basic primary button"><translate translate-context="*/Player/Button.Label/Short, Verb">Stop radio</translate></button>
               </div>
             </div>
           </div>

front/src/components/audio/PlayButton.vue

@@ -9,10 +9,9 @@
       <i :class="[playIconClass, 'icon']"></i>
       <template v-if="!discrete && !iconOnly">&nbsp;<slot><translate translate-context="*/Queue/Button.Label/Short, Verb">Play</translate></slot></template>
     </button>
-    <div
+    <button
       v-if="!discrete && !iconOnly"
       @click.prevent="clicked = true"
-      role="button"
       :class="['ui', {disabled: !playable && !filterableArtist}, 'floating', 'dropdown', {'icon': !dropdownOnly}, {'button': !dropdownOnly}]">
       <i :class="dropdownIconClasses.concat(['icon'])" :title="title" ></i>
       <div class="menu" v-if="clicked">
@@ -29,18 +28,19 @@
           <i class="feed icon"></i><translate translate-context="*/Queue/Button.Label/Short, Verb">Start radio</translate>
         </button>
         <div class="divider"></div>
-        <button v-if="filterableArtist" class="item basic" :disabled="!filterableArtist" @click.stop.prevent="filterArtist" :title="labels.hideArtist">
+        <button v-if="filterableArtist" ref="filterArtist" data-ref="filterArtist" class="item basic" :disabled="!filterableArtist" @click.stop.prevent="filterArtist" :title="labels.hideArtist">
           <i class="eye slash outline icon"></i><translate translate-context="*/Queue/Dropdown/Button/Label/Short">Hide content from this artist</translate>
         </button>
         <button
           v-for="obj in getReportableObjs({track, album, artist, playlist, account, channel})"
           :key="obj.target.type + obj.target.id"
           class="item basic"
+          :ref="`report${obj.target.type}${obj.target.id}`" :data-ref="`report${obj.target.type}${obj.target.id}`" 
           @click.stop.prevent="$store.dispatch('moderation/report', obj.target)">
           <i class="share icon" /> {{ obj.label }}
         </button>
       </div>
-    </div>
+    </button>
   </span>
 </template>
 
@@ -270,9 +270,14 @@ export default {
         jQuery(this.$el).find('.ui.dropdown').dropdown({
           selectOnKeydown: false,
           action: function (text, value, $el) {
-            // used ton ensure focusing the dropdown and clicking via keyboard
+            // used to ensure focusing the dropdown and clicking via keyboard
             // works as expected
-            self.$refs[$el.data('ref')].click()
+            let button = self.$refs[$el.data('ref')]
+            if (Array.isArray(button)) {
+              button[0].click()
+            } else {
+              button.click()
+            }
             jQuery(self.$el).find('.ui.dropdown').dropdown('hide')
           },
         })

front/src/components/audio/Player.vue

@@ -11,7 +11,7 @@
         <div class="controls track-controls queue-not-focused desktop-and-up">
           <div class="ui tiny image" @click.stop.prevent="$router.push({name: 'library.tracks.detail', params: {id: currentTrack.id }})">
             <img alt="" ref="cover" v-if="currentTrack.cover && currentTrack.cover.urls.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.cover.urls.medium_square_crop)">
-            <img alt="" ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover.urls && currentTrack.album.cover.urls.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.urls.medium_square_crop)">
+            <img alt="" ref="cover" v-else-if="currentTrack.album && currentTrack.album.cover && currentTrack.album.cover.urls && currentTrack.album.cover.urls.original" :src="$store.getters['instance/absoluteUrl'](currentTrack.album.cover.urls.medium_square_crop)">
             <img alt="" v-else src="../../assets/audio/default-cover.png">
           </div>
           <div @click.stop.prevent="" class="middle aligned content ellipsis">
@@ -59,48 +59,44 @@
           </button>
         </div>
         <div class="player-controls controls queue-not-focused">
-          <span
-            role="button"
+          <button
             :title="labels.previous"
             :aria-label="labels.previous"
-            class="control tablet-and-up"
+            class="circular button control tablet-and-up"
             @click.prevent.stop="$store.dispatch('queue/previous')"
             :disabled="!hasPrevious">
               <i :class="['ui', 'large', {'disabled': !hasPrevious}, 'backward step', 'icon']" ></i>
-          </span>
-          <span
-            role="button"
+          </button>
+          <button
             v-if="!playing"
             :title="labels.play"
             :aria-label="labels.play"
             @click.prevent.stop="togglePlay"
-            class="control">
+            class="circular button control">
               <i :class="['ui', 'big', 'play', {'disabled': !currentTrack}, 'icon']"></i>
-          </span>
-          <span
-            role="button"
+          </button>
+          <button
             v-else
             :title="labels.pause"
             :aria-label="labels.pause"
             @click.prevent.stop="togglePlay"
-            class="control">
+            class="circular button control">
               <i :class="['ui', 'big', 'pause', {'disabled': !currentTrack}, 'icon']"></i>
-          </span>
-          <span
-            role="button"
+          </button>
+          <button
             :title="labels.next"
             :aria-label="labels.next"
-            class="control"
+            class="circular button control"
             @click.prevent.stop="$store.dispatch('queue/next')"
             :disabled="!hasNext">
               <i :class="['ui', 'large', {'disabled': !hasNext}, 'forward step', 'icon']" ></i>
-          </span>
+          </button>
         </div>
 
         <div class="controls progress-controls queue-not-focused tablet-and-up small align-left">
           <div class="timer">
             <template v-if="!isLoadingAudio">
-              <span role="button" class="start" @click.stop.prevent="setCurrentTime(0)">{{currentTimeFormatted}}</span>
+              <span class="start" @click.stop.prevent="setCurrentTime(0)">{{currentTimeFormatted}}</span>
               | <span class="total">{{durationFormatted}}</span>
             </template>
             <template v-else>
@@ -111,102 +107,101 @@
         <div class="controls queue-controls when-queue-focused align-right">
           <div class="group">
             <volume-control class="expandable" />
-            <span
-              role="button"
+            <button
+              class="circular control button"
               v-if="looping === 0"
               :title="labels.loopingDisabled"
               :aria-label="labels.loopingDisabled"
               @click.prevent.stop="$store.commit('player/looping', 1)"
               :disabled="!currentTrack">
               <i :class="['ui', {'disabled': !currentTrack}, 'step', 'repeat', 'icon']"></i>
-            </span>
-            <span
-              role="button"
+            </button>
+            <button
+              class="looping circular control button"
               @click.prevent.stop="$store.commit('player/looping', 2)"
               :title="labels.loopingSingle"
               :aria-label="labels.loopingSingle"
               v-if="looping === 1"
-              class="looping"
               :disabled="!currentTrack">
               <i
                 class="repeat icon">
                 <span class="ui circular tiny vibrant label">1</span>
               </i>
-            </span>
-            <span
-              role="button"
+            </button>
+            <button
+              class="looping circular control button"
               :title="labels.loopingWhole"
               :aria-label="labels.loopingWhole"
               v-if="looping === 2"
               :disabled="!currentTrack"
-              class="looping"
               @click.prevent.stop="$store.commit('player/looping', 0)">
               <i
                 class="repeat icon">
                 <span class="ui circular tiny vibrant label">&infin;</span>
               </i>
-            </span>
-            <span
-              role="button"
+            </button>
+            <button
+              class="circular control button"
               :disabled="queue.tracks.length === 0"
               :title="labels.shuffle"
               :aria-label="labels.shuffle"
               @click.prevent.stop="shuffle()">
               <div v-if="isShuffling" class="ui inline shuffling inverted tiny active loader"></div>
               <i v-else :class="['ui', 'random', {'disabled': queue.tracks.length === 0}, 'icon']" ></i>
-            </span>
+            </button>
           </div>
           <div class="group">
             <div class="fake-dropdown">
-              <span class="position control desktop-and-up" role="button" @click.stop="toggleMobilePlayer" aria-expanded="true">
+              <button class="position circular control button desktop-and-up" @click.stop="toggleMobilePlayer" aria-expanded="true">
                 <i class="stream icon"></i>
                 <translate translate-context="Sidebar/Queue/Text" :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}">
                   %{ index } of %{ length }
                 </translate>
-              </span>
-              <span class="position control tablet-and-below" role="button" @click.stop="switchTab">
+              </button>
+              <button class="position circular control button tablet-and-below" @click.stop="switchTab">
                 <i class="stream icon"></i>
                 <translate translate-context="Sidebar/Queue/Text" :translate-params="{index: queue.currentIndex + 1, length: queue.tracks.length}">
                   %{ index } of %{ length }
                 </translate>
-              </span>
+              </button>
 
-              <span
-                class="control close-control desktop-and-up"
+              <button
+                class="circular control button close-control desktop-and-up"
                 v-if="$store.state.ui.queueFocused"
                 @click.stop="toggleMobilePlayer">
                 <i class="large down angle icon"></i>
-              </span>
-              <span
-                class="control desktop-and-up"
+              </button>
+              <button
+                class="circular control button desktop-and-up"
                 v-else
                 @click.stop="toggleMobilePlayer">
                 <i class="large up angle icon"></i>
-              </span>
-              <span
-                class="control close-control tablet-and-below"
+              </button>
+              <button
+                class="circular control button close-control tablet-and-below"
                 v-if="$store.state.ui.queueFocused === 'player'"
                 @click.stop="switchTab">
                 <i class="large up angle icon"></i>
-              </span>
-              <span
-                class="control tablet-and-below"
+              </button>
+              <button
+                class="circular control button tablet-and-below"
                 v-if="$store.state.ui.queueFocused === 'queue'"
                 @click.stop="switchTab">
                 <i class="large down angle icon"></i>
-              </span>
+              </button>
             </div>
-            <span
-              class="control close-control tablet-and-below"
+            <button
+              class="circular control button close-control tablet-and-below"
               @click.stop="$store.commit('ui/queueFocused', null)">
               <i class="x icon"></i>
-            </span>
+            </button>
           </div>
         </div>
       </div>
     </div>
     <GlobalEvents
       @keydown.p.prevent.exact="togglePlay"
+      @keydown.esc.prevent.exact="$store.commit('ui/queueFocused', null)"
       @keydown.ctrl.shift.left.prevent.exact="previous"
       @keydown.ctrl.shift.right.prevent.exact="next"
       @keydown.shift.down.prevent.exact="$store.commit('player/incrementVolume', -0.1)"
@@ -732,7 +727,7 @@ export default {
             title: this.currentTrack.title,
             artist: this.currentTrack.artist.name,
           }
-          if (this.currentTrack.album) {
+          if (this.currentTrack.album && this.currentTrack.album.cover) {
             metadata.album = this.currentTrack.album.title
             metadata.artwork = [
               { src: this.currentTrack.album.cover.urls.original, sizes: '96x96',   type: 'image/png' },

front/src/components/audio/VolumeControl.vue

 <template>
-   <span :class="['component-volume-control', {'expanded': expanded}]" @click.prevent.stop="" @mouseover="handleOver" @mouseleave="handleLeave">
+   <button class="circular control button" :class="['component-volume-control', {'expanded': expanded}]" @click.prevent.stop="" @mouseover="handleOver" @mouseleave="handleLeave">
     <span
       role="button"
       v-if="sliderVolume === 0"
@@ -34,7 +34,7 @@
         max="1"
         v-model="sliderVolume" />
     </div>
-  </span>
+  </button class="circular control">
 </template>
 <script>
 import { mapState, mapGetters, mapActions } from "vuex"

front/src/components/common/AttachmentInput.vue

@@ -18,16 +18,16 @@
         </div>
         <div class="eleven wide column">
           <div class="file-input">
-            <label class="ui basic button" :for="attachmentId">
+            <label :for="attachmentId">
               <translate translate-context="*/*/*">Upload New Picture…</translate>
             </label>
-            <input class="ui hidden input" ref="attachment" type="file" :id="attachmentId" accept="image/x-png,image/jpeg" @change="submit" />
+            <input class="ui input" ref="attachment" type="file" :id="attachmentId" accept="image/x-png,image/jpeg" @change="submit" />
           </div>
           <div class="ui very small hidden divider"></div>
           <p><translate translate-context="Content/*/Paragraph">PNG or JPG. Dimensions should be between 1400x1400px and 3000x3000px. Maximum file size allowed is 5MB.</translate></p>
-          <div class="ui basic tiny button" v-if="value" @click.stop.prevent="remove(value)">
+          <button class="ui basic tiny button" v-if="value" @click.stop.prevent="remove(value)">
             <translate translate-context="Content/Radio/Button.Label/Verb">Remove</translate>
-          </div>
+          </button>
           <div v-if="isLoading" class="ui active inverted dimmer">
             <div class="ui indeterminate text loader">
               <translate translate-context="Content/*/*/Noun">Uploading file…</translate>

front/src/components/common/DangerousButton.vue

 <template>
-  <div @click="showModal = true" :class="[{disabled: disabled}]" role="button" :disabled="disabled">
+  <button @click="showModal = true" :class="[{disabled: disabled}]" :disabled="disabled">
     <slot></slot>
 
     <modal class="small" :show.sync="showModal">
@@ -24,7 +24,7 @@
         </button>
       </div>
     </modal>
-  </div>
+  </button>
 
 </template>
 <script>

front/src/components/federation/FetchButton.vue

@@ -82,12 +82,11 @@
         </div>
       </div>
       <div class="actions">
-        <div role="button" class="ui basic cancel button">
+        <button class="ui basic cancel button">
           <translate translate-context="*/*/Button.Label/Verb">Close</translate>
-        </div>
-        <div role="button" @click="showModal = false; $emit('refresh')" class="ui confirm success button" v-if="fetch && fetch.status === 'finished'">
+        </button @click.prevent="showModal = false; $emit('refresh')" class="ui confirm success button" v-if="fetch && fetch.status === 'finished'">
           <translate translate-context="*/*/Button.Label/Verb">Close and reload page</translate>
-        </div>
+        </button>
       </div>
     </modal>
   </div>

front/src/components/forms/PasswordInput.vue

@@ -7,9 +7,9 @@
     @input="$emit('input', $event.target.value)"
     :id="fieldId"
     :value="value">
-    <span @click="showPassword = !showPassword" :title="labels.title" class="ui icon button">
+    <button @click.prevent="showPassword = !showPassword" :title="labels.title" class="ui icon button">
       <i class="eye icon"></i>
-    </span>
+    </button>
     <button v-if="copyButton" @click.prevent="copy" class="ui icon button" :title="labels.copy">
       <i class="copy icon"></i>
     </button>

front/src/components/library/AlbumDropdown.vue

@@ -12,12 +12,12 @@
         </div>
       </div>
       <div class="actions">
-        <div class="ui basic deny button">
+        <button class="ui basic deny button">
           <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
-        </div>
+        </button>
       </div>
     </modal>
-    <div role="button" class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
+    <button class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
       <i class="ellipsis vertical icon"></i>
       <div class="menu">
         <div
@@ -78,7 +78,7 @@
           <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
         </a>
       </div>
-    </div>
+    </button>
   </span>
 </template>
 <script>

front/src/components/library/ArtistBase.vue

@@ -45,26 +45,26 @@
                 </div>
               </div>
               <div class="actions">
-                <div class="ui deny button">
+                <button class="ui deny button">
                   <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
-                </div>
+                </button>
               </div>
             </modal>
             <div class="ui buttons">
               <button class="ui button" @click="$refs.dropdown.click()">
                 <translate translate-context="*/*/Button.Label/Noun">More…</translate>
               </button>
-              <div class="ui floating dropdown icon button" ref="dropdown" v-dropdown>
+              <button class="ui floating dropdown icon button" ref="dropdown" v-dropdown>
                 <i class="dropdown icon"></i>
                 <div class="menu">
-                  <div
+                  <button
                     role="button"
                     v-if="publicLibraries.length > 0"
-                    @click="showEmbedModal = !showEmbedModal"
+                    @click.prevent="showEmbedModal = !showEmbedModal"
                     class="basic item">
                     <i class="code icon"></i>
                     <translate translate-context="Content/*/Button.Label/Verb">Embed</translate>
-                  </div>
+                  </button>
                   <a :href="wikipediaUrl" target="_blank" rel="noreferrer noopener" class="basic item">
                     <i class="wikipedia w icon"></i>
                     <translate translate-context="Content/*/Button.Label/Verb">Search on Wikipedia</translate>
@@ -108,7 +108,7 @@
                     <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
                   </a>
                 </div>
-              </div>
+              </button>
             </div>
           </div>
         </div>

front/src/components/library/ImportStatusModal.vue

@@ -77,9 +77,9 @@
       </div>
     </div>
     <div class="actions">
-      <div class="ui deny button">
+      <button class="ui deny button">
         <translate translate-context="*/*/Button.Label/Verb">Close</translate>
-      </div>
+      </button>
     </div>
   </modal>
 </template>

front/src/components/library/TrackBase.vue

@@ -36,12 +36,12 @@
                   </div>
                 </div>
                 <div class="actions">
-                  <div class="ui basic deny button">
+                  <button class="ui basic deny button">
                     <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
-                  </div>
+                  </button>
                 </div>
               </modal>
-              <div class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
+              <button class="ui floating dropdown circular icon basic button" :title="labels.more" v-dropdown="{direction: 'downward'}">
                 <i class="ellipsis vertical icon"></i>
                 <div class="menu" style="right: 0; left: auto">
                   <div
@@ -102,7 +102,7 @@
                     <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
                   </a>
                 </div>
-              </div>
+              </button>
             </div>
           </div>
         </div>

front/src/components/library/radios/Filter.vue

@@ -51,9 +51,9 @@
           </div>
         </div>
         <div class="actions">
-          <div class="ui deny button">
+          <button class="ui deny button">
             <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
-          </div>
+          </button>
         </div>
       </modal>
     </td>

front/src/components/manage/moderation/InstancePolicyModal.vue

@@ -31,9 +31,9 @@
         <div class="ui hidden divider"></div>
       </div>
       <div class="actions">
-        <div class="ui deny button">
+        <button class="ui deny button">
           <translate translate-context="*/*/Button.Label/Verb">Close</translate>
-        </div>
+        </button>
       </div>
     </modal>
 

front/src/components/notifications/NotificationRow.vue

@@ -9,14 +9,14 @@
       </router-link>
       <template v-else v-html="notificationData.message"></template>
       <template v-if="notificationData.acceptFollow">&nbsp;
-        <div @click="handleAction(notificationData.acceptFollow.handler)" :class="['ui', 'basic', 'tiny', notificationData.acceptFollow.buttonClass || '', 'button']">
+        <button @click="handleAction(notificationData.acceptFollow.handler)" :class="['ui', 'basic', 'tiny', notificationData.acceptFollow.buttonClass || '', 'button']">
           <i v-if="notificationData.acceptFollow.icon" :class="[notificationData.acceptFollow.icon, 'icon']" />
           {{ notificationData.acceptFollow.label }}
-        </div>
-        <div @click="handleAction(notificationData.rejectFollow.handler)" :class="['ui', 'basic', 'tiny', notificationData.rejectFollow.buttonClass || '', 'button']">
+        </button>
+        <button @click="handleAction(notificationData.rejectFollow.handler)" :class="['ui', 'basic', 'tiny', notificationData.rejectFollow.buttonClass || '', 'button']">
           <i v-if="notificationData.rejectFollow.icon" :class="[notificationData.rejectFollow.icon, 'icon']" />
           {{ notificationData.rejectFollow.label }}
-        </div>
+        </button>
       </template>
     </td>
     <td><human-date :date="item.activity.creation_date" /></td>

front/src/components/playlists/Editor.vue

@@ -33,7 +33,7 @@
       </template>
     </div>
     <div class="ui bottom attached segment">
-      <div
+      <button
         @click="insertMany(queueTracks, false)"
         :disabled="queueTracks.length === 0"
         :class="['ui', {disabled: queueTracks.length === 0}, 'labeled', 'icon', 'button']"
@@ -45,7 +45,7 @@
             :translate-params="{count: queueTracks.length}">
             Insert from queue (%{ count } track)
           </translate>
-        </div>
+        </button>
 
       <dangerous-button :disabled="plts.length === 0" class="ui labeled right floated danger icon button" :action="clearPlaylist">
         <i class="eraser icon"></i> <translate translate-context="*/Playlist/Button.Label/Verb">Clear playlist</translate>
@@ -64,7 +64,7 @@
               <tr v-for="(plt, index) in plts" :key="`${index}-${plt.track.id}`">
                 <td class="left aligned">{{ plt.index + 1}}</td>
                 <td class="center aligned">
-                  <img alt="" class="ui mini image" v-if="plt.track.album && plt.track.album.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)">
+                  <img alt="" class="ui mini image" v-if="plt.track.album && plt.track.album.cover && plt.track.album.cover.urls.original" v-lazy="$store.getters['instance/absoluteUrl'](plt.track.album.cover.urls.medium_square_crop)">
                   <img alt="" class="ui mini image" v-else src="../../assets/audio/default-cover.png">
                 </td>
                 <td colspan="4">
@@ -72,7 +72,9 @@
                     {{ plt.track.artist.name }}
                 </td>
                 <td class="right aligned">
-                  <i @click.stop="removePlt(index)" class="circular danger trash icon"></i>
+                  <button class="ui circular danger basic icon button">
+                    <i @click.stop="removePlt(index)" class="trash icon"></i>                
+                  </button>
                 </td>
               </tr>
             </draggable>

front/src/components/playlists/PlaylistModal.vue

@@ -100,7 +100,7 @@
       </div>
     </div>
     <div class="actions">
-      <div class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></div>
+      <button class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></button>
     </div>
   </modal>
 </template>

front/src/main.js

@@ -66,6 +66,13 @@ Vue.directive('title', function (el, binding) {
 Vue.directive('dropdown', function (el, binding) {
   jQuery(el).dropdown({
     selectOnKeydown: false,
+    action: function (text, value, $el) {
+      // used to ensure focusing the dropdown and clicking via keyboard
+      // works as expected
+      let button = $el[0]
+      button.click()
+      jQuery(el).find('.ui.dropdown').dropdown('hide')
+    },
     ...(binding.value || {})
   })
 })

front/src/style/components/_play_button.scss

@@ -2,4 +2,9 @@
   button.item {
     width: 100%;
   }
+  > .floating.dropdown {
+    background: transparent;
+    padding: 0;
+    border: none;
+  }
 }

front/src/style/components/_player.scss

@@ -192,9 +192,6 @@
     border: none;
     background-color: transparent;
     color: inherit;
-    &:focus {
-      box-shadow: none;
-    }
 
   }
   .fake-dropdown {
@@ -204,13 +201,19 @@
     align-items: center;
     justify-content: space-between;
     min-width: 10em;
-    > * {
+    > .control.button {
       padding: 0.5em;
 
     }
     .position.control {
       padding-right: 1em;
       flex-grow: 1;
+      padding-left: 0;
+      i.stream.icon {
+        position: relative;
+        top: -2px;
+        left: -2px;
+      }
     }
     .angle.icon {
       margin-right: 0;