new info rect for masking long titles

src/renderer/style.less

@@ -1242,6 +1242,15 @@ body[platform="darwin"] .app-chrome .app-chrome-item > .window-controls > div.cl
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls {
+  .info-rect{
+    mask-image: linear-gradient(-90deg, transparent 0%, black 10%, black 90%, transparent 100%);
+    -webkit-mask-image: linear-gradient(-90deg, transparent 3%, black 10%, black 90%, transparent 100%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width:100%;
+  }
   .song-name {
     font-weight: 600;
     text-align: center;
@@ -1515,7 +1524,7 @@ div[data-type="musicVideo"] .info-rect .title::before {
   position: relative;
 }
 
-.app-chrome .app-chrome-item > .app-playback-controls > div > .song-artist-album {
+.app-chrome .app-chrome-item > .app-playback-controls .song-artist-album {
   font-weight: 400;
   font-size: 12px;
   text-align: center;

src/renderer/views/app/chrome-top.ejs

@@ -1,64 +1,36 @@
-<div
-  class="app-chrome"
-  :style="{'display': chrome.topChromeVisible ? '' : 'none'}"
->
+<div class="app-chrome" :style="{'display': chrome.topChromeVisible ? '' : 'none'}">
   <div class="app-chrome--left">
-    <div
-      class="app-chrome-item full-height"
-      v-if="chrome.windowControlPosition == 'left' && !chrome.nativeControls"
-    >
+    <div class="app-chrome-item full-height" v-if="chrome.windowControlPosition == 'left' && !chrome.nativeControls">
       <div class="window-controls-macos">
         <div class="close" @click="ipcRenderer.send('close')"></div>
         <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
-        <div
-          class="minmax restore"
-          v-if="chrome.maximized"
-          @click="ipcRenderer.send('maximize')"
-        ></div>
+        <div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')"></div>
         <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
       </div>
     </div>
     <div class="app-chrome-item full-height" v-else>
-      <button
-        class="app-mainmenu"
-        @blur="mainMenuVisibility(false, true)"
-        @click="mainMenuVisibility(true, false)"
-        @contextmenu="mainMenuVisibility(true, true)"
-        :class="{active: chrome.menuOpened}"
-        :aria-label="$root.getLz('term.quickNav')"
-      ></button>
+      <button class="app-mainmenu" @blur="mainMenuVisibility(false, true)" @click="mainMenuVisibility(true, false)"
+        @contextmenu="mainMenuVisibility(true, true)" :class="{active: chrome.menuOpened}"
+        :aria-label="$root.getLz('term.quickNav')"></button>
     </div>
     <template v-if="getThemeDirective('appNavigation') != 'seperate'">
-      <div
-        class="vdiv"
-        v-if="getThemeDirective('windowLayout') == 'twopanel'"
-      ></div>
+      <div class="vdiv" v-if="getThemeDirective('windowLayout') == 'twopanel'"></div>
       <div class="app-chrome-item">
-        <button
-          class="playback-button navigation"
-          @click="navigateBack()"
-          :title="$root.getLz('term.navigateBack')"
-          v-b-tooltip.hover
-        >
+        <button class="playback-button navigation" @click="navigateBack()" :title="$root.getLz('term.navigateBack')"
+          v-b-tooltip.hover>
           <%- include('../svg/chevron-left.svg') %>
         </button>
       </div>
       <div class="app-chrome-item">
-        <button
-          class="playback-button navigation"
-          @click="navigateForward()"
-          :title="$root.getLz('term.navigateForward')"
-          v-b-tooltip.hover
-        >
+        <button class="playback-button navigation" @click="navigateForward()"
+          :title="$root.getLz('term.navigateForward')" v-b-tooltip.hover>
           <%- include('../svg/chevron-right.svg') %>
         </button>
       </div>
       <div class="app-chrome-item" v-if="getThemeDirective('windowLayout') == 'twopanel'">
-        <button 
-        class="playback-button collapseLibrary" 
-        v-b-tooltip.hover
-        :title="chrome.sidebarCollapsed ? getLz('action.showLibrary') : getLz('action.hideLibrary')"
-        @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
+        <button class="playback-button collapseLibrary" v-b-tooltip.hover
+          :title="chrome.sidebarCollapsed ? getLz('action.showLibrary') : getLz('action.hideLibrary')"
+          @click="chrome.sidebarCollapsed = !chrome.sidebarCollapsed">
           <transition name="fade">
             <span v-if="chrome.sidebarCollapsed"></span>
           </transition>
@@ -68,166 +40,79 @@
 
         </button>
       </div>
-      <div
-        class="vdiv display--large"
-        v-if="getThemeDirective('windowLayout') != 'twopanel'"
-      ></div>
+      <div class="vdiv display--large" v-if="getThemeDirective('windowLayout') != 'twopanel'"></div>
     </template>
     <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
       <div class="app-chrome-item display--large">
-        <button
-          class="playback-button--small shuffle"
-          v-if="mk.shuffleMode == 0"
-          :class="isDisabled() && 'disabled'"
-          @click="mk.shuffleMode = 1"
-          :title="$root.getLz('term.enableShuffle')"
-          v-b-tooltip.hover
-        ></button>
-        <button
-          class="playback-button--small shuffle active"
-          v-else
-          :class="isDisabled() && 'disabled'"
-          @click="mk.shuffleMode = 0"
-          :title="$root.getLz('term.disableShuffle')"
-          v-b-tooltip.hover
-        ></button>
+        <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0" :class="isDisabled() && 'disabled'"
+          @click="mk.shuffleMode = 1" :title="$root.getLz('term.enableShuffle')" v-b-tooltip.hover></button>
+        <button class="playback-button--small shuffle active" v-else :class="isDisabled() && 'disabled'"
+          @click="mk.shuffleMode = 0" :title="$root.getLz('term.disableShuffle')" v-b-tooltip.hover></button>
       </div>
       <div class="app-chrome-item display--large">
-        <button
-          class="playback-button previous"
-          @click="prevButton()"
-          :class="isPrevDisabled() && 'disabled'"
-          :title="$root.getLz('term.previous')"
-          v-b-tooltip.hover
-        ></button>
+        <button class="playback-button previous" @click="prevButton()" :class="isPrevDisabled() && 'disabled'"
+          :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
       </div>
       <div class="app-chrome-item display--large">
-        <button
-          class="playback-button stop"
-          @click="mk.stop()"
+        <button class="playback-button stop" @click="mk.stop()"
           v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
-          :title="$root.getLz('term.stop')"
-          v-b-tooltip.hover
-        ></button>
-        <button
-          class="playback-button pause"
-          @click="mk.pause()"
-          v-else-if="mk.isPlaying"
-          :title="$root.getLz('term.pause')"
-          v-b-tooltip.hover
-        ></button>
-        <button
-          class="playback-button play"
-          @click="mk.play()"
-          v-else
-          :title="$root.getLz('term.play')"
-          v-b-tooltip.hover
-        ></button>
+          :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
+        <button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying"
+          :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
+        <button class="playback-button play" @click="mk.play()" v-else :title="$root.getLz('term.play')"
+          v-b-tooltip.hover></button>
       </div>
       <div class="app-chrome-item display--large">
-        <button
-          class="playback-button next"
-          @click="skipToNextItem()"
-          :class="isNextDisabled() && 'disabled'"
-          :title="$root.getLz('term.next')"
-          v-b-tooltip.hover
-        ></button>
+        <button class="playback-button next" @click="skipToNextItem()" :class="isNextDisabled() && 'disabled'"
+          :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
       </div>
       <div class="app-chrome-item display--large">
-        <button
-          class="playback-button--small repeat"
-          v-if="mk.repeatMode == 0"
-          :class="isDisabled() && 'disabled'"
-          @click="mk.repeatMode = 1"
-          :title="$root.getLz('term.enableRepeatOne')"
-          v-b-tooltip.hover
-        ></button>
-        <button
-          class="playback-button--small repeat repeatOne"
-          @click="mk.repeatMode = 2"
-          :class="isDisabled() && 'disabled'"
-          v-else-if="mk.repeatMode == 1"
-          :title="$root.getLz('term.disableRepeatOne')"
-          v-b-tooltip.hover
-        ></button>
-        <button
-          class="playback-button--small repeat active"
-          @click="mk.repeatMode = 0"
-          :class="isDisabled() && 'disabled'"
-          v-else-if="mk.repeatMode == 2"
-          :title="$root.getLz('term.disableRepeat')"
-          v-b-tooltip.hover
-        ></button>
+        <button class="playback-button--small repeat" v-if="mk.repeatMode == 0" :class="isDisabled() && 'disabled'"
+          @click="mk.repeatMode = 1" :title="$root.getLz('term.enableRepeatOne')" v-b-tooltip.hover></button>
+        <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 2"
+          :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 1"
+          :title="$root.getLz('term.disableRepeatOne')" v-b-tooltip.hover></button>
+        <button class="playback-button--small repeat active" @click="mk.repeatMode = 0"
+          :class="isDisabled() && 'disabled'" v-else-if="mk.repeatMode == 2" :title="$root.getLz('term.disableRepeat')"
+          v-b-tooltip.hover></button>
       </div>
     </template>
   </div>
   <div class="app-chrome--center">
-    <div
-      class="app-chrome-item playback-controls"
-      v-if="getThemeDirective('windowLayout') != 'twopanel'"
-    >
+    <div class="app-chrome-item playback-controls" v-if="getThemeDirective('windowLayout') != 'twopanel'">
       <template v-if="mkReady()">
-        <div
-          class="app-playback-controls"
-          @mouseover="chrome.progresshover = true"
-          @mouseleave="chrome.progresshover = false"
-          @contextmenu="nowPlayingContextMenu"
-        >
+        <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
+          @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
           <div class="artwork" id="artworkLCD">
             <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
           </div>
-          <b-popover
-            custom-class="mediainfo-popover"
-            target="artworkLCD"
-            triggers="hover"
-            placement="bottom"
-          >
+          <b-popover custom-class="mediainfo-popover" target="artworkLCD" triggers="hover" placement="bottom">
             <div class="content">
               <div class="shadow-artwork">
-                <mediaitem-artwork
-                  :url="currentArtUrl"
-                  :url="currentArtUrlRaw"
-                ></mediaitem-artwork>
+                <mediaitem-artwork :url="currentArtUrl" :url="currentArtUrlRaw"></mediaitem-artwork>
               </div>
               <div class="popover-artwork">
-                <mediaitem-artwork
-                  :size="210"
-                  :url="currentArtUrlRaw"
-                ></mediaitem-artwork>
+                <mediaitem-artwork :size="210" :url="currentArtUrlRaw"></mediaitem-artwork>
               </div>
               <div class="song-name">
                 {{ mk.nowPlayingItem["attributes"]["name"] }}
               </div>
-              <div
-                class="song-artist"
-                @click="getNowPlayingItemDetailed(`artist`)"
-              >
+              <div class="song-artist" @click="getNowPlayingItemDetailed(`artist`)">
                 {{ mk.nowPlayingItem["attributes"]["artistName"] }}
               </div>
-              <div
-                class="song-album"
-                @click="getNowPlayingItemDetailed(`album`)"
-              >
+              <div class="song-album" @click="getNowPlayingItemDetailed(`album`)">
                 {{
-                  mk.nowPlayingItem["attributes"]["albumName"]
-                    ? mk.nowPlayingItem["attributes"]["albumName"]
-                    : ""
+                mk.nowPlayingItem["attributes"]["albumName"]
+                ? mk.nowPlayingItem["attributes"]["albumName"]
+                : ""
                 }}
               </div>
               <hr />
               <div class="btn-group" style="width: 100%">
-                <button
-                  class="md-btn md-btn-small"
-                  style="width: 100%"
-                  @click="drawer.open = false; miniPlayer(true)"
-                >
+                <button class="md-btn md-btn-small" style="width: 100%" @click="drawer.open = false; miniPlayer(true)">
                   {{ $root.getLz("term.miniplayer") }}
                 </button>
-                <button
-                  class="md-btn md-btn-small"
-                  style="width: 100%"
-                  @click="drawer.open = false; fullscreen(true)"
-                >
+                <button class="md-btn md-btn-small" style="width: 100%" @click="drawer.open = false; fullscreen(true)">
                   {{ $root.getLz("term.fullscreenView") }}
                 </button>
               </div>
@@ -235,94 +120,63 @@
           </b-popover>
           <div class="playback-info">
             <div class="chrome-icon-container">
-              <div
-                class="audio-type private-icon"
-                v-if="cfg.general.privateEnabled === true"
-              ></div>
-              <div
-                class="audio-type ppe-icon"
-                v-if="cfg.audio.maikiwiAudio.ciderPPE === true"
-              ></div>
+              <div class="audio-type private-icon" v-if="cfg.general.privateEnabled === true"></div>
+              <div class="audio-type ppe-icon" v-if="cfg.audio.maikiwiAudio.ciderPPE === true"></div>
             </div>
-            <div
-              class="song-name"
-              :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']"
-            >
-              {{ mk.nowPlayingItem["attributes"]["name"] }}
-              <div
-                class="explicit-icon"
-                v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
-                style="display: inline-block"
-              ></div>
-            </div>
-            <div class="song-artist-album">
-              <div
-                class="song-artist-album-content"
-                :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
-                style="
+            <div class="info-rect">
+              <div class="song-name"
+                :class="[isElementOverflowing('#app-main > div.app-chrome > div.app-chrome--center > div > div > div.playback-info > div.song-name') ? 'marquee' : '']">
+                {{ mk.nowPlayingItem["attributes"]["name"] }}
+                <div class="explicit-icon" v-if="mk.nowPlayingItem['attributes']['contentRating'] == 'explicit'"
+                  style="display: inline-block"></div>
+              </div>
+              <div class="song-artist-album">
+                <div class="song-artist-album-content"
+                  :class="[isElementOverflowing('#app-main > .app-chrome .app-chrome-item > .app-playback-controls > div >.song-artist-album > .song-artist-album-content') ? 'marquee' : '']"
+                  style="
                   display: inline-block;
                   -webkit-box-orient: horizontal;
                   white-space: nowrap;
-                "
-              >
-                <div
-                  class="item-navigate song-artist"
-                  style="display: inline-block"
-                  @click="getNowPlayingItemDetailed(`artist`)"
-                >
-                  {{ mk.nowPlayingItem["attributes"]["artistName"] }}
-                </div>
-                <div
-                  class="song-artist item-navigate"
-                  style="display: inline-block"
-                  @click="getNowPlayingItemDetailed('album')"
-                  v-if="mk.nowPlayingItem['attributes']['albumName'] != ''"
-                >
-                  <div class="separator" style="display: inline-block">
-                    {{ "—" }}
+                ">
+                  <div class="item-navigate song-artist" style="display: inline-block"
+                    @click="getNowPlayingItemDetailed(`artist`)">
+                    {{ mk.nowPlayingItem["attributes"]["artistName"] }}
                   </div>
-                  {{
+                  <div class="song-artist item-navigate" style="display: inline-block"
+                    @click="getNowPlayingItemDetailed('album')"
+                    v-if="mk.nowPlayingItem['attributes']['albumName'] != ''">
+                    <div class="separator" style="display: inline-block">
+                      {{ "—" }}
+                    </div>
+                    {{
                     mk.nowPlayingItem["attributes"]["albumName"]
-                      ? mk.nowPlayingItem["attributes"]["albumName"]
-                      : ""
-                  }}
+                    ? mk.nowPlayingItem["attributes"]["albumName"]
+                    : ""
+                    }}
+                  </div>
                 </div>
               </div>
             </div>
-
             <div class="song-progress">
-              <div
-                class="song-duration"
-                style="justify-content: space-between; height: 1px"
-                :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]"
-              >
+              <div class="song-duration" style="justify-content: space-between; height: 1px"
+                :style="[chrome.progresshover ? {'display': 'flex'} : {'display' : 'none'} ]">
                 <p style="width: auto">{{ convertTime(getSongProgress()) }}</p>
                 <p style="width: auto">
                   {{ convertTime(mk.currentPlaybackDuration) }}
                 </p>
               </div>
 
-              <input
-                type="range"
-                step="0.01"
-                min="0"
-                :style="progressBarStyle()"
+              <input type="range" step="0.01" min="0" :style="progressBarStyle()"
                 @input="playerLCD.desiredDuration = $event.target.value;playerLCD.userInteraction = true"
                 @mouseup="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
                 @touchend="mk.seekToTime($event.target.value);setTimeout(()=>{playerLCD.desiredDuration = 0;playerLCD.userInteraction = false}, 1000);"
-                :max="mk.currentPlaybackDuration"
-                :value="getSongProgress()"
-              />
+                :max="mk.currentPlaybackDuration" :value="getSongProgress()" />
             </div>
           </div>
           <template v-if="mk.nowPlayingItem['attributes']['playParams']">
             <div class="actions">
-              <button
-                class="lcdMenu"
-                @click="nowPlayingContextMenu"
-                :title="$root.getLz('term.more')"
-                v-b-tooltip.hover
-              >
+              <button class="lcdMenu" @click="nowPlayingContextMenu" :title="$root.getLz('term.more')"
+                v-b-tooltip.hover>
                 <div class="svg-icon"></div>
               </button>
             </div>
@@ -332,86 +186,43 @@
     </div>
     <div class="app-chrome-item" v-else>
       <div class="top-nav-group">
-        <sidebar-library-item
-          :name="$root.getLz('home.title')"
-          svg-icon="./assets/feather/home.svg"
-          page="home"
-        >
+        <sidebar-library-item :name="$root.getLz('home.title')" svg-icon="./assets/feather/home.svg" page="home">
         </sidebar-library-item>
-        <sidebar-library-item
-          :name="$root.getLz('term.listenNow')"
-          svg-icon="./assets/feather/play-circle.svg"
-          page="listen_now"
-        ></sidebar-library-item>
-        <sidebar-library-item
-          :name="$root.getLz('term.browse')"
-          svg-icon="./assets/feather/globe.svg"
-          page="browse"
-        >
+        <sidebar-library-item :name="$root.getLz('term.listenNow')" svg-icon="./assets/feather/play-circle.svg"
+          page="listen_now"></sidebar-library-item>
+        <sidebar-library-item :name="$root.getLz('term.browse')" svg-icon="./assets/feather/globe.svg" page="browse">
+        </sidebar-library-item>
+        <sidebar-library-item :name="$root.getLz('term.radio')" svg-icon="./assets/feather/radio.svg" page="radio">
         </sidebar-library-item>
-        <sidebar-library-item
-          :name="$root.getLz('term.radio')"
-          svg-icon="./assets/feather/radio.svg"
-          page="radio"
-        ></sidebar-library-item>
       </div>
     </div>
   </div>
   <div class="app-chrome--right">
     <template v-if="getThemeDirective('windowLayout') != 'twopanel'">
       <div class="app-chrome-item volume display--large">
-        <button
-          class="volume-button--small volume"
-          @click="muteButtonPressed()"
+        <button class="volume-button--small volume" @click="muteButtonPressed()"
           :class="{'active': this.cfg.audio.volume == 0}"
-          :title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')"
-          v-b-tooltip.hover
-        ></button>
-        <input
-          type="range"
-          @wheel="volumeWheel"
-          :step="cfg.audio.volumeStep"
-          min="0"
-          :max="cfg.audio.maxVolume"
-          v-model="mk.volume"
-          v-if="typeof mk.volume != 'undefined'"
-          @change="checkMuteChange()"
-          v-b-tooltip.hover
-          :title="formatVolumeTooltip()"
-        />
+          :title="cfg.audio.muted ? $root.getLz('term.unmute') : $root.getLz('term.mute')" v-b-tooltip.hover></button>
+        <input type="range" @wheel="volumeWheel" :step="cfg.audio.volumeStep" min="0" :max="cfg.audio.maxVolume"
+          v-model="mk.volume" v-if="typeof mk.volume != 'undefined'" @change="checkMuteChange()" v-b-tooltip.hover
+          :title="formatVolumeTooltip()" />
       </div>
       <div class="app-chrome-item generic">
-        <button
-          class="playback-button--small cast"
-          :title="$root.getLz('term.cast')"
+        <button class="playback-button--small cast" :title="$root.getLz('term.cast')"
           @click="cfg.advanced.AudioContext ? modals.castMenu = true : $root.notyf.error($root.getLz('settings.warn.enableAdvancedFunctionality'))"
-          v-b-tooltip.hover
-        ></button>
+          v-b-tooltip.hover></button>
       </div>
       <div class="app-chrome-item generic">
-        <button
-          class="playback-button--small queue"
-          :title="$root.getLz('term.queue')"
-          v-b-tooltip.hover
-          :class="{'active': drawer.panel == 'queue'}"
-          @click="invokeDrawer('queue')"
-        ></button>
+        <button class="playback-button--small queue" :title="$root.getLz('term.queue')" v-b-tooltip.hover
+          :class="{'active': drawer.panel == 'queue'}" @click="invokeDrawer('queue')"></button>
       </div>
       <div class="app-chrome-item generic">
         <template v-if="lyrics && lyrics != [] && lyrics.length > 0">
-          <button
-            class="playback-button--small lyrics"
-            :title="$root.getLz('term.lyrics')"
-            v-b-tooltip.hover
-            :class="{'active': drawer.panel == 'lyrics'}"
-            @click="invokeDrawer('lyrics')"
-          ></button>
+          <button class="playback-button--small lyrics" :title="$root.getLz('term.lyrics')" v-b-tooltip.hover
+            :class="{'active': drawer.panel == 'lyrics'}" @click="invokeDrawer('lyrics')"></button>
         </template>
         <template v-else>
-          <button
-            class="playback-button--small lyrics"
-            :style="{'opacity': 0.3, 'pointer-events': 'none'}"
-          ></button>
+          <button class="playback-button--small lyrics" :style="{'opacity': 0.3, 'pointer-events': 'none'}"></button>
         </template>
       </div>
     </template>
@@ -419,31 +230,16 @@
       <div class="app-chrome-item search">
         <div class="search-input-container">
           <div class="search-input--icon"></div>
-          <input
-            type="search"
-            spellcheck="false"
-            @click="showSearch()"
-            @focus="search.showHints = true"
+          <input type="search" spellcheck="false" @click="showSearch()" @focus="search.showHints = true"
             @blur="setTimeout(()=>{search.showHints = false}, 300)"
-            v-on:keyup.enter="searchQuery();search.showHints = false"
-            @change="showSearch();"
-            @input="getSearchHints()"
-            :placeholder="$root.getLz('term.search') + '...'"
-            v-model="search.term"
-            ref="searchInput"
-            class="search-input"
-          />
+            v-on:keyup.enter="searchQuery();search.showHints = false" @change="showSearch();" @input="getSearchHints()"
+            :placeholder="$root.getLz('term.search') + '...'" v-model="search.term" ref="searchInput"
+            class="search-input" />
 
-          <div
-            class="search-hints-container"
-            v-if="search.showHints && search.hints.length != 0"
-          >
+          <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
             <div class="search-hints">
-              <button
-                class="search-hint text-overflow-elipsis"
-                v-for="hint in search.hints"
-                @click="search.term = hint;search.showHints = false;searchQuery(hint)"
-              >
+              <button class="search-hint text-overflow-elipsis" v-for="hint in search.hints"
+                @click="search.term = hint;search.showHints = false;searchQuery(hint)">
                 {{ hint }}
               </button>
             </div>
@@ -451,33 +247,18 @@
         </div>
       </div>
     </template>
-    <div
-      class="app-chrome-item full-height"
-      id="window-controls-container"
-      v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls"
-    >
+    <div class="app-chrome-item full-height" id="window-controls-container"
+      v-if="chrome.windowControlPosition == 'right' && !chrome.nativeControls">
       <div class="window-controls">
         <div class="minimize" @click="ipcRenderer.send('minimize')"></div>
-        <div
-          class="minmax restore"
-          v-if="chrome.maximized"
-          @click="ipcRenderer.send('maximize')"
-        ></div>
+        <div class="minmax restore" v-if="chrome.maximized" @click="ipcRenderer.send('maximize')"></div>
         <div class="minmax" v-else @click="ipcRenderer.send('maximize')"></div>
         <div class="close" @click="ipcRenderer.send('close')"></div>
       </div>
     </div>
-    <div
-      class="app-chrome-item full-height"
-      v-else-if="platform != 'darwin' && !chrome.nativeControls"
-    >
-      <button
-        class="app-mainmenu"
-        @blur="mainMenuVisibility(false, true)"
-        @click="mainMenuVisibility(true, false)"
-        @contextmenu="mainMenuVisibility(true, true)"
-        :class="{active: chrome.menuOpened}"
-      ></button>
+    <div class="app-chrome-item full-height" v-else-if="platform != 'darwin' && !chrome.nativeControls">
+      <button class="app-mainmenu" @blur="mainMenuVisibility(false, true)" @click="mainMenuVisibility(true, false)"
+        @contextmenu="mainMenuVisibility(true, true)" :class="{active: chrome.menuOpened}"></button>
     </div>
   </div>
-</div>
+</div>