From 32e2f7893212f2a9ef7902add71ae07a013c5474 Mon Sep 17 00:00:00 2001
From: keyldev <wudgexyz@gmail.com>
Date: Sun, 27 Sep 2026 21:13:17 +0300
Subject: [PATCH] fix(mobile): polish the redesign on phone-width screens

- Cameras: compact header (actions beside the title, full-width search, stretched group filter); fixes the clipped search box
- Sheets: pad the bottom by the safe area plus a small gap so actions clear the gesture bar
- Recordings: phone calendar is a full-width card with a week strip that expands to the month
- Player: clock row, centred transport and one row of equal pills (sound, speed menu, clip)
---
 src/OpenIPC.Viewer.App/Services/Localizer.cs  |   4 +
 .../Services/OverlayDialogPresenter.cs        |  20 +-
 .../ViewModels/ArchiveCalendarViewModel.cs    |  56 +++-
 .../Views/Pages/ArchiveCalendarView.axaml     | 296 +++++++++++++-----
 .../Views/Pages/ArchiveCalendarView.axaml.cs  |  20 ++
 .../Views/Pages/CameraLibraryPage.axaml       | 201 +++++++-----
 .../Views/Pages/RecordingPlayerPage.axaml     | 117 ++++++-
 .../Views/Pages/RecordingPlayerPage.axaml.cs  |  20 ++
 .../Views/Pages/RecordingsPage.axaml          |  15 +-
 9 files changed, 571 insertions(+), 178 deletions(-)

diff --git a/src/OpenIPC.Viewer.App/Services/Localizer.cs b/src/OpenIPC.Viewer.App/Services/Localizer.cs
index bf9c1ae..daf8c7d 100644
--- a/src/OpenIPC.Viewer.App/Services/Localizer.cs
+++ b/src/OpenIPC.Viewer.App/Services/Localizer.cs
@@ -175,6 +175,7 @@ private static LangCode DetectSystem()
         ["Library.RowLayouts"] = "Layouts",
         ["Library.SearchPlaceholder"] = "Name or IP",
         ["Library.FindOnNetwork"] = "Find on network",
+        ["Library.AddShort"] = "Add",
         ["Library.NoMatches"] = "No cameras match these filters",
         ["Library.Filter.All"] = "All",
         ["Library.Filter.Online"] = "Online",
@@ -630,6 +631,7 @@ private static LangCode DetectSystem()
         ["Calendar.MonthSummaryFormat"] = "Recordings this month: {0}",
         ["Calendar.DayTooltipFormat"] = "Recordings: {0} · Events: {1}",
         ["Calendar.NearestFormat"] = "Nearest recordings: {0} →",
+        ["Calendar.ToggleMonth"] = "Whole month",
         ["Recordings.ExportTitle"] = "Export clip",
         ["Player.Back"] = "Back to recordings",
         ["Player.Previous"] = "Previous",
@@ -807,6 +809,7 @@ private static LangCode DetectSystem()
         ["Library.RowLayouts"] = "Раскладки",
         ["Library.SearchPlaceholder"] = "Имя или IP",
         ["Library.FindOnNetwork"] = "Найти в сети",
+        ["Library.AddShort"] = "Добавить",
         ["Library.NoMatches"] = "Под эти фильтры камер нет",
         ["Library.Filter.All"] = "Все",
         ["Library.Filter.Online"] = "В сети",
@@ -1262,6 +1265,7 @@ private static LangCode DetectSystem()
         ["Calendar.MonthSummaryFormat"] = "Записей в месяце: {0}",
         ["Calendar.DayTooltipFormat"] = "Записей: {0} · Событий: {1}",
         ["Calendar.NearestFormat"] = "Ближайшие записи: {0} →",
+        ["Calendar.ToggleMonth"] = "Весь месяц",
         ["Recordings.ExportTitle"] = "Экспорт клипа",
         ["Player.Back"] = "К списку записей",
         ["Player.Previous"] = "Предыдущая",
diff --git a/src/OpenIPC.Viewer.App/Services/OverlayDialogPresenter.cs b/src/OpenIPC.Viewer.App/Services/OverlayDialogPresenter.cs
index 5dd5a66..1bdc899 100644
--- a/src/OpenIPC.Viewer.App/Services/OverlayDialogPresenter.cs
+++ b/src/OpenIPC.Viewer.App/Services/OverlayDialogPresenter.cs
@@ -42,6 +42,9 @@ public static class OverlayDialogPresenter
     // keeps the card's top edge clear of the status bar / notch.
     private const double TopPeek = 56;
 
+    // Air between a sheet's last row and the navigation bar / gesture pill.
+    private const double SheetBottomGap = 14;
+
     // Number of overlay dialogs currently on screen. Mobile dialogs live in the
     // TopLevel.OverlayLayer; the dim Border does not reliably intercept taps on
     // the bottom nav, so the shell gates navigation on this instead. Desktop
@@ -118,14 +121,15 @@ public static async Task<TResult> ShowAsync<TResult>(Control content, Task<TResu
                 },
         };
 
