[dev-v5] Fix AppBar popover background color issue (#4448)

vnbaaij · web-flow · commit 09c98e12d2b4 · 2026-01-08T12:20:19.000+01:00
* Fix AppBar popover background color issue

* Use auto instead of scroll

* Add missing space

* Use a class for styling the AppBar popover
diff --git a/src/Core/Components/AppBar/FluentAppBar.razor b/src/Core/Components/AppBar/FluentAppBar.razor
@@ -39,7 +39,7 @@
 						   OffsetVertical="-48"
 						   OffsetHorizontal="68">
 				<ChildContent>
-					<div style="width: 320px; height: 200px; padding: 1rem;">
+					<div class="fluent-appbar-popover">
 						@if (PopoverShowSearch)
 						{
 							<FluentTextInput @bind-Value="@_searchTerm"
@@ -55,7 +55,7 @@
 								</StartTemplate>
 							</FluentTextInput>
 						}
-						<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3" Style="margin-top: 2px">
+						<FluentGrid Justify="JustifyContent.FlexStart" Spacing="3" Style="margin-top: 2px; background-color: inherit;">
 							@foreach (var item in _searchResults)
 							{
 								<FluentGridItem xs="4" Style="width: 100px; height: 85px; display: flex; height: 85px; align-content: center; flex-wrap: wrap; justify-content: center;">
diff --git a/src/Core/Components/AppBar/FluentAppBar.razor.css b/src/Core/Components/AppBar/FluentAppBar.razor.css
@@ -2,7 +2,11 @@
   --appbar-item-size: 68;
   background-color: var(--colorNeutralBackground2);
 }
-  .fluent-appbar fluent-popover-b > div {
+  .fluent-appbar fluent-popover-b .fluent-appbar-popover {
+    width: 320px;
+    height: 200px;
+    padding: 1rem;
+    overflow: auto;
     background-color: var(--colorNeutralBackground2);
   }
 

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	`OffsetVertical="-48"`
`40`	`40`	`OffsetHorizontal="68">`
`41`	`41`	`<ChildContent>`
`42`		`- <div style="width: 320px; height: 200px; padding: 1rem;">`
	`42`	`+ <div class="fluent-appbar-popover">`
`43`	`43`	`@if (PopoverShowSearch)`
`44`	`44`	`{`
`45`	`45`	`<FluentTextInput @bind-Value="@_searchTerm"`
`@@ -55,7 +55,7 @@`
`55`	`55`	`</StartTemplate>`
`56`	`56`	`</FluentTextInput>`
`57`	`57`	`}`
`58`		`- <FluentGrid Justify="JustifyContent.FlexStart" Spacing="3" Style="margin-top: 2px">`
	`58`	`+ <FluentGrid Justify="JustifyContent.FlexStart" Spacing="3" Style="margin-top: 2px; background-color: inherit;">`
`59`	`59`	`@foreach (var item in _searchResults)`
`60`	`60`	`{`
`61`	`61`	`<FluentGridItem xs="4" Style="width: 100px; height: 85px; display: flex; height: 85px; align-content: center; flex-wrap: wrap; justify-content: center;">`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,11 @@`
`2`	`2`	`--appbar-item-size: 68;`
`3`	`3`	`background-color: var(--colorNeutralBackground2);`
`4`	`4`	`}`
`5`		`- .fluent-appbar fluent-popover-b > div {`
	`5`	`+ .fluent-appbar fluent-popover-b .fluent-appbar-popover {`
	`6`	`+ width: 320px;`
	`7`	`+ height: 200px;`
	`8`	`+ padding: 1rem;`
	`9`	`+ overflow: auto;`
`6`	`10`	`background-color: var(--colorNeutralBackground2);`
`7`	`11`	`}`
`8`	`12`