Skip to content

fix(portal): keep the skill import wizard usable on small windows - #1572

Open
Naveen Chatlapalli (1aifanatic) wants to merge 1 commit into
microsoft:mainfrom
1aifanatic:fix/1285-skill-form-responsive
Open

Naveen Chatlapalli (1aifanatic) wants to merge 1 commit into
microsoft:mainfrom
1aifanatic:fix/1285-skill-form-responsive

Conversation

@1aifanatic

Copy link
Copy Markdown

Fixes #1285.

On the Skills page, Import from GitHub opens SkillImportWizard inside a dialog. Three layout problems matched the report:

  • Text did not wrap. Skill names, skill paths and the repository slug are unbroken monospace strings, so they pushed the row wider than the dialog. Skill descriptions were truncated to one line. Names, paths and the slug now use break-all, descriptions and import errors use break-words, and the "N skills found" header wraps its controls onto a new line when space is tight.
  • The action row could overflow. The Back / Retry failed / Import (Done) row now wraps, with the primary actions kept right-aligned.
  • The Import action could fall off-screen. The dialog had no height cap, so on short windows its bottom, including the Import button, sat below the viewport with no way to scroll to it. The dialog now uses the height-capped shell pattern from AGENTS.md (max-h-[90vh] + grid-rows-[auto_minmax(0,1fr)], with a min-h-0 overflow-y-auto body), so the body scrolls and the actions stay reachable.

The wizard changes also apply where it is embedded in the profile form's skill picker.

Validation: pnpm exec vitest run apps/portal/src/components/SkillImportWizard.test.tsx apps/portal/src/components/SkillPicker.test.tsx (27 passed, 2 new wrapping tests); pnpm --filter portal lint (tsc --noEmit); git diff --check. I could not watch the video attached to the issue and have not checked the result in a browser, so a quick visual check at a narrow and a short window size would be appreciated.

🤖 Generated with Claude Code

Long unbroken skill names, paths, and repository slugs overflowed the
import dialog, descriptions were truncated, and the uncapped dialog let
the Import action fall below the viewport. Text now wraps, the action
rows wrap, and the dialog body scrolls inside a height-capped shell.

Fixes microsoft#1285.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

This branch has not been deployed

No deployments
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.

Skills Section: Text doesn't wrap and "Save" button is not visible due to missing responsiveness

1 participant