-        // Full-screen pages cover the whole TopLevel, including under the status
-        // bar — inset the top so the title clears the clock/notch. Use the real
-        // safe-area when the platform exposes it, else a sensible default.
-        if (fullScreen)
-        {
-            var safeTop = top?.InsetsManager?.SafeAreaPadding.Top ?? 0;
-            card.Padding = new Thickness(0, safeTop > 0 ? safeTop : 28, 0, 0);
-        }
+        // The overlay layer sits above the shell, so it doesn't inherit the
+        // safe-area padding MainView applies to itself. Full-screen pages cover
+        // the status bar — inset the top so the title clears the clock/notch.
+        // A sheet reaches the bottom edge: lift its action row clear of the
+        // navigation bar / gesture pill, plus a little air above it.
+        var safe = top?.InsetsManager?.SafeAreaPadding ?? default;
+        card.Padding = fullScreen
+            ? new Thickness(0, safe.Top > 0 ? safe.Top : 28, 0, 0)
+            : new Thickness(0, 0, 0, safe.Bottom + SheetBottomGap);
 
         var dim = new Border
         {
diff --git a/src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs b/src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs
index 4dd444c..632fab8 100644
--- a/src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs
+++ b/src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs
@@ -59,10 +59,30 @@ public ArchiveCalendarViewModel(
     [NotifyPropertyChangedFor(nameof(MonthLabel))]
     private int _month;
 
-    [ObservableProperty] private DateTime? _selectedDate;
+    [ObservableProperty]
+    [NotifyPropertyChangedFor(nameof(HasSelectedDate))]
+    [NotifyPropertyChangedFor(nameof(SelectedDateLabel))]
+    private DateTime? _selectedDate;
+
+    public bool HasSelectedDate => SelectedDate is not null;
+
+    // "27 сентября" — the compact calendar's reset chip.
+    public string SelectedDateLabel => SelectedDate is { } d ? d.ToString("d MMMM", UiCulture) : "";
 
     public ObservableCollection<CalendarDayCell> Days { get; } = new();
 
+    // One row of Days (same cell instances) for the collapsed phone calendar:
+    // the selected day's week, else this week if it has recordings, else the
+    // latest week with recordings, else this week / the month's first week.
+    public ObservableCollection<CalendarDayCell> WeekDays { get; } = new();
+
+    // Phone calendar: week strip (false) or the whole month (true). Picking a
+    // day folds it back so the list gets the screen again.
+    [ObservableProperty] private bool _isExpanded;
+
+    [RelayCommand]
+    private void ToggleExpanded() => IsExpanded = !IsExpanded;
+
     public string MonthLabel =>
         UiCulture.TextInfo.ToTitleCase(new DateTime(Year, Month, 1).ToString("MMMM yyyy", UiCulture));
 
@@ -191,6 +211,37 @@ private void BuildGrid(IReadOnlyDictionary<DateTime, DayActivity> activity, int
             };
             Days.Add(cell);
         }
+        UpdateWeek();
+    }
+
+    private void UpdateWeek()
+    {
+        WeekDays.Clear();
+        if (Days.Count < 7) return;
+
+        var today = DateTime.Now.Date;
+        int WeekOf(Func<CalendarDayCell, bool> match)
+        {
+            for (var i = 0; i < Days.Count; i++)
+                if (match(Days[i])) return i / 7;
+            return -1;
+        }
+        bool WeekHasRecordings(int week) =>
+            week >= 0 && Enumerable.Range(week * 7, 7).Any(i => Days[i].InMonth && Days[i].HasRecordings);
+
+        var thisWeek = WeekOf(c => c.InMonth && c.Date == today);
+        var lastRecordingWeek = -1;
+        for (var i = Days.Count - 1; i >= 0 && lastRecordingWeek < 0; i--)
+            if (Days[i].InMonth && Days[i].HasRecordings) lastRecordingWeek = i / 7;
+
+        var week = SelectedDate is { } sel ? WeekOf(c => c.Date == sel.Date) : -1;
+        if (week < 0 && WeekHasRecordings(thisWeek)) week = thisWeek;
+        if (week < 0) week = lastRecordingWeek;
+        if (week < 0) week = thisWeek;
+        if (week < 0) week = WeekOf(c => c.InMonth);
+
+        for (var i = 0; i < 7; i++)
+            WeekDays.Add(Days[week * 7 + i]);
     }
 
     [RelayCommand]
@@ -228,6 +279,8 @@ private void SelectDay(CalendarDayCell? cell)
         }
         SelectedDate = cell.Date.Date;
         foreach (var c in Days) c.IsSelected = c.Date.Date == cell.Date.Date;
+        IsExpanded = false;
+        UpdateWeek();
         DaySelected?.Invoke(cell.Date.Date);
     }
 
@@ -236,6 +289,7 @@ private void ShowAll()
     {
         SelectedDate = null;
         foreach (var c in Days) c.IsSelected = false;
+        UpdateWeek();
         DaySelected?.Invoke(null);
     }
 }
diff --git a/src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml b/src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml
index fc42db3..1080012 100644
--- a/src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml
+++ b/src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml
@@ -2,9 +2,40 @@
              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
              xmlns:vm="using:OpenIPC.Viewer.App.ViewModels"
              xmlns:svc="using:OpenIPC.Viewer.App.Services"
+             xmlns:pages="using:OpenIPC.Viewer.App.Views.Pages"
              x:Class="OpenIPC.Viewer.App.Views.Pages.ArchiveCalendarView"
              x:DataType="vm:ArchiveCalendarViewModel">
 
+  <UserControl.Resources>
+    <!-- Recording days: accent fill (brighter = more recordings), bold number.
+         Event-only days: a small dot, not selectable. Shared by the month grid
+         and the phone week strip. -->
+    <DataTemplate x:Key="DayCell" DataType="vm:CalendarDayCell">
+      <Button Classes="day"
+              Classes.outmonth="{Binding !InMonth}"
+              Classes.selected="{Binding IsSelected}"
+              Classes.hasrec="{Binding HasRecordings}"
+              ToolTip.Tip="{Binding Tooltip}"
+              Command="{Binding $parent[ItemsControl].((vm:ArchiveCalendarViewModel)DataContext).SelectDayCommand}"
+              CommandParameter="{Binding}">
+        <Panel>
+          <Border CornerRadius="4"
+                  Background="{StaticResource AccentBrush}"
+                  Opacity="{Binding Shade}" />
+          <Border Classes.today="{Binding IsToday}" CornerRadius="4" />
+          <TextBlock Text="{Binding DayNumber}"
+                     HorizontalAlignment="Center"
+                     VerticalAlignment="Center"
+                     FontSize="12" />
+          <Ellipse Width="4" Height="4"
+                   HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,3"
+                   Fill="{StaticResource WarningBrush}"
+                   IsVisible="{Binding HasEventsOnly}" />
+        </Panel>
+      </Button>
+    </DataTemplate>
+  </UserControl.Resources>
+
   <UserControl.Styles>
     <Style Selector="Button.nav">
       <Setter Property="Background" Value="Transparent" />
@@ -43,94 +74,191 @@
       <Setter Property="BorderBrush" Value="{StaticResource TextSecondaryBrush}" />
       <Setter Property="BorderThickness" Value="1" />
     </Style>
+
+    <!-- Wide: the fixed month column. Phone (:compact): the card below. -->
+    <Style Selector="pages|ArchiveCalendarView :is(Control).compact-only">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="pages|ArchiveCalendarView:compact :is(Control).compact-only">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="pages|ArchiveCalendarView:compact :is(Control).wide-only">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="pages|ArchiveCalendarView:compact Button.day">
+      <Setter Property="MinHeight" Value="34" />
+      <Setter Property="HorizontalAlignment" Value="Stretch" />
+    </Style>
+
+    <Style Selector="Button.reset">
+      <Setter Property="Background" Value="{StaticResource AccentTintBrush}" />
+      <Setter Property="BorderThickness" Value="0" />
+      <Setter Property="CornerRadius" Value="999" />
+      <Setter Property="Padding" Value="10,3,8,3" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+      <Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
+    </Style>
+    <Style Selector="Path.chevron">
+      <Setter Property="RenderTransform" Value="rotate(0deg)" />
+    </Style>
+    <Style Selector="Path.chevron.up">
+      <Setter Property="RenderTransform" Value="rotate(180deg)" />
+    </Style>
   </UserControl.Styles>
 
-  <StackPanel Spacing="8" Width="240">
+  <Panel>
 
