From bf3c12365812509d83377ea877385a472a1b656b Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Mon, 12 Feb 2024 03:03:07 -0500
Subject: [PATCH] [S] Mobile

---
 AquaNet/src/pages/UserHome.svelte | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
index 84dbad5a..86546a3a 100644
--- a/AquaNet/src/pages/UserHome.svelte
+++ b/AquaNet/src/pages/UserHome.svelte
@@ -158,7 +158,7 @@
           <div class={clazz({alt: i % 2 === 0})}>
             <img src={`${data_host}/maimai/assetbundle/jacket_s/00${r.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="">
             <div class="info">
-              <div>{r.name}</div>
+              <div class="name">{r.name}</div>
               <div>
                 <span class={"rank-" + ("" + getMult(r.achievement)[2])[0]}>
                   <span class="rank-text">{("" + getMult(r.achievement)[2]).replace("p", "+")}</span>
@@ -310,6 +310,12 @@ $gap: 20px
         gap: $gap
         padding-right: 16px
 
+        // Limit song name to one line
+        .name
+          white-space: nowrap
+          overflow: hidden
+          text-overflow: ellipsis
+
         img
           width: 50px
           height: 50px
@@ -322,6 +328,13 @@ $gap: 20px
           display: flex
           justify-content: space-between
 
+          @media (max-width: $w-mobile)
+            flex-direction: column
+            gap: 0
+
+            span
+              text-align: left
+
         .rank-S
           // Gold green gradient on text
           background: linear-gradient(90deg, #ffee94, #ffb798, #ffa3e5, #ebff94)