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 1/3] 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(

From be5d8140c90056aae357f4c0d8b9ee59a7f2aa9a Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 23 Jun 2026 09:42:28 +0200
Subject: [PATCH 2/3] Make it clearer why the app bar elements need to be
 hidden individually

---
 src/AppBar.module.css | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/AppBar.module.css b/src/AppBar.module.css
index 1e82a7d18..7fcab0c69 100644
--- a/src/AppBar.module.css
+++ b/src/AppBar.module.css
@@ -71,15 +71,17 @@
 @media (max-height: 450px) {
   .bar {
     display: none;
+  }
+
+  .bar:has(.subtitle) {
+    display: initial;
+
     .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);

From a4b4a6b655ca3bc7ca8b74ae4eaddcc5e7346fd6 Mon Sep 17 00:00:00 2001
From: Robin <robin@robin.town>
Date: Tue, 23 Jun 2026 09:42:57 +0200
Subject: [PATCH 3/3] Remove redundant styles

---
 src/AppBar.module.css | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/AppBar.module.css b/src/AppBar.module.css
index 7fcab0c69..cc63854e7 100644
--- a/src/AppBar.module.css
+++ b/src/AppBar.module.css
@@ -167,19 +167,9 @@ body[data-platform="ios"] {
 
   /* 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";
-      }
+    .bar:has(.subtitle) > header {
+      grid-template-rows: var(--cpd-space-4x) minmax(var(--cpd-space-5x), auto);
+      grid-template-areas: "." "subtitle";
     }
 
     .subtitle {