Skip to content

fix(slides): stop rename input clipping, add cancel, shrink header bu… - #2223

Open
samark231 wants to merge 1 commit into
mainfrom
fix/slide-title-rename-header-layout
Open

fix(slides): stop rename input clipping, add cancel, shrink header bu…#2223
samark231 wants to merge 1 commit into
mainfrom
fix/slide-title-rename-header-layout

Conversation

@samark231

Copy link
Copy Markdown
Collaborator

Summary of Changes

Renaming a slide from the study-library header was effectively unusable: the title
input overflowed its container and spilled off the left edge into a clipped region,
and the confirm tick rendered underneath the download button. There was also no way
to abandon a rename once started.

Frontend:

  • Fix the rename input overflowing its container. It was w-fit with no min-w-0,
    so flexbox refused to shrink it below an <input>'s ~20-character min-content
    floor; now min-w-0 flex-1. Dropped justify-center, which was splitting the
    overflow to both sides and pushing text off the left edge, where the ancestor's
    overflow-x-hidden clipped it unreachably.
  • Confirm/cancel are now MyButton with shrink-0, so they can't be collapsed to
    zero width or painted over by the later-in-DOM actions row. Adds a real 24px hit
    area, type="button", and aria-label — the old bare <Check> icon had none.
  • Add a cancel (X) button that reverts the title to the persisted value. Previously
    the only exit from edit mode was committing the change.
  • Enter commits the rename, Escape cancels.
  • Free ~330px of header width for the title: Activity Stats and History become
    icon-only (they already carried title tooltips), and Save Draft / Publish /
    Unpublish / Edit Link drop the sm:min-w-36 144px floor via sm:min-w-0, so
    they size to their text.

Related Issue

Type of Change

  • Bug fix (non-breaking change that fixes an issue)
  • New feature (non-breaking change that adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Documentation update

How Has This Been Tested?

  • tsc --noEmit passes clean across all three changed files.
  • scripts/design-lint.mjs reports no findings in any changed region (pre-existing
    findings elsewhere in these files are untouched).
  • Manual: renaming a document slide shows the full title, a visible tick and X, with
    no clipping at the left edge.

Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my code
  • I have added tests that prove my fix is effective or that my feature works
  • New and existing tests pass locally with my changes
  • I have updated the documentation accordingly

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying frontend-admin-dashboard with  Cloudflare Pages  Cloudflare Pages

Latest commit: 5b4b84e
Status: ✅  Deploy successful!
Preview URL: https://75a167f9.frontend-admin-dashboard.pages.dev
Branch Preview URL: https://fix-slide-title-rename-heade.frontend-admin-dashboard.pages.dev

View logs

@codacy-production

Copy link
Copy Markdown
Contributor

Up to standards ✅

🟢 Issues 0 issues

Results:
0 new issues

View in Codacy

🟢 Metrics 0 complexity

Metric Results
Complexity 0

View in Codacy

NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant