From be9a67f57d957693c67d99d34c40147bb3aa2be3 Mon Sep 17 00:00:00 2001
From: Zhe Fang <founchoo@outlook.com>
Date: Sun, 30 Nov 2025 10:23:31 -0500
Subject: [PATCH] chores: improve layout

---
 .../AlbumArtLayoutSettingsControl.xaml        |  14 +-
 .../Controls/LyricsWindowSettingsControl.xaml |   4 -
 .../Models/LyricsWindowStatus.cs              |   2 -
 .../Models/Settings/AlbumArtLayoutSettings.cs |   2 -
 .../BetterLyrics.WinUI3/Views/LyricsPage.xaml | 165 +-----------------
 .../Views/LyricsPage.xaml.cs                  |  90 ++++++----
 6 files changed, 64 insertions(+), 213 deletions(-)

diff --git a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/AlbumArtLayoutSettingsControl.xaml b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/AlbumArtLayoutSettingsControl.xaml
index a3adeb3..8c72cb0 100644
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/AlbumArtLayoutSettingsControl.xaml
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/AlbumArtLayoutSettingsControl.xaml
@@ -16,16 +16,18 @@
             <Grid Style="{StaticResource SettingsGridStyle}">
                 <StackPanel Spacing="{StaticResource SettingsCardSpacing}">
 
-                    <TextBlock x:Uid="SettingsPageAlbumArt" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
+                    <TextBlock Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
 
                     <dev:SettingsCard x:Uid="SettingsPageAlignment" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E3;}">
-                        <ComboBox SelectedIndex="{x:Bind AlbumArtLayoutSettings.AlbumArtAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
+                        <ComboBox SelectedIndex="{x:Bind AlbumArtLayoutSettings.SongInfoAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
                             <ComboBoxItem x:Uid="SettingsPageLeft" />
                             <ComboBoxItem x:Uid="SettingsPageCenter" />
                             <ComboBoxItem x:Uid="SettingsPageRight" />
                         </ComboBox>
                     </dev:SettingsCard>
 
+                    <TextBlock x:Uid="SettingsPageAlbumArt" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
+
                     <dev:SettingsCard x:Uid="SettingsPageAlbumRadius" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xEA3A;}">
                         <local:ExtendedSlider
                             Default="12"
@@ -45,14 +47,6 @@
 
                     <TextBlock x:Uid="SettingsPageSongInfo" Style="{StaticResource SettingsSectionHeaderTextBlockStyle}" />
 
-                    <dev:SettingsCard x:Uid="SettingsPageAlignment" HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily}, Glyph=&#xE8E3;}">
-                        <ComboBox SelectedIndex="{x:Bind AlbumArtLayoutSettings.SongInfoAlignmentType, Mode=TwoWay, Converter={StaticResource EnumToIntConverter}}">
-                            <ComboBoxItem x:Uid="SettingsPageLeft" />
-                            <ComboBoxItem x:Uid="SettingsPageCenter" />
-                            <ComboBoxItem x:Uid="SettingsPageRight" />
-                        </ComboBox>
-                    </dev:SettingsCard>
-
                     <dev:SettingsExpander
                         x:Uid="SettingsPageLyricsFontSize"
                         HeaderIcon="{ui:FontIcon FontFamily={StaticResource IconFontFamily},
diff --git a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/LyricsWindowSettingsControl.xaml b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/LyricsWindowSettingsControl.xaml
index f651682..8cea761 100644
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/LyricsWindowSettingsControl.xaml
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Controls/LyricsWindowSettingsControl.xaml
@@ -404,10 +404,6 @@
                                     </dev:SettingsExpander.Items>
                                 </dev:SettingsExpander>
 
-                                <dev:SettingsCard x:Uid="SettingsPageShowLayoutDragger">
-                                    <ToggleSwitch IsOn="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.ShowLayoutIndicator, Mode=TwoWay}" />
-                                </dev:SettingsCard>
-
                             </StackPanel>
                         </Grid>
                     </ScrollViewer>
diff --git a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/LyricsWindowStatus.cs b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/LyricsWindowStatus.cs
index d1fb8ba..3f2893c 100644
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/LyricsWindowStatus.cs
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/LyricsWindowStatus.cs
@@ -42,8 +42,6 @@ namespace BetterLyrics.WinUI3.Models
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial double WindowWidth { get; set; } = 800;
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial double WindowHeight { get; set; } = 500;
 
