From 091ef34a5ea48b4dbb5aaaa0aec5df487447b2e5 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 3 Nov 2026 05:33:24 +0100
Subject: [PATCH] fix: keep the title in the phone notifications header

---
 components/notifications/notification-center.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/notifications/notification-center.tsx b/components/notifications/notification-center.tsx
index 34204bf66..5d7b88843 100644
--- a/components/notifications/notification-center.tsx
+++ b/components/notifications/notification-center.tsx
@@ -63,13 +63,15 @@ export function NotificationPanel({ onClose, className, sheet = false }: { onClo
       <div className="flex items-center gap-1 px-3 h-12 border-b border-border shrink-0">
         {/* Full screen on a phone it is a dialog of its own, titled like one. */}
         <h2 className={cn("flex-1 min-w-0 truncate font-semibold", sheet ? "text-lg" : "text-sm")}>{t("title")}</h2>
-        <Button variant="ghost" size="xs" onClick={markAllRead} disabled={unread === 0} className="gap-1 px-2 text-xs text-muted-foreground">
+        {/* On a phone the title keeps the room and the actions are icons: their
+            labels pushed the title out, and "Mark all as read" wrapped. */}
+        <Button variant="ghost" size="xs" onClick={markAllRead} disabled={unread === 0} className="gap-1 px-2 text-xs text-muted-foreground shrink-0" title={t("mark_all_read")}>
           <CheckCheck className="w-4 h-4" />
-          <span>{t("mark_all_read")}</span>
+          <span className={cn(sheet && "max-sm:sr-only")}>{t("mark_all_read")}</span>
         </Button>
-        <Button variant="ghost" size="xs" onClick={clear} disabled={entries.length === 0} className="gap-1 px-2 text-xs text-muted-foreground">
+        <Button variant="ghost" size="xs" onClick={clear} disabled={entries.length === 0} className="gap-1 px-2 text-xs text-muted-foreground shrink-0" title={t("clear")}>
           <Trash2 className="w-4 h-4" />
-          <span>{t("clear")}</span>
+          <span className={cn(sheet && "max-sm:sr-only")}>{t("clear")}</span>
         </Button>
         {sheet && (
           <IconButton size="icon-lg" label={t("close")} title="" onClick={onClose} className="text-muted-foreground">