From d0cc4e2f00a7875f616344d4ce2635f112fda3cd Mon Sep 17 00:00:00 2001 From: Maurice Date: Thu, 20 Aug 2026 17:34:24 +0200 Subject: [PATCH] fix(planner): give the day's optimize button room by dropping its label MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Every button in the day's route-tools row hands the day somewhere: show the route, open it in Google Maps, open it in CoMaps, reorder it. Two were already icon-only. Optimize carried a label on flex: 1 with padding '6px 0', which is no horizontal padding at all — survivable until CoMaps added a fifth button, at which point the text sat hard against both edges of its own button. Icon-only now, matching the two beside it. The label stays as the accessible name and the tooltip, so nothing about reaching the action changes, and the row has room for whatever gets added to it next. Closes #1981 --- .../Planner/DayPlanSidebar.test.tsx | 47 ++++++++++++++++++- .../src/components/Planner/DayPlanSidebar.tsx | 25 +++++++--- 2 files changed, 64 insertions(+), 8 deletions(-) diff --git a/client/src/components/Planner/DayPlanSidebar.test.tsx b/client/src/components/Planner/DayPlanSidebar.test.tsx index 21a1a6207..f77ae7779 100644 --- a/client/src/components/Planner/DayPlanSidebar.test.tsx +++ b/client/src/components/Planner/DayPlanSidebar.test.tsx @@ -830,7 +830,8 @@ describe('DayPlanSidebar', () => { render() - // Find the Optimize button (contains 'optimize' text) + // Found by its accessible name — the button is icon-only since #1981, so + // the label lives on aria-label rather than in the button's text. const optimizeBtn = screen.getByRole('button', { name: /optimize/i }) await user.click(optimizeBtn) await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array))) @@ -4201,3 +4202,47 @@ describe('reordering the day plan with a finger (#1616)', () => { } }) }) + +/** + * The day's route-tools row (#1981). + * + * Every button in it hands the day somewhere: show the route, open it in Google + * Maps, open it in CoMaps, reorder it. Two of those were already icon-only; the + * other two carried labels on `flex: 1` with `padding: '6px 0'`, which is no + * horizontal padding at all. That was survivable until CoMaps added a fifth + * button to the row, at which point the optimize label sat hard against both + * edges of its own button. + * + * It is icon-only now, which is also what keeps the row from crowding again the + * next time something is added to it. + */ +describe('the day route-tools row', () => { + const dayWithTwoStops = () => { + const places = [ + buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }), + buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }), + ] + const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' }) + return { + days: [day], places, selectedDayId: 10, + assignments: { + '10': [ + buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }), + buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }), + ], + }, + } + } + + it('keeps the optimize action reachable by name without printing it', () => { + render() + const btn = screen.getByRole('button', { name: /optimize/i }) + // The assertion that pins the change: named, but no visible label. + expect(btn).toBeInTheDocument() + expect(btn.textContent?.trim()).toBe('') + expect(btn.getAttribute('title')).toBeTruthy() + }) + + /* The click itself is already pinned by FE-PLANNER-DAYPLAN-038 above, which + finds the button the same way. */ +}) diff --git a/client/src/components/Planner/DayPlanSidebar.tsx b/client/src/components/Planner/DayPlanSidebar.tsx index f01c78560..adf236ce3 100644 --- a/client/src/components/Planner/DayPlanSidebar.tsx +++ b/client/src/components/Planner/DayPlanSidebar.tsx @@ -2609,13 +2609,24 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP > -
{routeProfileOptions.map(p => {