-    <!-- Month nav -->
-    <Grid ColumnDefinitions="Auto,*,Auto">
-      <Button Grid.Column="0" Classes="nav" Command="{Binding PrevMonthCommand}">
-        <Path Classes="lucide" Data="{StaticResource IconChevronLeft}"
-              Stroke="{StaticResource TextSecondaryBrush}" Width="14" Height="14" />
-      </Button>
-      <TextBlock Grid.Column="1"
-                 Text="{Binding MonthLabel}"
+    <!-- Wide: month column next to the list. -->
+    <StackPanel Classes="wide-only" Spacing="8" Width="240">
+
+      <!-- Month nav -->
+      <Grid ColumnDefinitions="Auto,*,Auto">
+        <Button Grid.Column="0" Classes="nav" Command="{Binding PrevMonthCommand}">
+          <Path Classes="lucide" Data="{StaticResource IconChevronLeft}"
+                Stroke="{StaticResource TextSecondaryBrush}" Width="14" Height="14" />
+        </Button>
+        <TextBlock Grid.Column="1"
+                   Text="{Binding MonthLabel}"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   FontWeight="SemiBold"
+                   Foreground="{StaticResource TextPrimaryBrush}" />
+        <Button Grid.Column="2" Classes="nav" Command="{Binding NextMonthCommand}">
+          <Path Classes="lucide" Data="{StaticResource IconChevronRight}"
+                Stroke="{StaticResource TextSecondaryBrush}" Width="14" Height="14" />
+        </Button>
+      </Grid>
+
+      <!-- Weekday header -->
+      <UniformGrid Columns="7">
+        <TextBlock Text="{Binding [Calendar.Mon], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+        <TextBlock Text="{Binding [Calendar.Tue], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+        <TextBlock Text="{Binding [Calendar.Wed], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+        <TextBlock Text="{Binding [Calendar.Thu], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+        <TextBlock Text="{Binding [Calendar.Fri], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+        <TextBlock Text="{Binding [Calendar.Sat], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+        <TextBlock Text="{Binding [Calendar.Sun], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+      </UniformGrid>
+
+      <!-- Day grid -->
+      <ItemsControl ItemsSource="{Binding Days}" ItemTemplate="{StaticResource DayCell}">
+        <ItemsControl.ItemsPanel>
+          <ItemsPanelTemplate>
+            <UniformGrid Columns="7" />
+          </ItemsPanelTemplate>
+        </ItemsControl.ItemsPanel>
+      </ItemsControl>
+
+      <TextBlock Text="{Binding MonthSummary}"
                  HorizontalAlignment="Center"
-                 VerticalAlignment="Center"
-                 FontWeight="SemiBold"
-                 Foreground="{StaticResource TextPrimaryBrush}" />
-      <Button Grid.Column="2" Classes="nav" Command="{Binding NextMonthCommand}">
-        <Path Classes="lucide" Data="{StaticResource IconChevronRight}"
-              Stroke="{StaticResource TextSecondaryBrush}" Width="14" Height="14" />
-      </Button>
-    </Grid>
-
-    <!-- Weekday header -->
-    <UniformGrid Columns="7">
-      <TextBlock Text="{Binding [Calendar.Mon], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
-      <TextBlock Text="{Binding [Calendar.Tue], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
-      <TextBlock Text="{Binding [Calendar.Wed], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
-      <TextBlock Text="{Binding [Calendar.Thu], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
-      <TextBlock Text="{Binding [Calendar.Fri], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
-      <TextBlock Text="{Binding [Calendar.Sat], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
-      <TextBlock Text="{Binding [Calendar.Sun], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
-    </UniformGrid>
-
-    <!-- Day grid -->
-    <ItemsControl ItemsSource="{Binding Days}">
-      <ItemsControl.ItemsPanel>
-        <ItemsPanelTemplate>
-          <UniformGrid Columns="7" />
-        </ItemsPanelTemplate>
-      </ItemsControl.ItemsPanel>
-      <ItemsControl.ItemTemplate>
-        <DataTemplate DataType="vm:CalendarDayCell">
-          <!-- Recording days: accent fill (brighter = more recordings), bold
-               number. Event-only days: a small dot, not selectable. -->
-          <Button Classes="day"
-                  Classes.outmonth="{Binding !InMonth}"
-                  Classes.selected="{Binding IsSelected}"
-                  Classes.hasrec="{Binding HasRecordings}"
-                  ToolTip.Tip="{Binding Tooltip}"
-                  Command="{Binding $parent[ItemsControl].((vm:ArchiveCalendarViewModel)DataContext).SelectDayCommand}"
-                  CommandParameter="{Binding}">
-            <Panel>
-              <Border CornerRadius="4"
-                      Background="{StaticResource AccentBrush}"
-                      Opacity="{Binding Shade}" />
-              <Border Classes.today="{Binding IsToday}" CornerRadius="4" />
-              <TextBlock Text="{Binding DayNumber}"
-                         HorizontalAlignment="Center"
-                         VerticalAlignment="Center"
-                         FontSize="12" />
-              <Ellipse Width="4" Height="4"
-                       HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,3"
-                       Fill="{StaticResource WarningBrush}"
-                       IsVisible="{Binding HasEventsOnly}" />
-            </Panel>
+                 FontSize="{StaticResource FontSizeSm}"
+                 Foreground="{StaticResource TextSecondaryBrush}" />
+
+      <!-- Empty month: jump to the nearest month that has recordings. -->
+      <Button Classes="nav"
+              HorizontalAlignment="Center"
+              IsVisible="{Binding HasNearestMonth}"
+              Command="{Binding JumpToNearestMonthCommand}"
+              Foreground="{StaticResource AccentBrush}"
+              Content="{Binding NearestMonthLabel}" />
+
+      <Button Classes="nav"
+              HorizontalAlignment="Center"
+              Command="{Binding ShowAllCommand}"
+              Content="{Binding [Common.All], Source={x:Static svc:Localizer.Instance}}" />
+
+    </StackPanel>
+
+    <!-- Phone: full-width card — month nav + the selected day's reset chip,
+         one week of days, the whole month on demand. -->
+    <Border Classes="compact-only"
+            Background="{StaticResource Bg2Brush}"
+            BorderBrush="{StaticResource BorderWeakBrush}" BorderThickness="1"
+            CornerRadius="10" Padding="8,6,8,8">
+      <StackPanel Spacing="6">
+
+        <Grid ColumnDefinitions="Auto,Auto,Auto,*,Auto,Auto">
+          <Button Grid.Column="0" Classes="nav" Padding="8,6" Command="{Binding PrevMonthCommand}">
+            <Path Classes="lucide" Data="{StaticResource IconChevronLeft}"
+                  Stroke="{StaticResource TextSecondaryBrush}" Width="14" Height="14" />
+          </Button>
+          <Button Grid.Column="1" Classes="nav" Padding="2,6" Command="{Binding ToggleExpandedCommand}">
+            <TextBlock Text="{Binding MonthLabel}"
+                       FontWeight="SemiBold"
+                       Foreground="{StaticResource TextPrimaryBrush}" />
           </Button>
-        </DataTemplate>
-      </ItemsControl.ItemTemplate>
-    </ItemsControl>
-
-    <TextBlock Text="{Binding MonthSummary}"
-               HorizontalAlignment="Center"
-               FontSize="{StaticResource FontSizeSm}"
-               Foreground="{StaticResource TextSecondaryBrush}" />
-
-    <!-- Empty month: jump to the nearest month that has recordings. -->
-    <Button Classes="nav"
-            HorizontalAlignment="Center"
-            IsVisible="{Binding HasNearestMonth}"
-            Command="{Binding JumpToNearestMonthCommand}"
-            Foreground="{StaticResource AccentBrush}"
-            Content="{Binding NearestMonthLabel}" />
-
-    <Button Classes="nav"
-            HorizontalAlignment="Center"
-            Command="{Binding ShowAllCommand}"
-            Content="{Binding [Common.All], Source={x:Static svc:Localizer.Instance}}" />
-
-  </StackPanel>
+          <Button Grid.Column="2" Classes="nav" Padding="8,6" Command="{Binding NextMonthCommand}">
+            <Path Classes="lucide" Data="{StaticResource IconChevronRight}"
+                  Stroke="{StaticResource TextSecondaryBrush}" Width="14" Height="14" />
+          </Button>
+
+          <Button Grid.Column="4" Classes="reset"
+                  IsVisible="{Binding HasSelectedDate}"
+                  Command="{Binding ShowAllCommand}"
+                  ToolTip.Tip="{Binding [Common.All], Source={x:Static svc:Localizer.Instance}}">
+            <StackPanel Orientation="Horizontal" Spacing="6">
+              <TextBlock Text="{Binding SelectedDateLabel}" FontSize="{StaticResource FontSizeSm}"
+                         VerticalAlignment="Center" />
+              <Path Classes="lucide" Data="{StaticResource IconClose}"
+                    Stroke="{StaticResource TextSecondaryBrush}" Width="10" Height="10"
+                    VerticalAlignment="Center" />
+            </StackPanel>
+          </Button>
+
+          <Button Grid.Column="5" Classes="nav" Padding="8,6" Margin="4,0,0,0"
+                  Command="{Binding ToggleExpandedCommand}"
+                  ToolTip.Tip="{Binding [Calendar.ToggleMonth], Source={x:Static svc:Localizer.Instance}}">
+            <Path Classes="lucide chevron" Classes.up="{Binding IsExpanded}"
+                  Data="{StaticResource IconChevronDown}"
+                  RenderTransformOrigin="50%,50%"
+                  Stroke="{StaticResource TextSecondaryBrush}" Width="14" Height="14" />
+          </Button>
+        </Grid>
+
+        <UniformGrid Columns="7">
+          <TextBlock Text="{Binding [Calendar.Mon], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+          <TextBlock Text="{Binding [Calendar.Tue], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+          <TextBlock Text="{Binding [Calendar.Wed], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+          <TextBlock Text="{Binding [Calendar.Thu], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+          <TextBlock Text="{Binding [Calendar.Fri], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+          <TextBlock Text="{Binding [Calendar.Sat], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+          <TextBlock Text="{Binding [Calendar.Sun], Source={x:Static svc:Localizer.Instance}}" HorizontalAlignment="Center" FontSize="10" Foreground="{StaticResource TextTertiaryBrush}" />
+        </UniformGrid>
+
+        <ItemsControl ItemsSource="{Binding WeekDays}" ItemTemplate="{StaticResource DayCell}"
+                      IsVisible="{Binding !IsExpanded}">
+          <ItemsControl.ItemsPanel>
+            <ItemsPanelTemplate>
+              <UniformGrid Columns="7" />
+            </ItemsPanelTemplate>
+          </ItemsControl.ItemsPanel>
+        </ItemsControl>
+        <ItemsControl ItemsSource="{Binding Days}" ItemTemplate="{StaticResource DayCell}"
+                      IsVisible="{Binding IsExpanded}">
+          <ItemsControl.ItemsPanel>
+            <ItemsPanelTemplate>
+              <UniformGrid Columns="7" />
+            </ItemsPanelTemplate>
+          </ItemsControl.ItemsPanel>
+        </ItemsControl>
+
+        <!-- Month total, or the jump to the nearest month with recordings. -->
+        <Panel HorizontalAlignment="Center">
+          <TextBlock Text="{Binding MonthSummary}"
+                     IsVisible="{Binding !HasNearestMonth}"
+                     FontSize="{StaticResource FontSizeSm}"
+                     Foreground="{StaticResource TextTertiaryBrush}" />
+          <Button Classes="nav" Padding="6,0"
+                  IsVisible="{Binding HasNearestMonth}"
+                  Command="{Binding JumpToNearestMonthCommand}"
+                  FontSize="{StaticResource FontSizeSm}"
+                  Foreground="{StaticResource AccentBrush}"
+                  Content="{Binding NearestMonthLabel}" />
+        </Panel>
+
+      </StackPanel>
+    </Border>
+
+  </Panel>
 
 </UserControl>
diff --git a/src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml.cs b/src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml.cs
index e127e11..360e980 100644
--- a/src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml.cs
+++ b/src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml.cs
@@ -1,8 +1,28 @@
+using Avalonia;
 using Avalonia.Controls;
 
 namespace OpenIPC.Viewer.App.Views.Pages;
 
 public sealed partial class ArchiveCalendarView : UserControl
 {
+    // Phone layout: a full-width card with a week strip that expands to the
+    // month, instead of the fixed 240px month column. Set by the host page's
+    // compact style; surfaces as the :compact pseudo-class.
+    public static readonly StyledProperty<bool> IsCompactProperty =
+        AvaloniaProperty.Register<ArchiveCalendarView, bool>(nameof(IsCompact));
+
+    public bool IsCompact
+    {
+        get => GetValue(IsCompactProperty);
+        set => SetValue(IsCompactProperty, value);
+    }
+
     public ArchiveCalendarView() => InitializeComponent();
+
+    protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs change)
+    {
+        base.OnPropertyChanged(change);
+        if (change.Property == IsCompactProperty)
+            PseudoClasses.Set(":compact", IsCompact);
+    }
 }
diff --git a/src/OpenIPC.Viewer.App/Views/Pages/CameraLibraryPage.axaml b/src/OpenIPC.Viewer.App/Views/Pages/CameraLibraryPage.axaml
index 7204bf3..202eade 100644
--- a/src/OpenIPC.Viewer.App/Views/Pages/CameraLibraryPage.axaml
+++ b/src/OpenIPC.Viewer.App/Views/Pages/CameraLibraryPage.axaml
@@ -9,23 +9,65 @@
 
   <UserControl.Styles>
     <!-- Wide: host and layouts get their own aligned columns. Compact (<700px):
-         those columns drop and the host moves under the camera name; the header
-         actions wrap below the search row. -->
-    <Style Selector="Grid.compact TextBlock.wide-only">
+         those columns drop and the host moves under the camera name. The header
+         has its own, wider breakpoint (it needs ~880px on one line). -->
+    <Style Selector="Grid.compact :is(Control).wide-only">
       <Setter Property="IsVisible" Value="False" />
     </Style>
-    <Style Selector="TextBlock.compact-only">
+    <Style Selector=":is(Control).compact-only">
       <Setter Property="IsVisible" Value="False" />
     </Style>
-    <Style Selector="Grid.compact TextBlock.compact-only">
+    <Style Selector="Grid.compact :is(Control).compact-only">
       <Setter Property="IsVisible" Value="True" />
     </Style>
+
+    <!-- Header. Wide: title, then [search · group · tag · refresh] on the left
+         and the add actions on the right. Compact: the add actions join the
+         title row (icon-only "find"), search takes a full-width row and the
+         group filter stretches beside the tag / refresh buttons.
+         Everything that moves is placed by styles only — a local Grid.Row /
+         Column / Margin would outrank the compact setters. -->
+    <Style Selector="StackPanel.header-actions">
+      <Setter Property="Grid.Row" Value="1" />
+      <Setter Property="Margin" Value="16,12,0,0" />
+      <Setter Property="VerticalAlignment" Value="Top" />
+    </Style>
     <Style Selector="Grid.compact StackPanel.header-actions">
+      <Setter Property="Grid.Row" Value="0" />
+      <Setter Property="Margin" Value="8,0,0,0" />
+      <Setter Property="VerticalAlignment" Value="Center" />
+    </Style>
+    <Style Selector="Grid.filters">
+      <Setter Property="HorizontalAlignment" Value="Left" />
+    </Style>
+    <Style Selector="Grid.compact Grid.filters">
+      <Setter Property="Grid.ColumnSpan" Value="2" />
+      <Setter Property="HorizontalAlignment" Value="Stretch" />
+    </Style>
+    <Style Selector="Grid.filters > TextBox">
+      <Setter Property="Width" Value="240" />
+    </Style>
+    <Style Selector="Grid.compact Grid.filters > TextBox">
+      <Setter Property="Width" Value="NaN" />
+      <Setter Property="Grid.ColumnSpan" Value="4" />
+    </Style>
+    <Style Selector="Grid.filters > ComboBox">
+      <Setter Property="Grid.Column" Value="1" />
+      <Setter Property="Margin" Value="8,0,0,0" />
+    </Style>
+    <Style Selector="Grid.compact Grid.filters > ComboBox">
       <Setter Property="Grid.Row" Value="1" />
       <Setter Property="Grid.Column" Value="0" />
-      <Setter Property="HorizontalAlignment" Value="Left" />
+      <Setter Property="HorizontalAlignment" Value="Stretch" />
       <Setter Property="Margin" Value="0,8,0,0" />
     </Style>
+    <Style Selector="Grid.filters > Button">
+      <Setter Property="Margin" Value="8,0,0,0" />
+    </Style>
+    <Style Selector="Grid.compact Grid.filters > Button">
+      <Setter Property="Grid.Row" Value="1" />
+      <Setter Property="Margin" Value="8,8,0,0" />
+    </Style>
 
     <Style Selector="Border.camera-row">
       <Setter Property="Background" Value="Transparent" />
@@ -47,80 +89,91 @@
 
   <Grid RowDefinitions="Auto,Auto,*,Auto" b:Adaptive.CompactBelow="700">
 
-    <!-- Header: title, then search + group filter on the left and the add
-         actions on the right (wrapping below on a narrow viewport). -->
-    <StackPanel Grid.Row="0" Spacing="12" Margin="0,0,0,12">
+    <!-- Header: title, filters and add actions (see the header styles above
+         for the wide / compact placement). -->
+    <Grid Grid.Row="0" ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto" Margin="0,0,0,12"
+          b:Adaptive.CompactBelow="900">
       <TextBlock Text="{Binding [Library.Title], Source={x:Static svc:Localizer.Instance}}"
                  FontSize="{StaticResource FontSizeXl}"
                  FontWeight="SemiBold"
+                 VerticalAlignment="Center"
+                 TextTrimming="CharacterEllipsis"
                  Foreground="{StaticResource TextPrimaryBrush}" />
-      <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto">
-        <WrapPanel Grid.Column="0" Orientation="Horizontal" ItemSpacing="8" LineSpacing="8">
-          <TextBox Text="{Binding SearchText, Mode=TwoWay}"
-                   Classes="clearButton"
-                   Width="240"
-                   VerticalContentAlignment="Center"
-                   PlaceholderText="{Binding [Library.SearchPlaceholder], Source={x:Static svc:Localizer.Instance}}">
-            <TextBox.InnerLeftContent>
-              <Path Classes="lucide" Data="{StaticResource IconSearch}"
-                    Stroke="{StaticResource TextTertiaryBrush}"
-                    Width="14" Height="14" Margin="10,0,0,0" VerticalAlignment="Center" />
-            </TextBox.InnerLeftContent>
-          </TextBox>
-          <ComboBox ItemsSource="{Binding AvailableGroups}"
-                    SelectedItem="{Binding SelectedGroupFilter, Mode=TwoWay}"
-                    MinWidth="150"
-                    VerticalAlignment="Center"
-                    PlaceholderText="{Binding [Library.AllGroups], Source={x:Static svc:Localizer.Instance}}">
-            <ComboBox.ItemTemplate>
-              <DataTemplate>
-                <TextBlock Text="{Binding Name, FallbackValue='', TargetNullValue=''}" />
-              </DataTemplate>
-            </ComboBox.ItemTemplate>
-          </ComboBox>
-          <Button Classes="header"
-                  Command="{Binding ManageGroupsCommand}"
-                  ToolTip.Tip="{Binding [Library.Tooltip.ManageGroups], Source={x:Static svc:Localizer.Instance}}">
-            <Path Classes="lucide" Data="{StaticResource IconTag}"
-                  Stroke="{StaticResource TextPrimaryBrush}" Width="16" Height="16" />
-          </Button>
-          <Button Classes="header"
-                  Command="{Binding RefreshCommand}"
-                  ToolTip.Tip="{Binding [Library.Tooltip.Refresh], Source={x:Static svc:Localizer.Instance}}">
-            <Path Classes="lucide" Data="{StaticResource IconRefresh}"
-                  Stroke="{StaticResource TextPrimaryBrush}" Width="16" Height="16" />
-          </Button>
-        </WrapPanel>
 
-        <StackPanel Grid.Column="1" Classes="header-actions"
-                    Orientation="Horizontal" Spacing="8" VerticalAlignment="Top">
-          <Button Classes="header" Command="{Binding DiscoverCameraCommand}">
-            <StackPanel Orientation="Horizontal" Spacing="6">
-              <Path Classes="lucide" Data="{StaticResource IconRadar}"
-                    Stroke="{StaticResource TextPrimaryBrush}"
-                    Width="16" Height="16" VerticalAlignment="Center" />
-              <TextBlock Text="{Binding [Library.FindOnNetwork], Source={x:Static svc:Localizer.Instance}}"
-                         VerticalAlignment="Center" />
-            </StackPanel>
-          </Button>
-          <Button Classes="header"
-                  Command="{Binding ScanQrCommand}"
-                  ToolTip.Tip="{Binding [Library.ScanQr], Source={x:Static svc:Localizer.Instance}}">
-            <Path Classes="lucide" Data="{StaticResource IconQr}"
-                  Stroke="{StaticResource TextPrimaryBrush}" Width="16" Height="16" />
-          </Button>
-          <Button Command="{Binding AddCameraCommand}"
-                  Padding="12,7"
-                  Background="{StaticResource AccentBrush}"
-                  Foreground="White"
-                  CornerRadius="8"
-                  VerticalAlignment="Center">
-            <TextBlock Text="{Binding [Common.AddCamera], Source={x:Static svc:Localizer.Instance}}"
-                       VerticalAlignment="Center" />
-          </Button>
-        </StackPanel>
+      <Grid Grid.Row="1" Classes="filters" Margin="0,12,0,0"
+            ColumnDefinitions="*,Auto,Auto,Auto" RowDefinitions="Auto,Auto">
+        <TextBox Text="{Binding SearchText, Mode=TwoWay}"
+                 Classes="clearButton"
+                 VerticalContentAlignment="Center"
+                 PlaceholderText="{Binding [Library.SearchPlaceholder], Source={x:Static svc:Localizer.Instance}}">
+          <TextBox.InnerLeftContent>
+            <Path Classes="lucide" Data="{StaticResource IconSearch}"
+                  Stroke="{StaticResource TextTertiaryBrush}"
+                  Width="14" Height="14" Margin="10,0,0,0" VerticalAlignment="Center" />
+          </TextBox.InnerLeftContent>
+        </TextBox>
+        <ComboBox ItemsSource="{Binding AvailableGroups}"
+                  SelectedItem="{Binding SelectedGroupFilter, Mode=TwoWay}"
+                  MinWidth="150"
+                  VerticalAlignment="Center"
+                  PlaceholderText="{Binding [Library.AllGroups], Source={x:Static svc:Localizer.Instance}}">
+          <ComboBox.ItemTemplate>
+            <DataTemplate>
+              <TextBlock Text="{Binding Name, FallbackValue='', TargetNullValue=''}" />
+            </DataTemplate>
+          </ComboBox.ItemTemplate>
+        </ComboBox>
+        <Button Grid.Column="2" Classes="header"
+                Command="{Binding ManageGroupsCommand}"
+                ToolTip.Tip="{Binding [Library.Tooltip.ManageGroups], Source={x:Static svc:Localizer.Instance}}">
+          <Path Classes="lucide" Data="{StaticResource IconTag}"
+                Stroke="{StaticResource TextPrimaryBrush}" Width="16" Height="16" />
+        </Button>
+        <Button Grid.Column="3" Classes="header"
+                Command="{Binding RefreshCommand}"
+                ToolTip.Tip="{Binding [Library.Tooltip.Refresh], Source={x:Static svc:Localizer.Instance}}">
+          <Path Classes="lucide" Data="{StaticResource IconRefresh}"
+                Stroke="{StaticResource TextPrimaryBrush}" Width="16" Height="16" />
+        </Button>
       </Grid>
-    </StackPanel>
+
+      <StackPanel Grid.Column="1" Classes="header-actions" Orientation="Horizontal" Spacing="8">
+        <Button Classes="header" Command="{Binding DiscoverCameraCommand}"
+                ToolTip.Tip="{Binding [Library.FindOnNetwork], Source={x:Static svc:Localizer.Instance}}">
+          <StackPanel Orientation="Horizontal" Spacing="6">
+            <Path Classes="lucide" Data="{StaticResource IconRadar}"
+                  Stroke="{StaticResource TextPrimaryBrush}"
+                  Width="16" Height="16" VerticalAlignment="Center" />
+            <TextBlock Classes="wide-only" VerticalAlignment="Center"
+                       Text="{Binding [Library.FindOnNetwork], Source={x:Static svc:Localizer.Instance}}" />
+          </StackPanel>
+        </Button>
+        <Button Classes="header"
+                Command="{Binding ScanQrCommand}"
+                ToolTip.Tip="{Binding [Library.ScanQr], Source={x:Static svc:Localizer.Instance}}">
+          <Path Classes="lucide" Data="{StaticResource IconQr}"
+                Stroke="{StaticResource TextPrimaryBrush}" Width="16" Height="16" />
+        </Button>
+        <Button Command="{Binding AddCameraCommand}"
+                Padding="12,7"
+                Background="{StaticResource AccentBrush}"
+                Foreground="White"
+                CornerRadius="8"
+                VerticalAlignment="Stretch"
+                VerticalContentAlignment="Center">
+          <Panel>
+            <TextBlock Classes="wide-only" VerticalAlignment="Center"
+                       Text="{Binding [Common.AddCamera], Source={x:Static svc:Localizer.Instance}}" />
+            <StackPanel Classes="compact-only" Orientation="Horizontal" Spacing="6">
+              <Path Classes="lucide" Data="{StaticResource IconPlus}"
+                    Stroke="White" StrokeThickness="2.2" Width="14" Height="14" VerticalAlignment="Center" />
+              <TextBlock VerticalAlignment="Center"
+                         Text="{Binding [Library.AddShort], Source={x:Static svc:Localizer.Instance}}" />
+            </StackPanel>
+          </Panel>
+        </Button>
+      </StackPanel>
+    </Grid>
 
     <!-- Status filter chips with live counters. -->
     <WrapPanel Grid.Row="1" Orientation="Horizontal" ItemSpacing="6" LineSpacing="6"
diff --git a/src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml b/src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml
index a4a7380..222042b 100644
--- a/src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml
+++ b/src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml
@@ -28,6 +28,61 @@
       <Setter Property="Margin" Value="16,10,16,14" />
     </Style>
 
+    <!-- Narrow controls: a clock row under the timeline, the transport centred
+         on its own, then one row of equal pills (sound · speed · clip) instead
+         of the desktop's slider + speed segment + chip mix. The clip bar's
+         Cancel / Save drop under its bounds. -->
+    <Style Selector=":is(Control).compact-only">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="StackPanel.controls.compact :is(Control).compact-only">
+      <Setter Property="IsVisible" Value="True" />
+    </Style>
+    <Style Selector="StackPanel.controls.compact :is(Control).wide-only">
+      <Setter Property="IsVisible" Value="False" />
+    </Style>
+    <Style Selector="StackPanel.controls.compact WrapPanel.transportbar">
+      <Setter Property="HorizontalAlignment" Value="Center" />
+    </Style>
+    <Style Selector="StackPanel.clipactions">
+      <Setter Property="Grid.Column" Value="1" />
+      <Setter Property="Margin" Value="8,0,0,0" />
+    </Style>
+    <Style Selector="StackPanel.controls.compact StackPanel.clipactions">
+      <Setter Property="Grid.Row" Value="1" />
+      <Setter Property="Grid.Column" Value="0" />
+      <Setter Property="HorizontalAlignment" Value="Right" />
+      <Setter Property="Margin" Value="0,10,0,0" />
+    </Style>
+
+    <!-- Equal-height pill for the phone tool row (Button and ToggleButton). -->
+    <Style Selector=":is(Button).pill">
+      <Setter Property="Background" Value="{StaticResource Bg2Brush}" />
+      <Setter Property="BorderBrush" Value="{StaticResource BorderMediumBrush}" />
+      <Setter Property="BorderThickness" Value="1" />
+      <Setter Property="CornerRadius" Value="999" />
+      <Setter Property="Height" Value="36" />
+      <Setter Property="MinWidth" Value="52" />
+      <Setter Property="Padding" Value="14,0" />
+      <Setter Property="HorizontalContentAlignment" Value="Center" />
+      <Setter Property="VerticalContentAlignment" Value="Center" />
+      <Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
+      <Setter Property="FontSize" Value="{StaticResource FontSizeSm}" />
+    </Style>
+    <Style Selector=":is(Button).pill:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{StaticResource Bg3Brush}" />
+      <Setter Property="BorderBrush" Value="{StaticResource BorderMediumBrush}" />
+      <Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
+    </Style>
+    <Style Selector=":is(Button).pill:pressed /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{StaticResource Bg3Brush}" />
+    </Style>
+    <Style Selector="ToggleButton.pill:checked /template/ ContentPresenter#PART_ContentPresenter">
+      <Setter Property="Background" Value="{StaticResource AccentTintBrush}" />
+      <Setter Property="BorderBrush" Value="{StaticResource AccentBrush}" />
+      <Setter Property="Foreground" Value="{StaticResource TextPrimaryBrush}" />
+    </Style>
+
     <Style Selector="Button.outline">
       <Setter Property="Background" Value="Transparent" />
       <Setter Property="BorderBrush" Value="{StaticResource BorderMediumBrush}" />
@@ -358,7 +413,7 @@
     </Grid>
 
     <!-- Timeline + transport + clip bar -->
-    <StackPanel Grid.Row="2" Classes="controls" Spacing="10">
+    <StackPanel Grid.Row="2" Classes="controls" Spacing="10" b:Adaptive.CompactBelow="620">
 
       <!-- Canvas timeline: segments + motion/detection markers, wheel-zoom to
            cursor, click/marker-tap to seek, drag to select a clip (16.4). -->
@@ -376,9 +431,22 @@
                                 PlayheadBrush="{StaticResource AccentBrush}"
                                 LabelBrush="{StaticResource TextSecondaryBrush}" />
 
+      <Grid Classes="compact-only" ColumnDefinitions="*,Auto" Margin="2,0">
+        <TextBlock Text="{Binding WallClockLabel}"
+                   FontFamily="{StaticResource FontMono}"
+                   FontSize="18" FontWeight="SemiBold"
+                   VerticalAlignment="Center"
+                   Foreground="{StaticResource TextPrimaryBrush}" />
+        <TextBlock Grid.Column="1" Text="{Binding ProgressLabel}"
+                   FontFamily="{StaticResource FontMono}"
+                   FontSize="{StaticResource FontSizeSm}"
+                   VerticalAlignment="Center"
+                   Foreground="{StaticResource TextTertiaryBrush}" />
+      </Grid>
+
       <!-- Transport: −10 · ▶ · +10 · wall clock | speed · clip.
            WrapPanel so the right cluster drops below on a narrow viewport. -->
-      <WrapPanel Orientation="Horizontal" ItemSpacing="24" LineSpacing="10">
+      <WrapPanel Classes="transportbar" Orientation="Horizontal" ItemSpacing="24" LineSpacing="10">
         <StackPanel Orientation="Horizontal" Spacing="6">
           <Button Classes="transport" Command="{Binding SkipBackCommand}"
                   AutomationProperties.Name="{Binding [Player.SkipBack], Source={x:Static svc:Localizer.Instance}}"
@@ -425,7 +493,7 @@
             </Panel>
           </Button>
 
-          <StackPanel Spacing="0" Margin="10,0,0,0" VerticalAlignment="Center">
+          <StackPanel Classes="wide-only" Spacing="0" Margin="10,0,0,0" VerticalAlignment="Center">
             <TextBlock Text="{Binding WallClockLabel}"
                        FontFamily="{StaticResource FontMono}"
                        FontSize="20" FontWeight="SemiBold"
@@ -437,7 +505,7 @@
           </StackPanel>
         </StackPanel>
 
-        <StackPanel Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">
+        <StackPanel Classes="wide-only" Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">
           <!-- Sound (1x only): mute + volume, shared with the live page. -->
           <StackPanel Orientation="Horizontal" Spacing="6" VerticalAlignment="Center"
                       IsVisible="{Binding CanListen}">
@@ -491,13 +559,50 @@
         </StackPanel>
       </WrapPanel>
 
+      <!-- Phone tool row: sound (volume = the hardware keys) · speed menu · clip. -->
+      <StackPanel Classes="compact-only" Orientation="Horizontal" Spacing="10"
+                  HorizontalAlignment="Center">
+        <Button Classes="pill" Command="{Binding ToggleMuteCommand}"
+                IsVisible="{Binding CanListen}"
+                AutomationProperties.Name="{Binding [Player.Mute], Source={x:Static svc:Localizer.Instance}}"
+                ToolTip.Tip="{Binding [Player.Mute], Source={x:Static svc:Localizer.Instance}}">
+          <Panel Width="18" Height="18">
+            <Path Classes="lucide" Data="{StaticResource IconVolume}"
+                  Stroke="{StaticResource TextPrimaryBrush}" Width="18" VerticalAlignment="Center"
+                  IsVisible="{Binding !IsMuted}" />
+            <Path Classes="lucide" Data="{StaticResource IconVolumeMuted}"
+                  Stroke="{StaticResource TextSecondaryBrush}" Width="18" VerticalAlignment="Center"
+                  IsVisible="{Binding IsMuted}" />
+          </Panel>
+        </Button>
+        <Button Classes="pill" Click="OnSpeedClick"
+                AutomationProperties.Name="{Binding [Player.Speed], Source={x:Static svc:Localizer.Instance}}"
+                ToolTip.Tip="{Binding [Player.Speed], Source={x:Static svc:Localizer.Instance}}">
+          <StackPanel Orientation="Horizontal" Spacing="6">
+            <TextBlock Text="{Binding RateLabel}" FontFamily="{StaticResource FontMono}"
+                       VerticalAlignment="Center" />
+            <Path Classes="lucide" Data="{StaticResource IconChevronDown}"
+                  Stroke="{StaticResource TextSecondaryBrush}" Width="12" Height="12"
+                  VerticalAlignment="Center" />
+          </StackPanel>
+        </Button>
+        <ToggleButton Classes="pill" IsChecked="{Binding IsClipMode, Mode=TwoWay}"
+                      ToolTip.Tip="{Binding [Player.Clip.Tooltip], Source={x:Static svc:Localizer.Instance}}">
+          <StackPanel Orientation="Horizontal" Spacing="6">
+            <Path Classes="lucide" Data="{StaticResource IconScissors}"
+                  Stroke="{StaticResource TextPrimaryBrush}" Width="14" Height="14" VerticalAlignment="Center" />
+            <TextBlock Text="{Binding [Player.Clip], Source={x:Static svc:Localizer.Instance}}" VerticalAlignment="Center" />
+          </StackPanel>
+        </ToggleButton>
+      </StackPanel>
+
       <!-- Clip bar (16.5): bounds from the playhead or a timeline drag,
            fast (keyframe) or precise (re-encode) cut, save. -->
       <Border IsVisible="{Binding IsClipMode}"
               Background="{StaticResource Bg1Brush}"
               BorderBrush="{StaticResource BorderWeakBrush}" BorderThickness="1"
               CornerRadius="8" Padding="10,8">
-        <Grid ColumnDefinitions="*,Auto">
+        <Grid ColumnDefinitions="*,Auto" RowDefinitions="Auto,Auto">
           <WrapPanel Grid.Column="0" Orientation="Horizontal" ItemSpacing="8" LineSpacing="8" VerticalAlignment="Center">
             <Button Classes="outline" Padding="10,5" FontSize="{StaticResource FontSizeSm}"
                     Command="{Binding SetInCommand}"
@@ -514,7 +619,7 @@
             <ProgressBar Width="120" Minimum="0" Maximum="1" Value="{Binding ExportFraction}"
                          IsVisible="{Binding IsExporting}" VerticalAlignment="Center" />
           </WrapPanel>
-          <StackPanel Grid.Column="1" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center" Margin="8,0,0,0">
+          <StackPanel Classes="clipactions" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
             <Button Command="{Binding CancelClipCommand}"
                     Content="{Binding [Common.Cancel], Source={x:Static svc:Localizer.Instance}}"
                     Background="Transparent" BorderThickness="0" CornerRadius="6" Padding="10,5"
diff --git a/src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml.cs b/src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml.cs
index 78922c7..ff0667e 100644
--- a/src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml.cs
+++ b/src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml.cs
@@ -1,6 +1,7 @@
 using System;
 using System.Threading;
 using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
 using Avalonia.Input;
 using Avalonia.Interactivity;
 using OpenIPC.Viewer.App.ViewModels;
@@ -103,4 +104,23 @@ private void OnWindowKeyDown(object? sender, KeyEventArgs e)
         }
         e.Handled = true;
     }
+
+    // Phone speed pill: the rates as a one-tap menu above the button.
+    private void OnSpeedClick(object? sender, RoutedEventArgs e)
+    {
+        if (sender is not Control anchor || Vm is not { } vm) return;
+        var menu = new MenuFlyout { Placement = PlacementMode.Top };
+        foreach (var option in vm.RateOptions)
+        {
+            menu.Items.Add(new MenuItem
+            {
+                Header = option.Label,
+                ToggleType = MenuItemToggleType.Radio,
+                IsChecked = option.IsActive,
+                Command = vm.SetRateCommand,
+                CommandParameter = option.Parameter,
+            });
+        }
+        menu.ShowAt(anchor);
+    }
 }
diff --git a/src/OpenIPC.Viewer.App/Views/Pages/RecordingsPage.axaml b/src/OpenIPC.Viewer.App/Views/Pages/RecordingsPage.axaml
index b43c4c9..5945993 100644
--- a/src/OpenIPC.Viewer.App/Views/Pages/RecordingsPage.axaml
+++ b/src/OpenIPC.Viewer.App/Views/Pages/RecordingsPage.axaml
@@ -11,10 +11,16 @@
 
   <UserControl.Styles>
     <!-- Narrow viewport: the activity calendar drops from the left column to a
-         band above the list so the list keeps the full width instead of being
-         crushed into ~80px next to a fixed 240px calendar. Size also drops. -->
+         full-width card above the list (a week strip that expands to the
+         month) so the list keeps the width and most of the height. Margin
+         lives in styles only: a local value would outrank the compact one. -->
+    <Style Selector="DockPanel &gt; pages|ArchiveCalendarView">
+      <Setter Property="Margin" Value="0,0,16,16" />
+    </Style>
     <Style Selector="DockPanel.compact &gt; pages|ArchiveCalendarView">
       <Setter Property="(DockPanel.Dock)" Value="Top" />
+      <Setter Property="IsCompact" Value="True" />
+      <Setter Property="Margin" Value="0,0,0,12" />
     </Style>
     <Style Selector="DockPanel.compact TextBlock.wide-only">
       <Setter Property="IsVisible" Value="False" />
@@ -86,10 +92,9 @@
     <DockPanel Grid.Row="1" IsVisible="{Binding ShowRecordings}"
                b:Adaptive.CompactBelow="620" LastChildFill="True">
 
-      <!-- Activity calendar. Default Dock is Left; trailing margin works for
-           both orientations. -->
+      <!-- Activity calendar. Default Dock is Left; dock, margin and the phone
+           layout come from the styles above. -->
       <pages:ArchiveCalendarView DataContext="{Binding Calendar}"
-                                 Margin="0,0,16,16"
                                  VerticalAlignment="Top" />
 
       <Grid RowDefinitions="Auto,*,Auto">