From 504888b359a5044a33e4285295b2ca36ab7f104e Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Mon, 22 Jun 2026 18:08:54 +0200
Subject: [PATCH] Show the subtitle of the app bar on small screens

Previously we were hiding the entire app bar on mobile phones in landscape orientation. However now that the app bar supports a small 'subtitle' element, we should show only the subtitle in this case to match the designs.

The subtitle still hides on tap, just like the footer.
---
 src/AppBar.module.css                    | 43 ++++++++++++++++++++++++
 src/state/CallViewModel/CallViewModel.ts |  2 +-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/AppBar.module.css b/src/AppBar.module.css
index b36a26239..1e82a7d18 100644
--- a/src/AppBar.module.css
+++ b/src/AppBar.module.css
@@ -67,6 +67,27 @@
     "subtitle subtitle subtitle";
 }
 
+/* Hide everything but the subtitle in small windows */
+@media (max-height: 450px) {
+  .bar {
+    display: none;
+    .title,
+    .primaryButton,
+    .secondaryButton {
+      display: none;
+    }
+  }
+
+  .bar:has(.subtitle) {
+    display: initial;
+    > header {
+      grid-template-columns: 1fr;
+      grid-template-rows: var(--cpd-space-5x) minmax(var(--cpd-space-5x), auto);
+      grid-template-areas: "." "subtitle";
+    }
+  }
+}
+
 .primaryButton {
   grid-area: primaryButton;
   justify-self: start;
@@ -141,4 +162,26 @@ body[data-platform="ios"] {
       display: none;
     }
   }
+
+  /* Hide everything but the subtitle in small windows */
+  @media (max-height: 450px) {
+    .bar {
+      display: none;
+    }
+
+    .bar:has(.subtitle) {
+      display: initial;
+      > header {
+        grid-template-rows: var(--cpd-space-4x) minmax(
+            var(--cpd-space-5x),
+            auto
+          );
+        grid-template-areas: "." "subtitle";
+      }
+    }
+
+    .subtitle {
+      color: var(--cpd-color-text-primary);
+    }
+  }
 }
diff --git a/src/state/CallViewModel/CallViewModel.ts b/src/state/CallViewModel/CallViewModel.ts
index 505b29e1e..378fe18ae 100644
--- a/src/state/CallViewModel/CallViewModel.ts
+++ b/src/state/CallViewModel/CallViewModel.ts
@@ -1424,7 +1424,7 @@ export function createCallViewModel$(
     windowMode$.pipe(
       switchMap((mode) => {
         // In small windows the header would be too obstructive
-        if (mode === "pip" || mode === "flat") return of(false);
+        if (mode === "pip") return of(false);
         // In edge-to-edge layouts, couple the visibility of the header
         // to that of the footer
         return edgeToEdge$.pipe(