Fix search bar overflowing behind icon buttons at narrow window sizes (#4831)

* fix(search): make search bar stretch instead of overflowing at narrow window sizes

* fix(ui): sync runtime MinWidth override with XAML value

Add_Loaded was hardcoding $sync.Form.MinWidth back to 1000 after
load, overriding the 1150 set in inputXML.xaml and letting the
window shrink below the space the search bar/toolbar layout needs.

* fix(ui): address responsive search review feedback

* fix(ui): enforce usable toolbar width

---------

Co-authored-by: Chris Titus <contact@christitus.com>

pester/xaml.Tests.ps1

@@ -135,6 +135,7 @@ Describe "XAML document" {
             "WPFTab4BT",
             "WPFTab5BT",
             "SearchBar",
+            "SearchBarIcon",
             "SearchBarClearButton",
             "appscategory",
             "appspanel",
@@ -271,6 +272,32 @@ Describe "XAML document" {
         }
     }
 
+    It "keeps the responsive search controls within the available screen width" {
+        $window = $script:xaml.DocumentElement
+        $searchBar = $script:xaml.SelectSingleNode('//*[local-name()="TextBox"][@Name="SearchBar"]')
+        $searchBorder = $searchBar.ParentNode.ParentNode
+        $mainScript = Get-Content -Path $script:mainScriptPath -Raw
+
+        $window.GetAttribute("MinWidth") | Should -Be "800"
+        $searchBorder.GetAttribute("Width") | Should -BeNullOrEmpty
+        $searchBorder.GetAttribute("HorizontalAlignment") | Should -Be "Stretch"
+        $searchBar.GetAttribute("Width") | Should -BeNullOrEmpty
+        $searchBar.GetAttribute("HorizontalAlignment") | Should -Be "Stretch"
+        $mainScript | Should -Match '\$sync\.Form\.MinWidth = "1150"'
+        $mainScript | Should -Match '\$sync\.Form\.MinWidth = \[Math\]::Min\(\[double\]\$sync\.Form\.MinWidth, \[double\]\$screenWidth\)'
+    }
+
+    It "shows only one search action glyph at a time" {
+        $searchIcon = $script:xaml.SelectSingleNode('//*[local-name()="TextBlock"][@Name="SearchBarIcon"]')
+        $clearButton = $script:xaml.SelectSingleNode('//*[local-name()="Button"][@Name="SearchBarClearButton"]')
+        $mainScript = Get-Content -Path $script:mainScriptPath -Raw
+
+        $searchIcon | Should -Not -BeNullOrEmpty
+        $clearButton | Should -Not -BeNullOrEmpty
+        $mainScript | Should -Match '\$sync\.SearchBarClearButton\.Visibility = "Visible"\s+\$sync\.SearchBarIcon\.Visibility = "Collapsed"'
+        $mainScript | Should -Match '\$sync\.SearchBarClearButton\.Visibility = "Collapsed"\s+\$sync\.SearchBarIcon\.Visibility = "Visible"'
+    }
+
     It "scopes toggle button styles without leaking into combo boxes" {
         $resources = $script:xaml.SelectSingleNode('//*[local-name()="Window.Resources"]')
         $implicitToggleStyles = @($resources.SelectNodes('./*[local-name()="Style"][@TargetType="ToggleButton" or @TargetType="{x:Type ToggleButton}"][not(@x:Key)]', $script:xamlNamespace))

scripts/main.ps1

@@ -285,6 +285,7 @@ $sync["Form"].Add_ContentRendered({
         # Extract screen width and height for the primary monitor
         $screenWidth = $primaryScreen.Bounds.Width
         $screenHeight = $primaryScreen.Bounds.Height
+        $sync.Form.MinWidth = [Math]::Min([double]$sync.Form.MinWidth, [double]$screenWidth)
 
         # Compare with the primary monitor size
         if ($sync.Form.ActualWidth -gt $screenWidth -or $sync.Form.ActualHeight -gt $screenHeight) {
@@ -353,8 +354,10 @@ $searchBarTimer.add_Tick({
 $sync["SearchBar"].Add_TextChanged({
     if ($sync.SearchBar.Text -ne "") {
         $sync.SearchBarClearButton.Visibility = "Visible"
+        $sync.SearchBarIcon.Visibility = "Collapsed"
     } else {
         $sync.SearchBarClearButton.Visibility = "Collapsed"
+        $sync.SearchBarIcon.Visibility = "Visible"
     }
     if ($searchBarTimer.IsEnabled) {
         $searchBarTimer.Stop()
@@ -365,7 +368,7 @@ $sync["SearchBar"].Add_TextChanged({
 $sync["Form"].Add_Loaded({
     param($e)
     $null = $e
-    $sync.Form.MinWidth = "1000"
+    $sync.Form.MinWidth = "1150"
     $sync["Form"].MaxWidth = [Double]::PositiveInfinity
     $sync["Form"].MaxHeight = [Double]::PositiveInfinity
 })

xaml/inputXML.xaml

@@ -1039,13 +1039,12 @@
                     <ColumnDefinition Width="Auto"/><!-- Buttons area -->
                 </Grid.ColumnDefinitions>
 
-                <Border Grid.Column="0" Margin="5,0,0,0" Width="{DynamicResource SearchBarWidth}" Height="{DynamicResource SearchBarHeight}" VerticalAlignment="Center" HorizontalAlignment="Left">
+                <Border Grid.Column="0" Margin="5,0,10,0" MinWidth="120" Height="{DynamicResource SearchBarHeight}" VerticalAlignment="Center" HorizontalAlignment="Stretch">
                     <Grid>
                         <TextBox
-                            Width="{DynamicResource SearchBarWidth}"
                             Height="{DynamicResource SearchBarHeight}"
                             FontSize="{DynamicResource SearchBarTextBoxFontSize}"
-                            VerticalAlignment="Center" HorizontalAlignment="Left"
+                            VerticalAlignment="Center" HorizontalAlignment="Stretch"
                             BorderThickness="1"
                             Name="SearchBar"
                             Foreground="{DynamicResource MainForegroundColor}" Background="{DynamicResource MainBackgroundColor}"
@@ -1053,6 +1052,7 @@
                             ToolTip="Press Ctrl-F and type app name to filter application list below. Press Esc to reset the filter">
                         </TextBox>
                         <TextBlock
+                            Name="SearchBarIcon"
                             VerticalAlignment="Center" HorizontalAlignment="Right"
                             FontFamily="Segoe MDL2 Assets"
                             Foreground="{DynamicResource ButtonBackgroundSelectedColor}"
@@ -1062,10 +1062,10 @@
                     </Grid>
                 </Border>
                 <Button Grid.Column="0"
-                    VerticalAlignment="Center" HorizontalAlignment="Left"
+                    VerticalAlignment="Center" HorizontalAlignment="Right"
                     Name="SearchBarClearButton"
                     Style="{StaticResource SearchBarClearButtonStyle}"
-                    Margin="213,0,0,0" Visibility="Collapsed">
+                    Margin="0,0,20,0" Visibility="Collapsed">
                 </Button>
 
                 <!-- Buttons Container -->