Fix TabItem height issue

src/Avalonia.Themes.Fluent/TabItem.xaml

@@ -9,7 +9,9 @@
     </Border>
   </Design.PreviewWith>
   <Styles.Resources>
-    <x:Double x:Key="TabItemHeight">48</x:Double>
+    <x:Double x:Key="TabItemMinHeight">48</x:Double>
+    <x:Double x:Key="TabItemVerticalPipeHeight">24</x:Double>
+    <x:Double x:Key="TabItemPipeThickness">2</x:Double>
   </Styles.Resources>
 
   <Style Selector="TabItem">
@@ -19,7 +21,7 @@
     <Setter Property="Foreground" Value="{DynamicResource PivotHeaderItemForegroundUnselected}" />
     <Setter Property="Padding" Value="{DynamicResource PivotHeaderItemMargin}" />
     <Setter Property="Margin" Value="0" />
-    <Setter Property="Height" Value="{DynamicResource TabItemHeight}" />
+    <Setter Property="MinHeight" Value="{DynamicResource TabItemMinHeight}" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
@@ -95,27 +97,29 @@
 
   <!-- TabStripPlacement States Group -->
   <Style Selector="TabItem[TabStripPlacement=Left] /template/ Border#PART_SelectedPipe">
-    <Setter Property="Width" Value="2" />
-    <Setter Property="Margin" Value="0,12,2,12" />
+    <Setter Property="Width" Value="{StaticResource TabItemPipeThickness}" />
+    <Setter Property="Height" Value="{StaticResource TabItemVerticalPipeHeight}" />
+    <Setter Property="Margin" Value="0,0,2,0" />
     <Setter Property="HorizontalAlignment" Value="Left" />
-    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="VerticalAlignment" Value="Center" />
   </Style>
   <Style Selector="TabItem[TabStripPlacement=Left] /template/ ContentPresenter#PART_ContentPresenter">
     <Setter Property="Margin" Value="8,0,0,0" />
   </Style>
 
   <Style Selector="TabItem[TabStripPlacement=Top] /template/ Border#PART_SelectedPipe, TabItem[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
-    <Setter Property="Height" Value="2" />
+    <Setter Property="Height" Value="{StaticResource TabItemPipeThickness}" />
     <Setter Property="Margin" Value="0,0,0,2" />
     <Setter Property="HorizontalAlignment" Value="Stretch" />
     <Setter Property="VerticalAlignment" Value="Bottom" />
   </Style>
 
   <Style Selector="TabItem[TabStripPlacement=Right] /template/ Border#PART_SelectedPipe">
-    <Setter Property="Width" Value="2" />
-    <Setter Property="Margin" Value="2,12,0,12" />
+    <Setter Property="Width" Value="{StaticResource TabItemPipeThickness}" />
+    <Setter Property="Height" Value="{StaticResource TabItemVerticalPipeHeight}" />
+    <Setter Property="Margin" Value="2,0,0,0" />
     <Setter Property="HorizontalAlignment" Value="Right" />
-    <Setter Property="VerticalAlignment" Value="Stretch" />
+    <Setter Property="VerticalAlignment" Value="Center" />
   </Style>
   <Style Selector="TabItem[TabStripPlacement=Right] /template/ ContentPresenter#PART_ContentPresenter">
     <Setter Property="Margin" Value="0,0,8,0" />

src/Avalonia.Themes.Fluent/TabStripItem.xaml

@@ -9,7 +9,8 @@
     </Border>
   </Design.PreviewWith>
   <Styles.Resources>
-    <x:Double x:Key="TabStripItemHeight">48</x:Double>
+    <x:Double x:Key="TabStripItemMinHeight">48</x:Double>
+    <x:Double x:Key="TabStripItemPipeThickness">2</x:Double>
   </Styles.Resources>
 
   <Style Selector="TabStripItem">
@@ -19,7 +20,7 @@
     <Setter Property="Foreground" Value="{DynamicResource PivotHeaderItemForegroundUnselected}" />
     <Setter Property="Padding" Value="{DynamicResource PivotHeaderItemMargin}" />
     <Setter Property="Margin" Value="0" />
-    <Setter Property="Height" Value="{DynamicResource TabStripItemHeight}" />
+    <Setter Property="MinHeight" Value="{DynamicResource TabStripItemMinHeight}" />
     <Setter Property="VerticalContentAlignment" Value="Center" />
     <Setter Property="Template">
       <ControlTemplate>
@@ -37,10 +38,6 @@
                               TextBlock.FontSize="{TemplateBinding FontSize}"
                               TextBlock.FontWeight="{TemplateBinding FontWeight}" />
             <Border Name="PART_SelectedPipe"
-                    Height="2"
-                    Margin="0,0,0,2"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Bottom"
                     CornerRadius="{DynamicResource ControlCornerRadius}"
                     Background="{DynamicResource PivotHeaderItemSelectedPipeFill}" />
           </Panel>
@@ -57,6 +54,12 @@
   <Style Selector="TabStripItem /template/ Border#PART_SelectedPipe">
     <Setter Property="IsVisible" Value="False" />
   </Style>
+  <Style Selector="TabStripItem /template/ Border#PART_SelectedPipe, TabItem[TabStripPlacement=Bottom] /template/ Border#PART_SelectedPipe">
+    <Setter Property="Height" Value="{StaticResource TabStripItemPipeThickness}" />
+    <Setter Property="Margin" Value="0,0,0,2" />
+    <Setter Property="HorizontalAlignment" Value="Stretch" />
+    <Setter Property="VerticalAlignment" Value="Bottom" />
+  </Style>
 
   <!--  Selected state  -->
   <!--  We don't use selector to PART_LayoutRoot, so developer can override selected item background with TabStripItem.Background  -->