Read commit comment.

Author: CodeF0x

src/css/main.css

@@ -337,21 +337,22 @@ progress::-webkit-progress-value {
 }
 
 .song-info {
-  grid-row: 3;
   display: flex;
   justify-content: center;
   align-items: center;
   color: var(--text-color);
   font-size: 0.9em;
 }
 
-#song-title {
+#song-title,
+#song-artist {
   float: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 50%;
 }
 
-#song-artist {
-  float: right;
-}
 
 #volume-wrapper {
   position: absolute;
@@ -387,10 +388,25 @@ input[type='range']:focus::-webkit-slider-runnable-track {
 }
 
 input[type='range']::-webkit-slider-thumb {
-  margin-top: -4px;
+  margin-top: -5px;
   cursor: pointer;
 }
 
 #volume {
   background-color: transparent;
 }
+
+/**
+* Because volume slider is positionied absolute,
+* we need this ugly rule to adjust song artist 
+* and song title
+*/
+@media (max-width: 1000px) {
+  #song-title {
+    max-width: 25%;
+  }
+
+  #song-artist {
+    max-width: 20%;
+  }
+}

src/index.html

@@ -46,11 +46,9 @@
         <div id="timer-end">0:00</div>
       </div>
       <div class="song-info">
-        <div>
-          <div id="song-title">Something</div>
-          &nbsp;by&nbsp;
-          <div id="song-artist">Someone</div>
-        </div>
+        <div id="song-title">Something</div>
+        <div>&nbsp;by&nbsp;</div>
+        <div id="song-artist">Someone</div>
         <div id="volume-wrapper">
           <div id="volume-button"></div>
           <input type="range" min="0" max="100" value="100" id="volume" />

src/js/event-listener.js

@@ -100,7 +100,7 @@ module.exports = function() {
     require('electron').shell.openExternal('https://codef0x.dev');
   });
 
-  volumeSlider.addEventListener('change', () => {
+  volumeSlider.addEventListener('input', () => {
     player.volume = volumeSlider.value / 100;
   });
 };