From 975ed08c82c3b6bfec8eb866353e0d0652339629 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Thu, 15 Oct 2026 03:29:26 +0200
Subject: [PATCH] fix: keep every thread toolbar button on screen, icon-only in
 landscape

---
 src/screens/EmailThreadScreen.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/screens/EmailThreadScreen.tsx b/src/screens/EmailThreadScreen.tsx
index 1c994aa6..5a93f6e7 100644
--- a/src/screens/EmailThreadScreen.tsx
+++ b/src/screens/EmailThreadScreen.tsx
@@ -36,6 +36,7 @@ import { shareEmailEml } from '../lib/email-export';
 import { useKeywordsStore, keywordToken, type KeywordDef } from '../stores/keywords-store';
 import { useSheetDrag } from '../lib/use-sheet-drag';
 import { useKeyboardObstruction } from '../lib/use-keyboard-obstruction';
+import { useLayout } from '../lib/use-layout';
 import { useLocaleStore } from '../stores/locale-store';
 import {
   findArchiveMailbox, findTrashMailbox, mailboxAccountId, mailboxesOfAccount, mailboxOfEmail,
@@ -1562,7 +1563,10 @@ function ToolbarButton({
 }: { icon: React.ReactNode; label: string; onPress?: () => void }) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
-  const showLabels = useSettingsStore((s) => s.showToolbarLabels);
+  // Icons only in a short (landscape) window, which leaves room for the message.
+  const labelsSetting = useSettingsStore((s) => s.showToolbarLabels);
+  const { shortHeight } = useLayout();
+  const showLabels = labelsSetting && !shortHeight;
   return (
     <Pressable
       onPress={onPress}
@@ -1571,7 +1575,7 @@ function ToolbarButton({
       accessibilityLabel={label}
     >
       {icon}
-      {showLabels && <Text style={styles.toolbarActionLabel}>{label}</Text>}
+      {showLabels && <Text style={styles.toolbarActionLabel} numberOfLines={1}>{label}</Text>}
     </Pressable>
   );
 }
@@ -1581,7 +1585,10 @@ function BottomBarButton({
 }: { icon: React.ReactNode; label: string; onPress?: () => void; disabled?: boolean }) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
-  const showLabels = useSettingsStore((s) => s.showToolbarLabels);
+  // Icons only in a short (landscape) window, which leaves room for the message.
+  const labelsSetting = useSettingsStore((s) => s.showToolbarLabels);
+  const { shortHeight } = useLayout();
+  const showLabels = labelsSetting && !shortHeight;
   return (
     <Pressable
       onPress={disabled ? undefined : onPress}
@@ -1623,11 +1630,16 @@ function makeStyles(c: ThemePalette) {
     borderRadius: radius.full,
   },
   toolbarEmbedded: { justifyContent: 'flex-end' },
+  // The actions shrink (labels truncate) rather than push "More" off a
+  // narrow screen, as long German labels at a large font did.
   toolbarActions: {
     flexDirection: 'row',
     alignItems: 'center',
+    flexShrink: 1,
   },
   toolbarAction: {
+    flexShrink: 1,
+    minWidth: 48,
     alignItems: 'center',
     justifyContent: 'center',
     gap: 2,