From d4c935fd21a59a77467a820ca9010eb993a86592 Mon Sep 17 00:00:00 2001
From: Joakim Hulthe <joakim@hulthe.net>
Date: Tue, 4 Jan 2022 15:39:29 +0100
Subject: [PATCH] Tweak small screen scaling

---
 src/app.rs                | 42 +++++++++++++++++++--------------------
 static/styles/common.scss | 12 +++++++++--
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/app.rs b/src/app.rs
index d290b06..a774aa1 100644
--- a/src/app.rs
+++ b/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![],
-                },
             ],
         ]
     };
diff --git a/static/styles/common.scss b/static/styles/common.scss
index 327cd6f..3fd0adf 100644
--- a/static/styles/common.scss
+++ b/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 {