fix(postit): restore Markdown editor and preview scrolling

Constrain the blog page layout, separate list and article scrolling, and remove content height limits and nested editor scrolling. Add six headless regression cases and update the changelog and layout documentation.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/PostIt/PostIt.Tests/MarkdownEditorScrollTests.cs

@@ -0,0 +1,143 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Headless.XUnit;
+using Avalonia.LogicalTree;
+using Avalonia.Threading;
+using Avalonia.VisualTree;
+using AvaloniaEdit;
+using PostIt.Controls;
+using PostIt.Views.Blogs;
+
+namespace PostIt.Tests;
+
+public class MarkdownEditorScrollTests
+{
+    private static readonly string LongArticle =
+        string.Join("\n\n", Enumerable.Range(1, 100).Select(i => $"Paragraph {i}: article content."));
+
+    [AvaloniaTheory]
+    [InlineData(false)]
+    [InlineData(true)]
+    public void Long_article_scrolls_to_the_end_and_adapts_to_resizing(bool preview)
+    {
+        var editor = new MarkdownEditorControl
+        {
+            MarkdownText = LongArticle,
+            IsPreviewVisible = preview
+        };
+        var window = new Window { Width = 600, Height = 400, Content = editor };
+        try
+        {
+            window.Show();
+            Dispatcher.UIThread.RunJobs();
+            window.UpdateLayout();
+
+            var scroller = FindArticleScroller(editor, preview);
+            AssertScrollable(scroller);
+            var initialViewport = scroller.Viewport.Height;
+
+            window.Height = 300;
+            Dispatcher.UIThread.RunJobs();
+            window.UpdateLayout();
+
+            Assert.True(scroller.Viewport.Height < initialViewport);
+            AssertScrollable(scroller);
+        }
+        finally
+        {
+            CloseWindow(window, editor);
+        }
+    }
+
+    [AvaloniaTheory]
+    [InlineData(false)]
+    [InlineData(true)]
+    public void Blog_page_bounds_the_article_viewport(bool preview)
+    {
+        var page = new BlogsPage();
+        var editor = page.GetLogicalDescendants().OfType<MarkdownEditorControl>().Single();
+        editor.MarkdownText = LongArticle;
+        editor.IsPreviewVisible = preview;
+        var posts = page.FindControl<ListBox>("PostsListBox")!;
+        posts.ItemsSource = Enumerable.Range(1, 50)
+            .Select(i => new Yavsc.Blogspot.BlogPostDto { Title = $"Post {i}" }).ToArray();
+        var navigation = new NavigationPage();
+        navigation.PushAsync(page).GetAwaiter().GetResult();
+        var window = new Window { Width = 800, Height = 700, Content = navigation };
+        try
+        {
+            window.Show();
+            Dispatcher.UIThread.RunJobs();
+            window.UpdateLayout();
+
+            var scroller = FindArticleScroller(editor, preview);
+            Assert.InRange(scroller.Viewport.Height, 1, window.ClientSize.Height);
+            AssertScrollable(scroller);
+            AssertScrollable(posts.GetVisualDescendants().OfType<ScrollViewer>().Single());
+            var editorBottom = editor.TranslatePoint(new Point(0, editor.Bounds.Height), window);
+            Assert.NotNull(editorBottom);
+            Assert.InRange(editorBottom.Value.Y, 1, window.ClientSize.Height);
+        }
+        finally
+        {
+            CloseWindow(window, editor);
+        }
+    }
+
+    [AvaloniaTheory]
+    [InlineData(false)]
+    [InlineData(true)]
+    public void Short_article_needs_no_vertical_scrollbar(bool preview)
+    {
+        var editor = new MarkdownEditorControl
+        {
+            MarkdownText = "Short article",
+            IsPreviewVisible = preview
+        };
+        var window = new Window { Width = 600, Height = 400, Content = editor };
+        try
+        {
+            window.Show();
+            Dispatcher.UIThread.RunJobs();
+            window.UpdateLayout();
+
+            var scroller = FindArticleScroller(editor, preview);
+            Assert.True(scroller.Extent.Height <= scroller.Viewport.Height);
+            Assert.DoesNotContain(scroller.GetVisualDescendants().OfType<ScrollBar>(),
+                bar => bar.Orientation == Avalonia.Layout.Orientation.Vertical && bar.IsVisible);
+        }
+        finally
+        {
+            CloseWindow(window, editor);
+        }
+    }
+
+    private static void CloseWindow(Window window, MarkdownEditorControl editor)
+    {
+        // The package's shared renderer caches the visual; detach it between headless applications.
+        editor.FindControl<MarkdownViewer.Core.Controls.MarkdownViewer>("PreviewViewer")!.Content = null;
+        window.UpdateLayout();
+        window.Close();
+    }
+
+    private static ScrollViewer FindArticleScroller(MarkdownEditorControl editor, bool preview)
+    {
+        if (!preview)
+            return editor.GetVisualDescendants().OfType<TextEditor>().Single()
+                .GetVisualDescendants().OfType<ScrollViewer>().Single();
+
+        return editor.FindControl<ScrollViewer>("PreviewScrollViewer")!;
+    }
+
+    private static void AssertScrollable(ScrollViewer scroller)
+    {
+        Assert.True(scroller.Extent.Height > scroller.Viewport.Height,
+            $"Expected overflow, but extent={scroller.Extent.Height}, viewport={scroller.Viewport.Height}.");
+        Assert.Contains(scroller.GetVisualDescendants().OfType<ScrollBar>(),
+            bar => bar.Orientation == Avalonia.Layout.Orientation.Vertical && bar.IsVisible);
+        scroller.ScrollToEnd();
+        Assert.True(scroller.Offset.Y > 0);
+        Assert.Equal(scroller.Extent.Height - scroller.Viewport.Height, scroller.Offset.Y, 1);
+    }
+}