-        [ObservableProperty][NotifyPropertyChangedRecipients] public partial bool ShowLayoutIndicator { get; set; } = false;
-
         public LyricsWindowStatus()
         {
             UpdateMonitorNameAndBounds();
diff --git a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/Settings/AlbumArtLayoutSettings.cs b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/Settings/AlbumArtLayoutSettings.cs
index 134ada4..f4db213 100644
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/Settings/AlbumArtLayoutSettings.cs
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Models/Settings/AlbumArtLayoutSettings.cs
@@ -8,7 +8,6 @@ namespace BetterLyrics.WinUI3.Models.Settings
     public partial class AlbumArtLayoutSettings : ObservableRecipient, ICloneable
     {
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial TextAlignmentType SongInfoAlignmentType { get; set; } = TextAlignmentType.Left;
-        [ObservableProperty][NotifyPropertyChangedRecipients] public partial HorizontalAlignment AlbumArtAlignmentType { get; set; } = HorizontalAlignment.Center;
         
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial int CoverImageRadius { get; set; } = 12; // 12 % of the cover image size
         [ObservableProperty][NotifyPropertyChangedRecipients] public partial int CoverImageShadowAmount { get; set; } = 12;
@@ -26,7 +25,6 @@ namespace BetterLyrics.WinUI3.Models.Settings
             return new AlbumArtLayoutSettings
             {
                 SongInfoAlignmentType = this.SongInfoAlignmentType,
-                AlbumArtAlignmentType = this.AlbumArtAlignmentType,
                 CoverImageRadius = this.CoverImageRadius,
                 CoverImageShadowAmount = this.CoverImageShadowAmount,
                 IsAutoSongInfoFontSize = this.IsAutoSongInfoFontSize,
diff --git a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml
index 5e2abf6..734628a 100644
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml
@@ -31,11 +31,9 @@
 
         <Grid x:Name="TrackSummaryGridContainer" Loaded="TrackSummaryGridContainer_Loaded">
             <Grid.RowDefinitions>
-                <RowDefinition x:Name="TopGapDef" Height="0" />
                 <RowDefinition x:Name="TrackSummaryRowDef" Height="*" />
                 <RowDefinition x:Name="MiddleGapRowDef" Height="0" />
-                <RowDefinition x:Name="LyricsRowDef" Height="4*" />
-                <RowDefinition x:Name="BottomGapDef" Height="0" />
+                <RowDefinition x:Name="LyricsRowDef" Height="2.5*" />
             </Grid.RowDefinitions>
             <Grid.ColumnDefinitions>
                 <ColumnDefinition x:Name="LeftGapDef" Width="0" />
@@ -48,7 +46,7 @@
             <!--  Album art and song info area  -->
             <Grid
                 x:Name="TrackSummaryGrid"
-                Grid.Row="1"
+                Grid.Row="0"
                 Grid.Column="1"
                 VerticalAlignment="Center"
                 SizeChanged="TrackSummaryGrid_SizeChanged">
@@ -73,7 +71,7 @@
                     x:Name="AlbumArtGrid"
                     Margin="-32"
                     Padding="32"
-                    HorizontalAlignment="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.AlbumArtLayoutSettings.AlbumArtAlignmentType, Mode=OneWay}">
+                    HorizontalAlignment="{Binding ElementName=SongInfoStackPanel, Path=HorizontalAlignment, Mode=OneWay}">
                     <Grid.OpacityTransition>
                         <ScalarTransition Duration="{x:Bind const:Time.AnimationDuration}" />
                     </Grid.OpacityTransition>
@@ -187,167 +185,12 @@
 
             <Grid
                 x:Name="LyricsPlaceholder"
-                Grid.Row="3"
+                Grid.Row="2"
                 Grid.Column="3"
                 SizeChanged="LyricsPlaceholder_SizeChanged" />
 
         </Grid>
 
-        <!--  布局因子调控指示器  -->
-        <Grid Visibility="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.ShowLayoutIndicator, Mode=OneWay, Converter={StaticResource BoolToVisibilityConverter}}">
-            <Grid.RowDefinitions>
-                <RowDefinition Height="{Binding ElementName=TopGapDef, Path=Height, Mode=OneWay}" />
-                <RowDefinition Height="{Binding ElementName=TrackSummaryRowDef, Path=Height, Mode=OneWay}" />
-                <RowDefinition Height="{Binding ElementName=MiddleGapRowDef, Path=Height, Mode=OneWay}" />
-                <RowDefinition Height="{Binding ElementName=LyricsRowDef, Path=Height, Mode=OneWay}" />
-                <RowDefinition Height="{Binding ElementName=BottomGapDef, Path=Height, Mode=OneWay}" />
-            </Grid.RowDefinitions>
-            <Grid.ColumnDefinitions>
-                <ColumnDefinition Width="{Binding ElementName=LeftGapDef, Path=Width, Mode=OneWay}" />
-                <ColumnDefinition Width="{Binding ElementName=TrackSummaryColDef, Path=Width, Mode=OneWay}" />
-                <ColumnDefinition Width="{Binding ElementName=MiddleGapColDef, Path=Width, Mode=OneWay}" />
-                <ColumnDefinition Width="{Binding ElementName=LyricsColDef, Path=Width, Mode=OneWay}" />
-                <ColumnDefinition Width="{Binding ElementName=RightGapDef, Path=Width, Mode=OneWay}" />
-            </Grid.ColumnDefinitions>
-
-            <!--  垂直布局指示器  -->
-            <Grid
-                Grid.Row="1"
-                Grid.RowSpan="3"
-                Grid.Column="1"
-                Grid.ColumnSpan="3">
-                <interactivity:Interaction.Behaviors>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="1">
-                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
-                    </interactivity:DataTriggerBehavior>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="0">
-                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
-                    </interactivity:DataTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="{Binding ElementName=TrackSummaryRowDef, Path=Height, Mode=OneWay}" />
-                    <RowDefinition Height="{Binding ElementName=MiddleGapRowDef, Path=Height, Mode=OneWay}" />
-                    <RowDefinition Height="{Binding ElementName=LyricsRowDef, Path=Height, Mode=OneWay}" />
-                </Grid.RowDefinitions>
-                <Grid
-                    Grid.Row="1"
-                    Background="{ThemeResource AccentAcrylicBackgroundFillColorDefaultBrush}"
-                    Opacity="0.5" />
-                <Grid
-                    Grid.Row="2"
-                    Background="{ThemeResource AccentAcrylicBackgroundFillColorBaseBrush}"
-                    Opacity="0.5" />
-            </Grid>
-
-            <!--  水平布局指示器  -->
-            <Grid
-                Grid.Row="1"
-                Grid.RowSpan="3"
-                Grid.Column="1"
-                Grid.ColumnSpan="3">
-                <interactivity:Interaction.Behaviors>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="0">
-                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
-                    </interactivity:DataTriggerBehavior>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="1">
-                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
-                    </interactivity:DataTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="{Binding ElementName=TrackSummaryColDef, Path=Width, Mode=OneWay}" />
-                    <ColumnDefinition Width="{Binding ElementName=MiddleGapColDef, Path=Width, Mode=OneWay}" />
-                    <ColumnDefinition Width="{Binding ElementName=LyricsColDef, Path=Width, Mode=OneWay}" />
-                </Grid.ColumnDefinitions>
-                <Grid
-                    Grid.Column="1"
-                    Background="{ThemeResource AccentAcrylicBackgroundFillColorDefaultBrush}"
-                    Opacity="0.5" />
-                <Grid
-                    Grid.Column="2"
-                    Background="{ThemeResource AccentAcrylicBackgroundFillColorBaseBrush}"
-                    Opacity="0.5" />
-            </Grid>
-
-            <!--  垂直专辑区域布局指示器  -->
-            <Grid
-                Grid.Row="1"
-                Grid.RowSpan="3"
-                Grid.Column="1">
-                <interactivity:Interaction.Behaviors>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="0">
-                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
-                    </interactivity:DataTriggerBehavior>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="1">
-                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
-                    </interactivity:DataTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-                <Grid.RowDefinitions>
-                    <RowDefinition Height="{Binding ElementName=AlbumArtRowDef, Path=Height, Mode=OneWay}" />
-                    <RowDefinition Height="{Binding ElementName=SongInfoRowDef, Path=Height, Mode=OneWay}" />
-                </Grid.RowDefinitions>
-                <Grid
-                    Grid.Row="0"
-                    Background="{ThemeResource AccentAAFillColorSecondaryBrush}"
-                    Opacity="0.5" />
-                <Grid
-                    Grid.Row="1"
-                    Background="{ThemeResource AccentAAFillColorTertiaryBrush}"
-                    Opacity="0.5" />
-            </Grid>
-
-            <!--  水平专辑区域布局指示器  -->
-            <Grid
-                Grid.Row="1"
-                Grid.Column="1"
-                Grid.ColumnSpan="3">
-                <interactivity:Interaction.Behaviors>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="1">
-                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Visible" />
-                    </interactivity:DataTriggerBehavior>
-                    <interactivity:DataTriggerBehavior
-                        Binding="{x:Bind ViewModel.LiveStates.LyricsWindowStatus.LyricsLayoutOrientation, Converter={StaticResource EnumToIntConverter}, Mode=OneWay}"
-                        ComparisonCondition="Equal"
-                        Value="0">
-                        <interactivity:ChangePropertyAction PropertyName="Visibility" Value="Collapsed" />
-                    </interactivity:DataTriggerBehavior>
-                </interactivity:Interaction.Behaviors>
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="{Binding ElementName=AlbumArtColDef, Path=Width, Mode=OneWay}" />
-                    <ColumnDefinition Width="{Binding ElementName=SongInfoColDef, Path=Width, Mode=OneWay}" />
-                </Grid.ColumnDefinitions>
-                <Grid
-                    Grid.Column="0"
-                    Background="{ThemeResource AccentAAFillColorSecondaryBrush}"
-                    Opacity="0.5" />
-                <Grid
-                    Grid.Column="1"
-                    Background="{ThemeResource AccentAAFillColorTertiaryBrush}"
-                    Opacity="0.5" />
-            </Grid>
-
-        </Grid>
-
         <!--  Bottom command area  -->
         <Grid
             x:Name="BottomCommandGrid"
diff --git a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs
index 27054e6..677384d 100644
--- a/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs
+++ b/BetterLyrics.WinUI3/BetterLyrics.WinUI3/Views/LyricsPage.xaml.cs
@@ -21,6 +21,7 @@ using Microsoft.UI.Xaml.Media.Imaging;
 using System;
 using System.Numerics;
 using System.Threading.Tasks;
+using System.Windows.Media.Media3D;
 
 namespace BetterLyrics.WinUI3.Views
 {
@@ -235,8 +236,8 @@ namespace BetterLyrics.WinUI3.Views
                     Grid.SetColumnSpan(SongInfoStackPanel, 3);
                     break;
                 case LyricsLayoutOrientation.Vertical:
-                    Grid.SetRow(SongInfoStackPanel, 0);
-                    Grid.SetRowSpan(SongInfoStackPanel, 5);
+                    Grid.SetRow(SongInfoStackPanel, 1);
+                    Grid.SetRowSpan(SongInfoStackPanel, 3);
                     Grid.SetColumn(SongInfoStackPanel, 2);
                     Grid.SetColumnSpan(SongInfoStackPanel, 1);
                     break;
@@ -259,8 +260,8 @@ namespace BetterLyrics.WinUI3.Views
                     Grid.SetColumnSpan(AlbumArtGrid, 3);
                     break;
                 case LyricsLayoutOrientation.Vertical:
-                    Grid.SetRow(AlbumArtGrid, 0);
-                    Grid.SetRowSpan(AlbumArtGrid, 5);
+                    Grid.SetRow(AlbumArtGrid, 1);
+                    Grid.SetRowSpan(AlbumArtGrid, 3);
                     Grid.SetColumn(AlbumArtGrid, 0);
                     Grid.SetColumnSpan(AlbumArtGrid, 1);
                     break;
@@ -296,7 +297,7 @@ namespace BetterLyrics.WinUI3.Views
                     break;
                 case LyricsDisplayType.LyricsOnly:
                     NowPlayingCanvas.LyricsStartX = LeftGapDef.ActualWidth;
-                    NowPlayingCanvas.LyricsStartY = TopGapDef.ActualHeight;
+                    NowPlayingCanvas.LyricsStartY = 0;
                     NowPlayingCanvas.LyricsWidth = TrackSummaryColDef.ActualWidth + MiddleGapColDef.ActualWidth + LyricsColDef.ActualWidth;
                     NowPlayingCanvas.LyricsHeight = TrackSummaryRowDef.ActualHeight + MiddleGapRowDef.ActualHeight + LyricsRowDef.ActualHeight;
                     break;
@@ -305,13 +306,13 @@ namespace BetterLyrics.WinUI3.Views
                     {
                         case LyricsLayoutOrientation.Horizontal:
                             NowPlayingCanvas.LyricsStartX = LeftGapDef.ActualWidth + TrackSummaryColDef.ActualWidth + MiddleGapColDef.ActualWidth;
-                            NowPlayingCanvas.LyricsStartY = TopGapDef.ActualHeight;
+                            NowPlayingCanvas.LyricsStartY = 0;
                             NowPlayingCanvas.LyricsWidth = LyricsColDef.ActualWidth;
                             NowPlayingCanvas.LyricsHeight = TrackSummaryRowDef.ActualHeight + MiddleGapRowDef.ActualHeight + LyricsRowDef.ActualHeight;
                             break;
                         case LyricsLayoutOrientation.Vertical:
                             NowPlayingCanvas.LyricsStartX = LeftGapDef.ActualWidth;
-                            NowPlayingCanvas.LyricsStartY = TopGapDef.ActualHeight + TrackSummaryRowDef.ActualHeight + MiddleGapRowDef.ActualHeight;
+                            NowPlayingCanvas.LyricsStartY = TrackSummaryRowDef.ActualHeight + MiddleGapRowDef.ActualHeight;
                             NowPlayingCanvas.LyricsWidth = TrackSummaryColDef.ActualWidth + MiddleGapColDef.ActualWidth + LyricsColDef.ActualWidth;
                             NowPlayingCanvas.LyricsHeight = LyricsRowDef.ActualHeight;
                             break;
@@ -326,31 +327,12 @@ namespace BetterLyrics.WinUI3.Views
 
         // ====
 
-        private void OnLayoutChanged()
+        private void UpdateGap()
         {
-            UpdateSongInfoOpacity();
+            var status = _liveStatesService.LiveStates.LyricsWindowStatus;
 
-            UpdateAlbumArtShadow();
-            UpdateAlbumArtOpacity();
-
-            UpdateTrackSummaryGridSpan();
-
-            UpdateAlbumArtGridSpan();
-
-            UpdateSongInfoStackPanelSpan();
-
-            UpdateLyricsOpacity();
-            UpdateLyricsLayout();
-
-            UpdateAlbumArtCornerRadius();
-        }
-
-        // ====
-
-        private void RootGrid_SizeChanged(object sender, SizeChangedEventArgs e)
-        {
-            var width = e.NewSize.Width;
-            var height = e.NewSize.Height;
+            double height = RootGrid.ActualHeight;
+            double width = RootGrid.ActualWidth;
 
             double xMargin = 0;
             double yMargin = 0;
@@ -375,14 +357,54 @@ namespace BetterLyrics.WinUI3.Views
                 gapBetweenAlbumArtAndSongInfo = GetTitleFontSize() / 2;
             }
 
-            xMargin = Math.Max(16, width * 0.1);
-            yMargin = Math.Max(16, height * 0.15);
+            switch (status.LyricsLayoutOrientation)
+            {
+                case LyricsLayoutOrientation.Horizontal:
+                    xMargin = Math.Max(16, Math.Min(width, height) * 0.3);
+                    yMargin = Math.Max(16, Math.Min(width, height) * 0.15);
+                    break;
+                case LyricsLayoutOrientation.Vertical:
+                    xMargin = Math.Max(16, Math.Min(width, height) * 0.05);
+                    yMargin = xMargin;
+                    break;
+                default:
+                    break;
+            }
 
-            LeftGapDef.Width = RightGapDef.Width = new(xMargin);
             MiddleGapColDef.Width = new(middleGapCol);
 
             TrackSummaryGridRow0.Height = TrackSummaryGridRow4.Height = new(yMargin);
-            TrackSummaryGridRow2.Height = new(gapBetweenAlbumArtAndSongInfo);
+            LeftGapDef.Width = RightGapDef.Width = new(xMargin);
+            TrackSummaryGridCol1.Width = TrackSummaryGridRow2.Height = new(gapBetweenAlbumArtAndSongInfo);
+        }
+
+        private void OnLayoutChanged()
+        {
+            UpdateSongInfoOpacity();
+
+            UpdateAlbumArtShadow();
+            UpdateAlbumArtOpacity();
+
+            UpdateTrackSummaryGridSpan();
+
+            UpdateAlbumArtGridSpan();
+
+            UpdateSongInfoStackPanelSpan();
+
+            UpdateLyricsOpacity();
+            UpdateLyricsLayout();
+
+            UpdateAlbumArtCornerRadius();
+
+            UpdateGap();
+        }
+
+        // ====
+
+        private void RootGrid_SizeChanged(object sender, SizeChangedEventArgs e)
+        {
+            var width = e.NewSize.Width;
+            var height = e.NewSize.Height;
 
             RenderSongInfo();
             OnLayoutChanged();