diff --git a/app/src/components/flagship/reform/DraftHeader.tsx b/app/src/components/flagship/reform/DraftHeader.tsx index ee22ffef2..2c43cf154 100644 --- a/app/src/components/flagship/reform/DraftHeader.tsx +++ b/app/src/components/flagship/reform/DraftHeader.tsx @@ -393,16 +393,18 @@ export function DraftRunBar({ draft }: { draft: DraftReform }) { return (
+ {/* An unnamed reform runs as "Untitled reform": said in the bar's own row, with a quick way to name it. */} + {adjusted.length > 0 && + (!draft.label.trim() || naming) && + (naming ? ( + setDraftLabel(event.target.value)} + onBlur={() => setNaming(false)} + onKeyDown={(event) => { + if (event.key === 'Enter' || event.key === 'Escape') { + setNaming(false); + } + }} + placeholder="Name your reform" + aria-label="Reform name" + style={{ + width: 220, + maxWidth: '100%', + height: 36, + padding: `0 ${spacing.sm}`, + border: `1px solid ${colors.border.light}`, + borderRadius: 6, + background: colors.background.primary, + fontSize: typography.fontSize.sm, + fontFamily: typography.fontFamily.primary, + color: colors.text.primary, + }} + /> + ) : ( + + No name yet. The report will be called “{UNTITLED_REFORM}”. + + + ))} @@ -485,65 +533,6 @@ export function DraftRunBar({ draft }: { draft: DraftReform }) { - {/* An unnamed reform runs as "Untitled reform": said once, with a quick way to name it. */} - {adjusted.length > 0 && (!draft.label.trim() || naming) && ( -
- {naming ? ( - setDraftLabel(event.target.value)} - onBlur={() => setNaming(false)} - onKeyDown={(event) => { - if (event.key === 'Enter' || event.key === 'Escape') { - setNaming(false); - } - }} - placeholder="Name your reform" - aria-label="Reform name" - style={{ - width: 240, - maxWidth: '100%', - height: 28, - padding: `0 ${spacing.sm}`, - border: `1px solid ${colors.border.light}`, - borderRadius: 6, - background: colors.background.primary, - fontSize: typography.fontSize.sm, - fontFamily: typography.fontFamily.primary, - color: colors.text.primary, - }} - /> - ) : ( - <> - No name yet. The report will be called “{UNTITLED_REFORM}”. - - - )} -
- )} {/* Unchanged parameters still leave the run quietly; only "nothing changed" is said. */} {!empty && adjusted.length === 0 && (

{ text === 'Discard' || text === 'Save' || /^Save and run 2026 report$/.test(text ?? '') ); expect(verbs).toEqual(['Discard', 'Save', 'Save and run 2026 report']); - // It stays in view at the bottom of the window while the reform is long. - expect(bar).toHaveStyle({ position: 'sticky', bottom: '0px' }); + // It stays in view at the bottom of the window while the reform is long, + // stuck over the page's bottom padding so nothing shows under it. + expect(bar).toHaveStyle({ position: 'sticky' }); + expect(bar).toHaveClass('tw:-bottom-lg', 'tw:sm:-bottom-2xl'); }); test('given nothing changed yet then the run waits for a change', () => {