Tweak small screen scaling

src/app.rs

@@ -142,6 +142,27 @@ pub fn view(model: &Model) -> Vec<Node<Msg>> {
             ],
             div![
                 C![C.song_gizmos],
+                match &song.genre {
+                    Some(genre) => div![
+                        C![C.gizmo, C.note_icon, C.tooltip],
+                        span![C![C.tooltiptext], genre],
+                    ],
+                    None => empty![],
+                },
+                match &song.language {
+                    Some(language) => div![
+                        C![C.gizmo, C.flag_icon, C.tooltip],
+                        span![C![C.tooltiptext], language],
+                    ],
+                    None => empty![],
+                },
+                IF![song.video.is_some() => div![
+                    C![C.gizmo, C.video_icon, C.tooltip],
+                    span![
+                        C![C.tooltiptext],
+                        "Musikvideo",
+                    ],
+                ]],
                 match (&song.duet_singer_1, &song.duet_singer_2) {
                     (Some(p1), Some(p2)) => div![
                         C![C.gizmo, C.duet_icon, C.tooltip],
@@ -156,27 +177,6 @@ pub fn view(model: &Model) -> Vec<Node<Msg>> {
                     ],
                     _ => empty![],
                 },
-                IF![song.video.is_some() => div![
-                    C![C.gizmo, C.video_icon, C.tooltip],
-                    span![
-                        C![C.tooltiptext],
-                        "Musikvideo",
-                    ],
-                ]],
-                match &song.language {
-                    Some(language) => div![
-                        C![C.gizmo, C.flag_icon, C.tooltip],
-                        span![C![C.tooltiptext], language],
-                    ],
-                    None => empty![],
-                },
-                match &song.genre {
-                    Some(genre) => div![
-                        C![C.gizmo, C.note_icon, C.tooltip],
-                        span![C![C.tooltiptext], genre],
-                    ],
-                    None => empty![],
-                },
             ],
         ]
     };

static/styles/common.scss

@@ -133,6 +133,7 @@ body {
 	-webkit-box-flex: 1;
 	-ms-flex: 1;
 	flex: 1;
+	flex-basis: max-content;
 	margin: 1em;
 }
 
@@ -161,11 +162,18 @@ body {
 .song_gizmos {
 	flex-grow: 0;
 	flex-shrink: 1;
-	padding-top: 1.5em;
+
+	display: flex;
+	flex-direction: row-reverse;
+	flex-wrap: wrap;
+
+	padding-top: 1em;
+	padding-bottom: 1em;
+	padding-right: 0.5em;
 }
 
 .song_gizmos div {
-	margin-right: 1em;
+	margin: 0.5em;
 }
 
 .gizmo {