From 2077a8f7a9e3909c802a3103331ceea99fe24763 Mon Sep 17 00:00:00 2001
From: AL <26797547+Al12rs@users.noreply.github.com>
Date: Wed, 25 Sep 2024 13:43:57 +0200
Subject: [PATCH] Various FlexPanel related layout fixes

---
 .../Collections/CollectionCardView.axaml      |  4 +-
 .../CollectionCardStyles.axaml                | 47 ++++++++++---------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/NexusMods.App.UI/Pages/LibraryPage/Collections/CollectionCardView.axaml b/src/NexusMods.App.UI/Pages/LibraryPage/Collections/CollectionCardView.axaml
index c27f98567d..8a0d157560 100644
--- a/src/NexusMods.App.UI/Pages/LibraryPage/Collections/CollectionCardView.axaml
+++ b/src/NexusMods.App.UI/Pages/LibraryPage/Collections/CollectionCardView.axaml
@@ -28,9 +28,9 @@
                         <Border x:Name="CategoryTextBorder">
                             <TextBlock x:Name="CategoryText" />
                         </Border>
-                        <panels:FlexPanel x:Name="SummaryTextFlexPanel">
+                        <Border x:Name="SummaryTextFlexPanel">
                             <TextBlock x:Name="SummaryText" />
-                        </panels:FlexPanel>
+                        </Border>
                     </panels:FlexPanel>
 
                 </panels:FlexPanel>
diff --git a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionCards/CollectionCardStyles.axaml b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionCards/CollectionCardStyles.axaml
index f81bb93feb..2d32f2af4b 100644
--- a/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionCards/CollectionCardStyles.axaml
+++ b/src/Themes/NexusMods.Themes.NexusFluentDark/Styles/UserControls/CollectionCards/CollectionCardStyles.axaml
@@ -42,14 +42,14 @@
 
                 <Style Selector="^ panels|FlexPanel#Container">
                     <Setter Property="AlignItems" Value="FlexStart" />
-                    <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
                     <Setter Property="Direction" Value="Row" />
 
                     <!-- left column -->
                     <Style Selector="^ Border#TileImageBorder">
+                        <Setter Property="panels:Flex.Shrink" Value="0" />
                         <Setter Property="CornerRadius" Value="{StaticResource Rounded}" />
                         <Setter Property="ClipToBounds" Value="True" />
-                        <!-- NOTE(insomnious): not sure if we fixed sizes on both elements, but figma does -->
+                        <!-- NOTE(insomnious): not sure if we need fixed sizes on both elements, but figma does -->
                         <Setter Property="Width" Value="144" />
                         <Setter Property="Height" Value="180" />
                         <Style Selector="^ Image#TileImage">
@@ -60,13 +60,13 @@
 
                     <!-- right column -->
                     <Style Selector="^ panels|FlexPanel#TitleContainer">
-
                         <!-- <Setter Property="Background" Value="DarkBlue" /> -->
                         <Setter Property="Direction" Value="Column" />
-                        <Setter Property="AlignItems" Value="Stretch" />
-                        <Setter Property="panels:Flex.Grow" Value="1" />
-                        <Setter Property="panels:Flex.Shrink" Value="0" />
-                        <Setter Property="panels:Flex.Basis" Value="0" />
+
+                        <!-- Fixed sizes for child elements -->
+                        <Style Selector="^ > :is(Control)">
+                            <Setter Property="panels:Flex.Shrink" Value="0" />
+                        </Style>
 
                         <Style Selector="^ TextBlock#TitleText">
                             <Setter Property="Theme" Value="{StaticResource BodyLGBoldTheme}" />
@@ -92,17 +92,15 @@
                             </Style>
                         </Style>
 
-                        <!-- NOTE(insomnious): We shouldn't need this FlexPanel wrapper as we should be able to set 
-                        Flex.??? directly on the TextBlock and achieve the desired outcome. @Al12rs will look into it
-                        at a later date but this is working for now -->
-                        <Style Selector="^ panels|FlexPanel#SummaryTextFlexPanel">
+                        <Style Selector="^ Border#SummaryTextFlexPanel">
+                            <!-- <Setter Property="Background" Value="Red" /> -->
                             <Setter Property="panels:Flex.Grow" Value="1" />