src/PostIt/PostIt/Controls/MarkdownEditorControl.axaml

@@ -7,35 +7,27 @@
     x:Name="Root"
     HorizontalAlignment="Stretch"
     VerticalAlignment="Stretch">
-    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinHeight="260">
+    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
         <Border
             BorderBrush="LightGray"
             BorderThickness="1"
             CornerRadius="5"
             IsVisible="{Binding !IsPreviewVisible, ElementName=Root}"
-            Padding="0"
-            MinHeight="260">
-            <ScrollViewer
-                BringIntoViewOnFocusChange="False"
+            Padding="0">
+            <AvaloniaEdit:TextEditor
+                x:Name="SourceEditor"
+                Document="{Binding Document, ElementName=Root, Mode=TwoWay}"
+                FontFamily="Cascadia Code,Consolas,Menlo,Monospace"
+                ShowLineNumbers="True"
+                WordWrap="True"
+                BorderThickness="0"
+                Padding="5,5,5,15"
+                HorizontalAlignment="Stretch"
+                VerticalAlignment="Stretch"
                 HorizontalScrollBarVisibility="Disabled"
                 VerticalScrollBarVisibility="Auto"
-                HorizontalAlignment="Stretch"
-                VerticalAlignment="Stretch">
-                <AvaloniaEdit:TextEditor
-                    x:Name="SourceEditor"
-                    Document="{Binding Document, ElementName=Root, Mode=TwoWay}"
-                    FontFamily="Cascadia Code,Consolas,Menlo,Monospace"
-                    ShowLineNumbers="True"
-                    WordWrap="True"
-                    BorderThickness="0"
-                    Padding="5,5,5,15"
-                    HorizontalAlignment="Stretch"
-                    VerticalAlignment="Stretch"
-                    HorizontalScrollBarVisibility="Disabled"
-                    VerticalScrollBarVisibility="Auto"
-                    TextInputOptions.Multiline="True"
-                    TextInputOptions.ReturnKeyType="Default" />
-            </ScrollViewer>
+                TextInputOptions.Multiline="True"
+                TextInputOptions.ReturnKeyType="Default" />
         </Border>
 
         <Border
@@ -43,18 +35,21 @@
             BorderThickness="1"
             CornerRadius="5"
             IsVisible="{Binding IsPreviewVisible, ElementName=Root}"
-            Padding="8"
-            MinHeight="260">
+            Padding="8">
             <ScrollViewer
+                x:Name="PreviewScrollViewer"
                 BringIntoViewOnFocusChange="False"
-                HorizontalScrollBarVisibility="Disabled"
                 VerticalScrollBarVisibility="Auto"
                 HorizontalAlignment="Stretch"
-                VerticalAlignment="Stretch">
+                VerticalAlignment="Stretch"
+                HorizontalScrollBarVisibility="Auto">
                 <md:MarkdownViewer
                     x:Name="PreviewViewer"
