Fixes media control

.config/eww/widgets/media/media.yuck

@@ -15,8 +15,14 @@
   )
 )
 
-(defwidget media-label [text ?class]
-  (label :text {text} :xalign "0" :class {class})
+(defwidget media-label [text ?header ?icon]
+  (box
+    :visible {strlength(text) > 1}
+    :space-evenly false
+    :spacing 10
+    (image :icon {icon})
+    (label :text {text} :xalign "0" :class {header ? "header" : ""})
+  )
 )
 
 (defwidget media-texts [] 
@@ -26,9 +32,9 @@
     :valign "center"
     :halign "start"
     :space-evenly false
-    (media-label :class "header" :text {media-info["xesam:title"]})
-    (media-label :text {media-info["xesam:artist"]})
-    (media-label :text {media-info["xesam:album"]})
+    (media-label :header true :text {media-info["xesam:title"]} :icon "library-music")
+    (media-label :text {media-info["xesam:artist"]} :icon "user-identity")
+    (media-label :text {media-info["xesam:album"] ?: ""} :icon "cd")
   )
 )
 
@@ -89,7 +95,7 @@
   :geometry (geometry 
     :x "10px"
     :y "50px"
-    :width "512px"
+    :width "0px"
     :height "10%"
     :anchor "top right")
   :stacking "fg"

.config/eww/widgets/media/style.scss

@@ -11,11 +11,12 @@
   }
 
   label {
+    font-size: 1.2rem;
+  }
+
+  .header {
     font-size: 1.5rem;
-    &.header {
-      font-size: 2rem;
-      font-weight: bolder;
-    }
+    font-weight: bolder;
   }
 
   progressbar {