Fix project rename row overflow and button spacing (SL-2118) - #74662

Two UI bugs when renaming a project from /projects: the name box overflows its column, and the Save and Cancel buttons sit flush against each other. Both come from a style that lost a specificity fight, so this fixes the causes rather than nudging the numbers.

The name box overflowed. The cell rendered a bare input element with a hard-coded width: 200px. With content-box sizing its border and padding added another 8px, so it drew 208px inside a cell whose content box is 201px - a 7px overhang. Swapped it for the design system TextField (MIGRATION_STATUS.md lists textField as "Not Started", so DSCO, not MUI) and let it fill the cell instead of carrying a fixed width. TextField's FormFieldWrapper sets min-width: 18.75rem (300px), which would have overflowed the cell far worse, so the module cancels it. That override is written as label.inputBox - element-qualified - so it beats .formFieldWrapper on specificity instead of depending on which stylesheet webpack happens to emit last.

The buttons touched. .buttonMargin { margin-right: 8px } never applied. CdoTheme's MuiButton root override sets margin: 0 at equal specificity, and emotion injects its styles after the CSS module, so MUI won on source order. The rendered margin-right on Save was 0px. Moved the 8px to a gap on the flex container - a property the button override does not touch, so it cannot be undone the same way.

While in the file I also gave the rename input an aria-label; it had no accessible name.

Structural change worth knowing about: TextField wraps its input in a label element (FormFieldWrapper), so the edit cell gains one wrapper element. The id and name still land on the inner input, so the existing UI test selectors (#ui-project-rename-input, #ui-projects-rename-save) resolve unchanged.

Links

• Jira: https://codedotorg.atlassian.net/browse/SL-2118
• Epic: SL-2038 (Labs Rebrand Follow-Ups)

Testing story

Hey, human! Add screenshots here.

Before screenshot

After screenshot

Compare the private projects gallery old vs new:

• Prod: https://studio.code.org/projects
• Staging: https://staging-studio.code.org/projects
• Local (this branch, use_my_apps: true): http://localhost:9000/projects

I drove the table in Storybook and measured the rendered geometry rather than eyeballing it. At 768 / 1024 / 1280 / 1568 the numbers were identical:

I could not reach a real /projects page from my environment - it needs MySQL and AWS credentials I do not have - so everything below is on you:

• Rename a project from /projects: the box stays inside its column, Save writes the new name, Cancel discards it.
• Rename a project with a very long name, and one with a short name - the field should fill the column in both cases and never spill past the cell border.
• Check the row against prod side by side. The field is now a design system control rather than a bare browser input, so its border, corner radius and text size all shift slightly.
• Check at 1568 / 1280 / 1024 / 768. The table has a fixed min width and scrolls horizontally below it - that is pre-existing, not something this PR changed.
• Try all of the above on Firefox and Safari. Safari in particular styles bare inputs differently from Chrome, so the before/after difference may look larger there.
• Keyboard only: Tab into the field, type, Tab to Save and Cancel, activate with Enter and Space. Confirm the focus ring is visible on all three.
• Screen reader: the field should announce as "Project Name", which it did not before.
• RTL: switch to an RTL locale and confirm the field and the Save/Cancel pair mirror correctly - the button spacing is now gap rather than margin-right, which is direction-agnostic, so this should be no worse than before.

Make sure you ask design:

• I used size="s" on the TextField, matching the size="s" already on the project-name link in the same cell. That makes the input a bit more compact than the old bare browser input. Is s the right size for this row, or would you rather have m?