From 0b237b195149b2e174d2516edceab3e259cf44b7 Mon Sep 17 00:00:00 2001 From: thepra Date: Tue, 6 Oct 2026 23:13:23 +0200 Subject: [PATCH] A card's actions fit a phone On a phone the card's action row was about 371px wide against a 228px text column, so the feed scrolled sideways and More and Expand fell off the screen. Below md the author's picture moves from its own column into the card's header, which gives the text, media and polls the whole width (288px at 360), and the actions are five equal cells: Reply, Boost, Favourite, React and More. Bookmark and the thread are entries in More there; the downvotes, the counts icon and Expand show from md. Counts are compacted on phones (1.2k, 12k, 1.2M, GenericExtensions.Compact). React and More open as sheets from the bottom of the screen, the reactions as a grid of four. The author's name and handle stack and are 14px, the place badge is narrower, and "edited" and the booster's name have 44px hit areas; the booster's name opens their profile in the app instead of their site. On touch the extra small buttons' text is 14px, and their hit area is a full 44px (the ::after sits against the padding box, inside the border). Desktop keeps its row. Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw --- Components/Content.razor | 92 ++++++++++++++++++++++----------- Extensions/GenericExtensions.cs | 9 ++++ Styles/touch.css | 26 +++++++++- 3 files changed, 95 insertions(+), 32 deletions(-) diff --git a/Components/Content.razor b/Components/Content.razor index 85298aa..92c3f47 100644 --- a/Components/Content.razor +++ b/Components/Content.razor @@ -21,7 +21,7 @@ @if (Author is { } author) { -
@* alt="": the author's name is next to it. *@ @@ -31,7 +31,7 @@
} -
+
@if (Post.Notification is { } notification) { @@ -55,7 +55,7 @@ {

- @CustomEmojis.Text(booster.Name, booster.Emojis) + @CustomEmojis.Text(booster.Name, booster.Emojis) @Localizer["boosted"]

} @@ -79,11 +79,19 @@ @if (Status is { } status) { -
- - +
+ @if (Author is { } phoneAuthor) + { + + @* alt="": the author's name is next to it. *@ + + + } + + @CustomEmojis.Text(status.Account?.Name, status.Account?.Emojis ?? []) - @("@" + status.Account?.Acct) + @("@" + status.Account?.Acct) @@ -91,7 +99,7 @@ { - + @fronted.Label @@ -100,7 +108,7 @@ else if (Post.Location is { } location) { - + @(location.Label ?? Localizer["Near you"]) @@ -112,7 +120,7 @@ @if (status.EditedAt is not null) { - } @@ -220,59 +228,65 @@ @if (!Post.Located && !Compact) { -