fix(editor): center the folded toolbar and avoid squeezing the title

[bouzidanas]

What & why

Below 700px, the folded creation/editing toolbar stay left-aligned while parent container keeps a fixed width. This results in unused space while the deck title is constrained to 90px.

In order to give more space to the title and also maintain a smoother position transition for the toolbar controls while crossing the 700px threshold, the parent container is forced instead to expand its width to take the remaining space (width in topbar). At the same time, the toolbar is centered in this parent. Note that while, the parent element adjusts to the space available, it still has the same floor which means the content should never get cutoff or overflow this container.

UI comparison

The comparison resizes the editor from 900px to 600px, crossing the 700px breakpoint and showing the toolbar collapse before and after the fix. Keep eye on the title as the topbar's width decreases.

How I verified it

• Typecheck passed
• npm run build:single passed
• Browser-tested the toolbar while resizing from 900px to 600px
• Checked widths from 700px through 320px
• Confirmed the toolbar container does not shrink below its content width
• Confirmed the controls remain centered when extra space is available
• Confirmed the desktop layout is unchanged above 700px

Checklist

• Read the relevant parts of CLAUDE.md / docs before changing them
• npm run build:single succeeds (from slides/)
• Ran node scripts/test-sync.ts if I touched slides/src/sync/ (not touched)
• New UI strings added to every catalog in slides/src/i18n/ (none added)
• Document format changes are additive and backward-compatible (no format changes)
• Did not bump the version or cut a release (maintainers sign releases)