From ad8d09745e32c4c3ccc1e69b52fdb32ad724d4ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tristan=20Dani=C3=ABl=20Maat?= <tm@tlater.net>
Date: Sat, 13 Aug 2022 23:31:36 +0100
Subject: [PATCH] Don't overflow the controls in weird ways on mobile

---
 src/music/features/controls/Controls.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/music/features/controls/Controls.tsx b/src/music/features/controls/Controls.tsx
index 31a682f..eac5e37 100644
--- a/src/music/features/controls/Controls.tsx
+++ b/src/music/features/controls/Controls.tsx
@@ -10,8 +10,8 @@ function Controls() {
 
     if (title.name === "Journey" && title.artist === "Mseq") {
         titleLine = (
-            <div className="notification is-primary">
-                <div className="level-item">
+            <div className="level-item is-size-7-mobile is-flex-shrink-1">
+                <div>
                     <a href="http://dig.ccmixter.org/files/Mseq/54702">
                         Journey
                     </a>
@@ -28,12 +28,12 @@ function Controls() {
 
     return (
         <div className="notification is-primary">
-            <div className="level">
-                <div className="level-left">
+            <div className="level is-mobile">
+                <div className="level-left is-flex-shrink-1">
                     <Indicator />
                     {titleLine}
                 </div>
-                <div className="level-right">
+                <div className="level-right is-hidden-mobile">
                     <div className="level-item">{title.artist}</div>
                 </div>
             </div>