The globe opens full screen; a phone held sideways keeps its feed

On a phone the globe is a banner above the feed; a tap on it now opens it full screen over everything, with a close
button (Escape closes it too), the focus moving to that button and back, and the feed underneath kept as it was but out
of reach (inert). The camera refits the new shape. Held sideways, a phone (a window at most 30rem tall, the new short:
variant) has no room for the banner: the banner and its toggle give way to a button that opens the globe full screen.
isMobileMedia, which picks the first visit's default, agrees with Tailwind's md now (it was off by one) and counts a
phone held sideways. GlobePanel tells its state (data-globe-state). Phone flows: the globe opens full screen and
closes, and a sideways phone keeps a feed at least 180px tall with no sideways scroll.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw

tests/e2e/Mobile/FlowTests.cs

@@ -182,6 +182,49 @@ namespace decePubClient.E2E.Mobile
 			});
 		}
 
+		[Fact]
+		public async Task The_globe_opens_full_screen_from_its_banner_and_closes()
+		{
+			await using var session = await SignIn.As(browser, Persona(), Phone);
+			await Flow(session, "globe", async page =>
+			{
+				await page.Locator("button[title='Globe']").TapAsync();
+				var expand = page.Locator("[data-globe-expand]");
+				await Assertions.Expect(expand).ToBeVisibleAsync();
+				await expand.TapAsync();
+				var full = page.Locator("aside[role=dialog]");
+				await Assertions.Expect(full).ToBeVisibleAsync();
+				var box = (await full.BoundingBoxAsync())!;
+				var size = page.ViewportSize!;
+				Assert.True(Math.Abs(box.Width - size.Width) < 2 && Math.Abs(box.Height - size.Height) < 2,
+					$"the globe is {box.Width}x{box.Height}, not the screen's {size.Width}x{size.Height}");
+				await AssertWhole(page, "aside[role=dialog]");
+				await page.Locator("[data-globe-close]").TapAsync();
+				await Assertions.Expect(full).ToHaveCountAsync(0);
+				await Assertions.Expect(expand).ToBeVisibleAsync();
+			});
+		}
+
+		// a phone held sideways keeps its feed: no banner squeezing it, the globe full screen from the tabs instead
+		[Fact]
+		public async Task A_phone_held_sideways_keeps_its_feed()
+		{
+			await using var session = await SignIn.As(browser, Persona(), Phone.Pixel7Landscape);
+			var page = session.Page;
+			await Results.Cell("client.mobile.flow.landscape", "privapub", Phone.Pixel7Landscape.Key, async () =>
+			{
+				Assert.False(await page.Locator("[data-globe-expand]").IsVisibleAsync(), "the globe's banner squeezes the feed");
+				var feedHeight = await page.EvaluateAsync<double>("() => document.getElementById('feed-scroll').clientHeight");
+				Assert.True(feedHeight >= 180, $"the feed is {feedHeight}px tall");
+				Assert.True(await page.EvaluateAsync<bool>("() => document.scrollingElement.scrollWidth <= innerWidth + 1"), "the page scrolls sideways");
+				await page.Locator("[data-globe-full]").TapAsync();
+				await Assertions.Expect(page.Locator("aside[role=dialog]")).ToBeVisibleAsync();
+				await page.Locator("[data-globe-close]").TapAsync();
+				await Assertions.Expect(page.Locator("aside[role=dialog]")).ToHaveCountAsync(0);
+				await session.AssertGuards();
+			}, page);
+		}
+
 		static async Task<JsonNode> Latest(Pasture.Persona persona) =>
 			(await PersonaApi.Call(persona, $"/api/v1/accounts/{persona.LocalId}/statuses?limit=1"))!.AsArray().FirstOrDefault();
 	}