From 8f997ca3d9c7dc66ed2c793374ad4845df010b53 Mon Sep 17 00:00:00 2001
From: Zhe Fang <founchoo@outlook.com>
Date: Thu, 17 Jul 2025 14:45:00 -0400
Subject: [PATCH] fix #42

---
 .../ViewModels/LyricsPageViewModel.cs              |  4 ++++
 .../BetterLyrics.WinUI3/Views/LyricsPage.xaml      | 11 ++++++-----
 .../BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs   | 14 +++++++++++++-
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/LyricsPageViewModel.cs b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/LyricsPageViewModel.cs
index b2f62af..7fd1534 100644
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/LyricsPageViewModel.cs
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/ViewModels/LyricsPageViewModel.cs
@@ -10,6 +10,7 @@ using CommunityToolkit.Mvvm.Input;
 using CommunityToolkit.Mvvm.Messaging;
 using CommunityToolkit.Mvvm.Messaging.Messages;
 using Microsoft.UI.Xaml;
+using System.Numerics;
 using System.Threading.Tasks;
 
 namespace BetterLyrics.WinUI3.ViewModels
@@ -62,6 +63,9 @@ namespace BetterLyrics.WinUI3.ViewModels
         //[ObservableProperty]
         //public partial int Volume { get; set; }
 
+        [ObservableProperty]
+        public partial Vector3 BottomCenterCommandGridTranslation { get; set; } = new Vector3(0, 0, 0);
+
         [ObservableProperty]
         public partial bool IsImmersiveMode { get; set; }
 
diff --git a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml
index aba274f..e7c6d1f 100644
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml
@@ -18,7 +18,7 @@
     xmlns:ui="using:CommunityToolkit.WinUI"
     mc:Ignorable="d">
 
-    <Grid x:Name="RootGrid">
+    <Grid x:Name="RootGrid" SizeChanged="RootGrid_SizeChanged">
         <!--  Lyrics area  -->
         <renderer:LyricsRenderer />
 
@@ -140,14 +140,15 @@
             <Grid
                 Padding="3"
                 HorizontalAlignment="Center"
-                Style="{StaticResource CardGridStyle}">
+                Style="{StaticResource CardGridStyle}"
+                Translation="{x:Bind ViewModel.BottomCenterCommandGridTranslation, Mode=OneWay}">
+                <Grid.TranslationTransition>
+                    <Vector3Transition />
+                </Grid.TranslationTransition>
                 <StackPanel
                     x:Name="BottomCenterCommandStackPanel"
                     Orientation="Horizontal"
                     Spacing="3">
-                    <StackPanel.OpacityTransition>
-                        <ScalarTransition />
-                    </StackPanel.OpacityTransition>
                     <Button
                         Command="{x:Bind ViewModel.PreviousSongCommand}"
                         Content="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
diff --git a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs
index b2c7f56..f40d195 100644
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs
@@ -14,7 +14,7 @@ namespace BetterLyrics.WinUI3.Views
     public sealed partial class LyricsPage : Page
     {
         private readonly ISettingsService _settingsService = Ioc.Default.GetRequiredService<ISettingsService>();
-        
+
         public LyricsPage()
         {
             this.InitializeComponent();
@@ -82,5 +82,17 @@ namespace BetterLyrics.WinUI3.Views
         {
             TranslationFlyout.ShowAt(BottomRightCommandStackPanel);
         }
+
+        private void RootGrid_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            if (e.NewSize.Width < 500)
+            {
+                ViewModel.BottomCenterCommandGridTranslation = new System.Numerics.Vector3(0, -48, 0);
+            }
+            else
+            {
+                ViewModel.BottomCenterCommandGridTranslation = new System.Numerics.Vector3(0, 0, 0);
+            }
+        }
     }
 }