Spacing issue in ColorPicker-Flyout from ColorPickerButton

Describe the bug

Hi,
In moving from Toolkit 7 to 8 I encountered the issue that the size of the Flyout on the first page is too tall. Likely because the second palette page is longer than in the 7.1 design?

I made this screen recording to show the issue:
https://github.com/CommunityToolkit/Windows/assets/471338/743fa89b-aaa3-484d-8db6-64e6eb3825a7

Steps to reproduce

Starting from an empty WinUI3 template, I added a ColorPickerButton and the CommunityToolkit.WinUI.Controls.ColorPicker nuget package.

MainWindow.xaml

xmlns:controls="using:CommunityToolkit.WinUI.Controls"
[...]
<controls:ColorPickerButton></controls:ColorPickerButton>

App6.csproj

<TargetFramework>net8.0-windows10.0.22621.0</TargetFramework>
<TargetPlatformMinVersion>10.0.17763.0</TargetPlatformMinVersion>
[...]
<ItemGroup>
  <PackageReference Include="CommunityToolkit.WinUI.Controls.ColorPicker" Version="8.1.240606-rc" />
  <PackageReference Include="Microsoft.Windows.SDK.BuildTools" Version="10.0.26100.1" />
  <PackageReference Include="Microsoft.WindowsAppSDK" Version="1.5.240607001" />
  <Manifest Include="$(ApplicationManifest)" />
</ItemGroup>

Expected behavior

The old design had two pages that where the same height.

I think the spacing of the initial page with the color spectrum can be improved, or the palette page can be condensed a bit so that both pages are of similar height.

Screenshots

See screen recording above.

Code Platform

• UWP
• WinAppSDK / WinUI 3
• Web Assembly (WASM)
• Android
• iOS
• MacOS
• Linux / GTK

Windows Build Number

• Windows 10 1809 (Build 17763)
• Windows 10 1903 (Build 18362)
• Windows 10 1909 (Build 18363)
• Windows 10 2004 (Build 19041)
• Windows 10 20H2 (Build 19042)
• Windows 10 21H1 (Build 19043)
• Windows 10 21H2 (Build 19044)
• Windows 10 22H2 (Build 19045)
• Windows 11 21H2 (Build 22000)
• Other (specify)

Other Windows Build number

No response

App minimum and target SDK version

• Windows 10, version 1809 (Build 17763)
• Windows 10, version 1903 (Build 18362)
• Windows 10, version 1909 (Build 18363)
• Windows 10, version 2004 (Build 19041)
• Windows 10, version 2104 (Build 20348)
• Windows 11, version 22H2 (Build 22000)
• Other (specify)

Other SDK version

No response

Visual Studio Version

2022

Visual Studio Build Number

VisualStudio.17.Release/17.10.3+35013.160

Device form factor

Desktop

Additional context

I did not follow the redesign of this component closely, maybe this was an intentional design change? I can see multiple ways to fix this issue.

Help us help you

No, I'm unable to contribute a solution.

MainWindow.xaml と App6.csproj で、CommunityToolkit.WinUI.Controls.ColorPicker パッケージの ColorPickerButton を使用した最小限の WinUI 3 再現から始めます。ColorPicker-Flyout の初期スペクトルページを、そのパレットページおよび旧デザインと比較します。初期ページに過度なスペースがなく、2 つのページの高さが同程度になれば完了です。