-                            <Setter Property="panels:Flex.Shrink" Value="0" />
-                            <Setter Property="panels:Flex.Basis" Value="0" />
-                            <Setter Property="panels:Flex.AlignSelf" Value="FlexStart" />
+                            <Setter Property="panels:Flex.Shrink" Value="1" />
 
                             <Style Selector="^ TextBlock#SummaryText">
                                 <!-- <Setter Property="Background" Value="DarkBlue" /> -->
+                                <Setter Property="HorizontalAlignment" Value="Stretch" />
+                                <Setter Property="VerticalAlignment" Value="Stretch" />
                                 <Setter Property="Padding" Value="12, 4, 0, 0" />
                                 <Setter Property="Theme" Value="{StaticResource BodyMDNormalTheme}" />
                                 <Setter Property="TextWrapping" Value="Wrap" />
@@ -120,6 +118,7 @@
 
         <!-- middle row -->
         <Style Selector="^ Border#StatsBorder">
+            <Setter Property="panels:Flex.Shrink" Value="0" />
             <Setter Property="Height" Value="44" />
             <Setter Property="Padding" Value="12" />
 
@@ -159,23 +158,23 @@
 
         <!-- bottom row -->
         <Style Selector="^ Border#ActionFooterBorder">
+            <Setter Property="panels:Flex.Shrink" Value="0" />
+
             <Setter Property="Padding" Value="12" />
             <Setter Property="BorderBrush" Value="{StaticResource StrokeTranslucentWeakBrush}" />
             <Setter Property="BorderThickness" Value="0, 1, 0, 0" />
 
             <Style Selector="^ panels|FlexPanel#ActionFooter">
-                <Setter Property="AlignItems" Value="Center" />
-                <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
+                <Setter Property="AlignItems" Value="Stretch" />
                 <Setter Property="JustifyContent" Value="FlexEnd" />
                 <Setter Property="ColumnSpacing" Value="16" />
 
                 <Style Selector="^ panels|FlexPanel#ActionGroup">
                     <!-- <Setter Property="Background" Value="Red"/> -->
-                    <Setter Property="AlignItems" Value="Center" />
-                    <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
                     <Setter Property="panels:Flex.Grow" Value="1" />
                     <Setter Property="panels:Flex.Shrink" Value="0" />
-                    <Setter Property="panels:Flex.Basis" Value="0" />
+                    <Setter Property="panels:Flex.Basis" Value="0%" />
+                    <Setter Property="AlignItems" Value="Center" />
                     <Setter Property="ColumnSpacing" Value="8" />
 
                     <Style Selector="^ > Button">
@@ -188,13 +187,13 @@
                 <Style Selector="^ panels|FlexPanel#FooterLabels">
                     <Setter Property="panels:Flex.Grow" Value="1" />
                     <Setter Property="panels:Flex.Shrink" Value="0" />
-                    <Setter Property="panels:Flex.Basis" Value="0" />
-                    <Setter Property="AlignItems" Value="Center" />
-                    <Setter Property="panels:Flex.AlignSelf" Value="Stretch" />
+                    <Setter Property="panels:Flex.Basis" Value="0%" />
                     <Setter Property="JustifyContent" Value="FlexEnd" />
+                    <Setter Property="AlignItems" Value="Center" />
                     <Setter Property="ColumnSpacing" Value="8" />
 
                     <Style Selector="^ panels|FlexPanel#UserLabel">
+                        <Setter Property="JustifyContent" Value="FlexEnd" />
                         <Setter Property="ColumnSpacing" Value="4" />
 
                         <Style Selector="^ Border#AvatarImageBorder">
@@ -208,9 +207,13 @@
                         <Style Selector="^ TextBlock#AuthorName">
                             <Setter Property="Foreground" Value="{StaticResource NeutralModerateBrush}" />
                             <Setter Property="Theme" Value="{StaticResource BodySMNormalTheme}" />
+                            <Setter Property="TextTrimming" Value="CharacterEllipsis" />
                         </Style>
                     </Style>
 
+                    <Style Selector="^ panels|FlexPanel#UserLabel">
+                    </Style>
+
                 </Style>
             </Style>
         </Style>