-                    MarkdownText="{Binding MarkdownText, ElementName=Root}"
-                    ClipToBounds="False" />
+                    HorizontalContentAlignment="Stretch"
+                    VerticalAlignment="Top"
+                    ClipToBounds="False"
+                    UseLayoutRounding="True"
+                    MarkdownText="{Binding MarkdownText, ElementName=Root}" />
             </ScrollViewer>
         </Border>
     </Grid>

src/PostIt/PostIt/Controls/MarkdownEditorControl.axaml.cs

@@ -38,8 +38,6 @@ public partial class MarkdownEditorControl : UserControl
     {
         InitializeComponent();
         PropertyChanged += OnPropertyChanged;
-        SizeChanged += OnSizeChanged;
-        UpdateEditorLimits();
     }
 
     private void OnPropertyChanged(object? sender, AvaloniaPropertyChangedEventArgs e)
@@ -62,27 +60,4 @@ public partial class MarkdownEditorControl : UserControl
             }
         }
     }
-
-    private void OnSizeChanged(object? sender, SizeChangedEventArgs e)
-    {
-        UpdateEditorLimits();
-    }
-
-    private void UpdateEditorLimits()
-    {
-        var visibleHeight = Bounds.Height > 0 ? Bounds.Height - 24 : 260;
-        visibleHeight = Math.Max(visibleHeight, 80);
-
-        if (SourceEditor is not null)
-        {
-            SourceEditor.MaxHeight = visibleHeight;
-            SourceEditor.Height = double.NaN;
-        }
-
-        if (PreviewViewer is not null)
-        {
-            PreviewViewer.MaxHeight = visibleHeight;
-            PreviewViewer.Height = double.NaN;
-        }
-    }
 }

src/PostIt/PostIt/Views/Blogs/BlogsPage.axaml

@@ -17,14 +17,11 @@
   <Design.DataContext>
     <vm:BlogsViewModel />
   </Design.DataContext>
-  <ScrollViewer
+  <Grid
+    RowDefinitions="Auto,Auto,*"
     Margin="5,5,10,5"
     HorizontalAlignment="Stretch"
-    VerticalAlignment="Stretch"
-    HorizontalScrollBarVisibility="Disabled"
-    VerticalScrollBarVisibility="Auto"
-    BringIntoViewOnFocusChange="False">
-    <StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+    VerticalAlignment="Stretch">
 
       <WrapPanel x:Name="BlogsHeaderPanel"
         Margin="5"
@@ -39,6 +36,7 @@
           Text="{Binding SearchText, Mode=TwoWay}" />
       </WrapPanel>
       <CommandBar x:Name="BlogsCommandBar"
+       Grid.Row="1"
        HorizontalAlignment="Right" IsDynamicOverflowEnabled="True">
         <CommandBar.PrimaryCommands>
           <CommandBarButton Command="{Binding RefreshAsync}" Label="Refresh">
@@ -107,16 +105,14 @@
         </CommandBar.PrimaryCommands>
       </CommandBar>
 
-      <Grid Margin="12" RowSpacing="12" x:Name="MainGrid" MinHeight="500">
+      <Grid Grid.Row="2" Margin="12" RowSpacing="12" x:Name="MainGrid">
         <Grid.RowDefinitions>
-          <RowDefinition Height="Auto" />
-          <RowDefinition Height="Auto" />
           <RowDefinition Height="*" />
-          <RowDefinition Height="Auto" />
-          <RowDefinition Height="Auto" />
+          <RowDefinition Height="4" />
+          <RowDefinition Height="2*" />
         </Grid.RowDefinitions>
         <Border
-          Grid.Row="1"
+          Grid.Row="0"
           Padding="8"
           BorderBrush="Gray"
           BorderThickness="1">
@@ -161,6 +157,11 @@
           </ListBox>
         </Border>
 
+        <GridSplitter
+          Grid.Row="1"
+          HorizontalAlignment="Stretch"
+          ResizeDirection="Rows" />
+
         <Grid
           Grid.Row="2"
           HorizontalAlignment="Stretch"
@@ -171,6 +172,7 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
             <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
           </Grid.RowDefinitions>
           <Grid.ColumnDefinitions>
             <ColumnDefinition Width="*" />
@@ -217,6 +219,5 @@
 
         </Grid>
       </Grid>
-    </StackPanel>
-  </ScrollViewer>
+  </Grid>
 </ContentPage>