From 03b595623af9649a91ce082ce5548d0529edfec6 Mon Sep 17 00:00:00 2001
From: Norton Andreev <norton@nortonandreev.com>
Date: Fri, 23 Oct 2026 15:26:57 +0300
Subject: [PATCH] app: Give the onboarding window a title bar so its buttons
 clear the content

The steps scroll beneath a 44px title-bar row, the same height as the main window's, so close, minimize and zoom never sit over the title or body. The row's empty space drags the window, and a divider fades in under it once the page scrolls.
---
 .../Views/Onboarding/OnboardingPaneView.axaml | 23 +++++++++++++++----
 .../Onboarding/OnboardingPaneView.axaml.cs    |  2 ++
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/Capacitor.App/Views/Onboarding/OnboardingPaneView.axaml b/src/Capacitor.App/Views/Onboarding/OnboardingPaneView.axaml
index 597cc8b8c7..c2d7f2353c 100644
--- a/src/Capacitor.App/Views/Onboarding/OnboardingPaneView.axaml
+++ b/src/Capacitor.App/Views/Onboarding/OnboardingPaneView.axaml
@@ -104,11 +104,26 @@
         <Ellipse Width="900" Height="900" HorizontalAlignment="Center" VerticalAlignment="Center"
                  Fill="{StaticResource OnboardingBloomBrush}" IsHitTestVisible="False" />
 
+        <Grid RowDefinitions="44,*">
+        <!-- The title bar: close, minimize and zoom sit over its left end, and its empty space drags the
+             window. The page scrolls beneath it, never under the buttons; the rule shows once it has. -->
+        <Border x:Name="TitleBar" Background="Transparent" PointerPressed="OnChromePointerPressed">
+            <Border x:Name="TitleBarRule" Height="1" VerticalAlignment="Bottom" Opacity="0" IsHitTestVisible="False"
+                    Background="{StaticResource OnboardingDividerBrush}">
+                <Border.Transitions>
+                    <Transitions>
+                        <DoubleTransition Property="Opacity" Duration="0:0:0.14" />
+                    </Transitions>
+                </Border.Transitions>
+            </Border>
+        </Border>
+
         <!-- The footer scrolls with the page, so its actions sit below everything the step says; on a short
              step the viewport-high grid still pins it to the bottom. -->
-        <ScrollViewer x:Name="StepScroll" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled">
+        <ScrollViewer x:Name="StepScroll" Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled"
+                      ScrollChanged="OnStepScrolled">
         <Grid RowDefinitions="*,Auto" MinHeight="{Binding #StepScroll.Viewport.Height}">
-            <StackPanel MaxWidth="620" HorizontalAlignment="Stretch" Margin="32,60,32,24" Spacing="26">
+            <StackPanel MaxWidth="620" HorizontalAlignment="Stretch" Margin="32,16,32,24" Spacing="26">
                 <Grid ColumnDefinitions="*,Auto" Margin="0,0,0,-8">
                     <app:ProductWordmark HorizontalAlignment="Left" />
                     <Button Grid.Column="1" Classes="onboardingQuiet" Content="Finish later"
@@ -156,8 +171,6 @@
         </Border>
         </Grid>
         </ScrollViewer>
-
-        <!-- The pane covers the window's own drag strip. -->
-        <Border Height="40" VerticalAlignment="Top" Background="Transparent" PointerPressed="OnChromePointerPressed" />
+        </Grid>
     </Panel>
 </UserControl>
diff --git a/src/Capacitor.App/Views/Onboarding/OnboardingPaneView.axaml.cs b/src/Capacitor.App/Views/Onboarding/OnboardingPaneView.axaml.cs
index e2c21886cf..c57b67b8d7 100644
--- a/src/Capacitor.App/Views/Onboarding/OnboardingPaneView.axaml.cs
+++ b/src/Capacitor.App/Views/Onboarding/OnboardingPaneView.axaml.cs
@@ -36,5 +36,7 @@ void OnStepChanged(object? sender, PropertyChangedEventArgs e) {
         if (e.PropertyName == nameof(OnboardingViewModel.Current)) StepScroll.Offset = default;
     }
 
+    void OnStepScrolled(object? sender, ScrollChangedEventArgs e) => TitleBarRule.Opacity = StepScroll.Offset.Y > 0 ? 1 : 0;
+
     void OnChromePointerPressed(object? sender, PointerPressedEventArgs e) => WindowChrome.BeginDrag(this, e);
 }