From da71e3b7bb4044140f560c09428058935f89d3a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20M=C3=BCller?=
 <1005065+DeepDiver1975@users.noreply.github.com>
Date: Mon, 31 Aug 2026 17:31:13 +0200
Subject: [PATCH] fix(ui): make the module tab strip a scrollable single column
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause (systematic-debugging, reported live with a screenshot on a
"relative small screen"): TabControl's TabStripPlacement="Left" (the
"dispatch sidebar" rail — Theme/Styles.axaml) used Avalonia's default
items panel, a vertically-oriented WrapPanel. Once the rail ran out of
height for all 11 fixed-MinHeight-50 TabItems, it wrapped into a second
column starting back at the top — WASSERFÖRDERUNG rendered directly
beside AUFBAU, ABBAU beside ETB, exactly as reported.

Forcing a single-column StackPanel alone wasn't enough: confirmed via a
headless test that Avalonia's default template has no ScrollViewer
around PART_ItemsPresenter at all, so without wrapping the last tabs
would have simply been clipped off the bottom edge with no way to reach
them — the same class of bug as the earlier Wasserförderung map
zoom/pan dead-end, just in the navigation rail instead.

Fix: replace TabControl's template with a small purpose-built one (this
app only ever uses TabStripPlacement="Left", so no need to handle other
placements) — a single-column ItemsPresenter wrapped in its own
ScrollViewer beside the content host, instead of patching Avalonia's
default template.

Verified headlessly: at a window short enough that the rail genuinely
needs it, all tabs stay in one column (monotonically increasing Y) and
the last tab (ABBAU) is reachable by scrolling the rail into view.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UwN31QccH98YV9eEc2bue2
Signed-off-by: Thomas Müller <1005065+DeepDiver1975@users.noreply.github.com>
---
 src/LageBuch.App.Shared/Theme/Styles.axaml    | 27 +++++++
 .../ModuleTabStripLayoutTests.cs              | 81 +++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 tests/LageBuch.Acceptance.Tests/ModuleTabStripLayoutTests.cs

diff --git a/src/LageBuch.App.Shared/Theme/Styles.axaml b/src/LageBuch.App.Shared/Theme/Styles.axaml
index 56cfeb6..0a12ba3 100644
--- a/src/LageBuch.App.Shared/Theme/Styles.axaml
+++ b/src/LageBuch.App.Shared/Theme/Styles.axaml
@@ -283,6 +283,33 @@
   <Style Selector="TabControl">
     <Setter Property="TabStripPlacement" Value="Left" />
     <Setter Property="Padding" Value="0" />
+    <!-- Avalonia's default Left-placement items panel is a vertical WrapPanel with no scroll
+         wrapper at all: once the rail runs out of height it wraps into a second column overlapping
+         the first two tabs with the last two (reported live on a short window — WASSERFÖRDERUNG
+         rendered beside AUFBAU, ABBAU beside ETB), and forcing a single-column panel alone just
+         turns that into a silent, unreachable clip instead (confirmed via a headless test: no
+         ScrollViewer anywhere wraps PART_ItemsPresenter, so a short window drops the last tabs off
+         the bottom edge with no way back). This is a single-column "dispatch rail" by design (fixed
+         172px-wide TabItems below) with only one placement ever used in this app, so replace the
+         whole template with a purpose-built one: single-column items panel, wrapped in its own
+         ScrollViewer, laid out beside the content host. -->
+    <Setter Property="ItemsPanel">
+      <ItemsPanelTemplate>
+        <StackPanel Orientation="Vertical" />
+      </ItemsPanelTemplate>
+    </Setter>
+    <Setter Property="Template">
+      <ControlTemplate>
+        <Grid ColumnDefinitions="Auto,*">
+          <ScrollViewer Grid.Column="0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+            <ItemsPresenter Name="PART_ItemsPresenter" ItemsPanel="{TemplateBinding ItemsPanel}" />
+          </ScrollViewer>
+          <ContentPresenter Grid.Column="1" Name="PART_SelectedContentHost"
+                            Content="{TemplateBinding SelectedContent}"
+                            ContentTemplate="{TemplateBinding SelectedContentTemplate}" />
+        </Grid>
+      </ControlTemplate>
+    </Setter>
   </Style>
   <Style Selector="TabControl /template/ ItemsPresenter#PART_ItemsPresenter">
     <Setter Property="Margin" Value="0" />
