feat: add text size slider and fix text wrapping on offline reader page (#178)

src/NoteBookmark.BlazorApp.Tests/Tests/PostReaderTests.cs

@@ -0,0 +1,66 @@
+using Bunit;
+using Microsoft.Extensions.DependencyInjection;
+using Microsoft.FluentUI.AspNetCore.Components;
+using Moq;
+using NoteBookmark.BlazorApp.Tests.Helpers;
+using NoteBookmark.Domain;
+using NoteBookmark.SharedUI;
+using NoteBookmark.SharedUI.Components.Pages;
+using Xunit;
+
+namespace NoteBookmark.BlazorApp.Tests.Tests;
+
+public sealed class PostReaderTests : BunitContext
+{
+    private readonly Mock<IDataService> _dataServiceMock;
+
+    public PostReaderTests()
+    {
+        this.AddFluentUI();
+        this.AddAuthorization().SetAuthorized("testuser");
+
+        _dataServiceMock = new Mock<IDataService>();
+        _dataServiceMock.Setup(s => s.GetPost("p1")).ReturnsAsync(new Post
+        {
+            PartitionKey = "p",
+            RowKey = "p1",
+            Title = "Test Offline Article Title",
+            Author = "Frank Boucher",
+            Date_published = "2026-01-01T00:00:00"
+        });
+        _dataServiceMock.Setup(s => s.GetPostHtmlAsync("p1")).ReturnsAsync("<p>Hello offline reader world</p>");
+
+        Services.AddSingleton(_dataServiceMock.Object);
+    }
+
+    [Fact]
+    public void PostReader_RendersTitleAndContentAndSlider()
+    {
+        var cut = Render<PostReader>(ps => ps.Add(p => p.PostId, "p1"));
+
+        cut.Markup.Should().Contain("Test Offline Article Title");
+        cut.Markup.Should().Contain("Frank Boucher");
+        cut.Markup.Should().Contain("Hello offline reader world");
+        cut.Markup.Should().Contain("reader-content");
+        cut.Markup.Should().Contain("Text size:");
+
+        var slider = cut.FindComponent<FluentSlider<int>>();
+        slider.Instance.Min.Should().Be(8);
+        slider.Instance.Max.Should().Be(56);
+    }
+
+    [Fact]
+    public void PostReader_SliderValueChange_UpdatesContentFontSize()
+    {
+        var cut = Render<PostReader>(ps => ps.Add(p => p.PostId, "p1"));
+
+        var contentDivBefore = cut.Find("div.reader-content");
+        contentDivBefore.GetAttribute("style").Should().Contain("font-size: 16px;");
+
+        var slider = cut.FindComponent<FluentSlider<int>>();
+        cut.InvokeAsync(() => slider.Instance.ValueChanged.InvokeAsync(24));
+
+        var contentDivAfter = cut.Find("div.reader-content");
+        contentDivAfter.GetAttribute("style").Should().Contain("font-size: 24px;");
+    }
+}

src/NoteBookmark.SharedUI/Components/Pages/PostReader.razor

@@ -8,7 +8,7 @@
 
 <PageTitle>@(post?.Title ?? "Reading...")</PageTitle>
 
-<FluentStack Orientation="Orientation.Vertical" Style="max-width: 700px; margin: 0 auto; padding: 1rem;">
+<FluentStack Orientation="Orientation.Vertical" Style="width: 100%; max-width: 800px; margin: 0 auto; padding: 1rem; box-sizing: border-box;">
     <FluentStack Orientation="Orientation.Horizontal">
         <FluentButton OnClick="@(() => Navigation.NavigateTo("/posts"))"
                       IconStart="@(new Icons.Regular.Size20.ArrowLeft())"
@@ -23,7 +23,7 @@
     {
         @if (post != null)
         {
-            <h1 style="margin-bottom: 0.25rem;">@post.Title</h1>
+            <h1 style="margin-bottom: 0.25rem; word-break: break-word;">@post.Title</h1>
             <FluentStack Orientation="Orientation.Horizontal" Style="color: var(--neutral-fill-stealth-rest); gap: 0.5rem; margin-bottom: 1rem;">
                 @if (!string.IsNullOrEmpty(post.Author))
                 {
@@ -38,14 +38,24 @@
 
         @if (htmlContent != null)
         {
-            <div style="line-height: 1.7; max-width: 700px; overflow-wrap: break-word;">
+            <div class="reader-content" style="font-size: @(textSize)px; line-height: 1.7;">
                 @((MarkupString)htmlContent)
             </div>
         }
         else
         {
             <p><em>Content not available.</em></p>
         }
+
+        <FluentDivider Style="margin: 2rem 0 1rem 0;" />
+
+        <FluentStack Orientation="Orientation.Vertical" Style="width: 100%; gap: 0.5rem; margin-top: 1rem;">
+            <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center">
+                <span style="font-weight: 600;">Text size:</span>
+                <span>@(textSize)px</span>
+            </FluentStack>
+            <FluentSlider Min="8" Max="56" Step="1" @bind-Value="textSize" Style="width: 100%;" aria-label="Text size slider" />
+        </FluentStack>
     }
 </FluentStack>
 
@@ -56,6 +66,7 @@
     private Post? post;
     private string? htmlContent;
     private bool isLoading = true;
+    private int textSize = 16;
 
     protected override async Task OnInitializedAsync()
     {

src/NoteBookmark.SharedUI/Components/Pages/PostReader.razor.css

@@ -0,0 +1,30 @@
+.reader-content {
+    width: 100%;
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    box-sizing: border-box;
+}
+
+.reader-content ::deep * {
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+.reader-content ::deep img {
+    max-width: 100%;
+    height: auto;
+}
+
+.reader-content ::deep pre,
+.reader-content ::deep code {
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-x: auto;
+}
+
+.reader-content ::deep table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+}