fix(tasks): shorten reminder snooze button label to fit small screens (#8743)

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>

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

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',

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"
   >

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();
+  });
 });

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>();
 }

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",