diff --git a/tests/LageBuch.Acceptance.Tests/ModuleTabStripLayoutTests.cs b/tests/LageBuch.Acceptance.Tests/ModuleTabStripLayoutTests.cs
new file mode 100644
index 0000000..d40be06
--- /dev/null
+++ b/tests/LageBuch.Acceptance.Tests/ModuleTabStripLayoutTests.cs
@@ -0,0 +1,81 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Headless;
+using Avalonia.Headless.XUnit;
+using Avalonia.Threading;
+using Avalonia.VisualTree;
+using LageBuch.App.Shared.Views;
+using LageBuch.AppLogic;
+using LageBuch.AppLogic.Services;
+using LageBuch.AppLogic.ViewModels;
+
+namespace LageBuch.Acceptance.Tests;
+
+// The left "dispatch sidebar" module tab strip (AUFBAU, ETB, ..., WASSERFÖRDERUNG, ABBAU),
+// TabStripPlacement="Left" per Theme/Styles.axaml. On a short window, the last tabs wrapped into
+// a second column overlapping the first ones instead of scrolling -- reported live, screenshot
+// showed WASSERFÖRDERUNG rendered directly beside AUFBAU and ABBAU beside ETB.
+public class ModuleTabStripLayoutTests
+{
+    // CanHost=true so the header includes the "IM NETZWERK FREIGEBEN" row, matching the reported
+    // screenshot exactly (a NoopIncidentHostController hides that row, understating header height).
+    private sealed class HostableController : IIncidentHostController
+    {
+        public bool CanHost => true;
+        public bool IsHosting => false;
+        public string? ShareHint => null;
+        public string? SharePin => null;
+        public Task StartAsync(LocalIncidentSession session) => Task.CompletedTask;
+        public Task StopAsync() => Task.CompletedTask;
+    }
+
+    [AvaloniaFact]
+    public void Tabs_stay_in_a_single_column_top_to_bottom_on_a_short_window()
+    {
+        var clock = new FixedClock();
+        var session = LocalIncidentSession.StartNew(new FakeStore(), clock,
+            new LageBuch.Domain.SessionOperator("Müller", "FFB 12/1"), "/x.fwincident",
+            Array.Empty<(string, bool)>(), Array.Empty<(string, bool)>());
+        var vm = new IncidentWorkspaceViewModel(session, clock, new ManualTicker(),
+            WorkspaceRenderHelper.MasterData(), new FakeDialogs(), new NoopAlarmService(),
+            new HostableController());
+
+        // Matches the reported "relative small screen": a modest laptop-class height, well under
+        // what 11 fixed-MinHeight-50 TabItems need stacked below the full header.
+        var window = new Window { Content = new IncidentWorkspaceView { DataContext = vm }, Width = 1366, Height = 550 };
+        window.Show();
+        Dispatcher.UIThread.RunJobs();
+
+        var tabItems = window.GetVisualDescendants().OfType<TabItem>()
+            .Select(t => t.TranslatePoint(new Point(0, 0), window)!.Value.Y)
+            .ToList();
+
+        Assert.True(tabItems.Count >= 10, $"Expected all module tabs to be found, got {tabItems.Count}.");
+        for (var i = 1; i < tabItems.Count; i++)
+        {
+            Assert.True(tabItems[i] > tabItems[i - 1],
+                $"Tab at index {i} (y={tabItems[i]}) is not below the previous tab (y={tabItems[i - 1]}) -- " +
+                "the tab strip wrapped into a second column instead of staying single-column.");
+        }
+
+        // Not wrapping alone isn't enough -- the last tabs must still be reachable by scrolling
+        // the rail into view, not merely pushed off-screen with no way back.
+        var lastTab = window.GetVisualDescendants().OfType<TabItem>().Last(); // ABBAU
+        var railScrollViewer = window.GetVisualDescendants().OfType<ScrollViewer>()
+            .FirstOrDefault(sv => sv.GetVisualDescendants().OfType<TabItem>().Any());
+        Assert.NotNull(railScrollViewer);
+        Assert.True(railScrollViewer!.Extent.Height > railScrollViewer.Viewport.Height,
+            "Test premise: the rail must actually need scrolling at this window height " +
+            $"(extent={railScrollViewer.Extent.Height}, viewport={railScrollViewer.Viewport.Height}).");
+
+        railScrollViewer.Offset = new Vector(0, railScrollViewer.Extent.Height - railScrollViewer.Viewport.Height);
+        Dispatcher.UIThread.RunJobs();
+        var lastTabY = lastTab.TranslatePoint(new Point(0, 0), window)!.Value.Y;
+        Assert.InRange(lastTabY, 0, window.Bounds.Height);
+
+        var dir = Path.Combine(Path.GetTempPath(), "lagebuch-shots");
+        Directory.CreateDirectory(dir);
+        using var frame = window.CaptureRenderedFrame()!;
+        frame.SavePng(Path.Combine(dir, "module-tab-strip-small-screen-fixed.png"));
+    }
+}