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>
This commit is contained in:
Yayo Razo
2026-07-15 20:41:41 -05:00
committed by GitHub
co-authored by Chris Titus
parent 11783c75a8
commit 975616b58f
3 changed files with 36 additions and 6 deletions
+27
View File
@@ -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))
+4 -1
View File
@@ -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
})
+5 -5
View File
@@ -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 -->