From 245330bd689ec2b578c4dfd415ec4ae1fbc1fb03 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannesjo@users.noreply.github.com>
Date: Fri, 3 Jul 2026 23:36:05 +0200
Subject: [PATCH] fix(tasks): shorten reminder snooze button label to fit small
 screens (#8743)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The reminder dialog footer could not fit all actions in one row on small
screens. Show only the snooze duration (e.g. "10m") on the split-button's
main action instead of "Snooze 10m" — the snooze icon already conveys the
action — freeing horizontal space so the row fits.

Add a `mainLabel` input to the shared split-button so the abbreviated main
action keeps a full tooltip and aria-label for discoverability/accessibility.


Claude-Session: https://claude.ai/code/session_015797BREShEaTkBsA3tRBuX

Co-authored-by: Claude <noreply@anthropic.com>
---
 .../dialog-view-task-reminders.component.html       |  3 ++-
 src/app/t.const.ts                                  |  1 +
 src/app/ui/split-button/split-button.component.html |  3 +++
 .../ui/split-button/split-button.component.spec.ts  | 13 +++++++++++++
 src/app/ui/split-button/split-button.component.ts   |  4 ++++
 src/assets/i18n/en.json                             |  1 +
 6 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.html b/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.html
index 6ba2b62611..3304c1b755 100644
--- a/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.html
+++ b/src/app/features/tasks/dialog-view-task-reminders/dialog-view-task-reminders.component.html
@@ -52,11 +52,12 @@
         <split-button
           [disabled]="isDisableControls"
           [menu]="footerMenu"
+          [mainLabel]="T.F.TASK.D_REMINDER_VIEW.SNOOZE_FOR | translate: { m: 10 }"
           [triggerLabel]="T.F.TASK.D_REMINDER_VIEW.MORE_ACTIONS"
           (mainClick)="snoozeAll(10)"
         >
           <mat-icon>snooze</mat-icon>
-          {{ T.F.TASK.D_REMINDER_VIEW.SNOOZE_FOR | translate: { m: 10 } }}
+          {{ T.F.TASK.D_REMINDER_VIEW.SNOOZE_FOR_SHORT | translate: { m: 10 } }}
         </split-button>
         @if (!isMultiple) {
           <button
diff --git a/src/app/t.const.ts b/src/app/t.const.ts
index 004d284671..866956a2b7 100644
--- a/src/app/t.const.ts
+++ b/src/app/t.const.ts
@@ -1892,6 +1892,7 @@ const T = {
         SCHEDULED_FOR: 'F.TASK.D_REMINDER_VIEW.SCHEDULED_FOR',
         SNOOZE: 'F.TASK.D_REMINDER_VIEW.SNOOZE',
         SNOOZE_FOR: 'F.TASK.D_REMINDER_VIEW.SNOOZE_FOR',
+        SNOOZE_FOR_SHORT: 'F.TASK.D_REMINDER_VIEW.SNOOZE_FOR_SHORT',
         START: 'F.TASK.D_REMINDER_VIEW.START',
         TASK_REMINDERS: 'F.TASK.D_REMINDER_VIEW.TASK_REMINDERS',
         UNSCHEDULE: 'F.TASK.D_REMINDER_VIEW.UNSCHEDULE',
diff --git a/src/app/ui/split-button/split-button.component.html b/src/app/ui/split-button/split-button.component.html
index ff1d6e9d4f..8f4d2b6f63 100644
--- a/src/app/ui/split-button/split-button.component.html
+++ b/src/app/ui/split-button/split-button.component.html
@@ -3,7 +3,10 @@
     class="split-btn-main"
     (click)="mainClick.emit($event)"
     [disabled]="disabled()"
+    [matTooltip]="mainLabel()"
+    [attr.aria-label]="mainLabel() || null"
     color="primary"
+    matTooltipShowDelay="0"
     mat-stroked-button
     type="button"
   >
diff --git a/src/app/ui/split-button/split-button.component.spec.ts b/src/app/ui/split-button/split-button.component.spec.ts
index e9010f586c..c7ceb6337b 100644
--- a/src/app/ui/split-button/split-button.component.spec.ts
+++ b/src/app/ui/split-button/split-button.component.spec.ts
@@ -15,6 +15,7 @@ import { SplitButtonComponent } from './split-button.component';
       [menu]="menu"
       [disabled]="disabled()"
       [triggerLabel]="triggerLabel()"
+      [mainLabel]="mainLabel()"
       (mainClick)="onMainClick()"
     >
       <span class="projected-content">Snooze 10m</span>
@@ -27,6 +28,7 @@ import { SplitButtonComponent } from './split-button.component';
 class HostComponent {
   readonly disabled = signal(false);
   readonly triggerLabel = signal('');
+  readonly mainLabel = signal('');
   mainClickCount = 0;
 
   onMainClick(): void {
@@ -94,4 +96,15 @@ describe('SplitButtonComponent', () => {
     fixture.detectChanges();
     expect(triggerBtn().getAttribute('aria-label')).toBeNull();
   });
+
+  it('exposes the resolved mainLabel as the main aria-label, and omits it when empty', () => {
+    // mainLabel is a resolved string (caller translates), so it is bound as-is.
+    host.mainLabel.set('Snooze 10m');
+    fixture.detectChanges();
+    expect(mainBtn().getAttribute('aria-label')).toBe('Snooze 10m');
+
+    host.mainLabel.set('');
+    fixture.detectChanges();
+    expect(mainBtn().getAttribute('aria-label')).toBeNull();
+  });
 });
diff --git a/src/app/ui/split-button/split-button.component.ts b/src/app/ui/split-button/split-button.component.ts
index 953d50b359..61294fec5c 100644
--- a/src/app/ui/split-button/split-button.component.ts
+++ b/src/app/ui/split-button/split-button.component.ts
@@ -24,6 +24,10 @@ export class SplitButtonComponent {
   readonly disabled = input<boolean>(false);
   // Translation key used for the trigger's tooltip and aria-label.
   readonly triggerLabel = input<string>('');
+  // Resolved (already translated) label for the main button's tooltip and
+  // aria-label. Use when the projected content is abbreviated (e.g. just a
+  // time) so the full action stays discoverable to screen readers and on hover.
+  readonly mainLabel = input<string>('');
 
   readonly mainClick = output<MouseEvent>();
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 23b6a0f12c..10eb722e6e 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1843,6 +1843,7 @@
         "SCHEDULED_FOR": "Scheduled for",
         "SNOOZE": "Snooze",
         "SNOOZE_FOR": "Snooze {{m}}m",
+        "SNOOZE_FOR_SHORT": "{{m}}m",
         "START": "Start",
         "TASK_REMINDERS": "Task Reminders",
         "UNSCHEDULE": "Unschedule",