fix(web): show full descriptions for expanded skills

[kuigoo]

Fixes #7031

Why

I hit this while reviewing a skill with a long description in Integrations > Skills. Expanding the row reveals its SKILL.md content and bundled files, but the collapsed row's single-line ellipsis styles continue to constrain the summary description. The fixed-height summary control also cannot grow with wrapped text, which can make the summary overlap the detail content.

What users will see

Collapsed skill rows keep the current compact one-line ellipsis. Expanded rows wrap the complete description, grow with the content, and keep the SKILL.md detail below the summary without overlap.

Surface area

• UI — new page / dialog / panel / menu item / setting / empty state in apps/web or apps/desktop (including Electron menu bar)
• Keyboard shortcut — new or changed
• CLI / env var — new od subcommand or flag, new tools-dev / tools-pack flag, or new OD_* env var
• API / contract — new /api/* endpoint, new SSE event, or changed shape in packages/contracts
• Extension point — new entry under skills/, design-systems/, design-templates/, or craft/, or change to the skills protocol
• i18n keys — added new translation keys
• New top-level dependency — adding any new entry to the root package.json
• Default behavior change — changes what existing users experience without opting in
• None — internal refactor, docs, tests, or translation update only

Screenshots

See the before/after comparison in this PR comment.

Bug fix verification

• Test path: apps/web/tests/styles/settings-polish.test.ts
• The regression test went red before the source change and green afterward.
• The initial red spec failed because the expanded-description override was missing.
• Follow-up red assertions caught the fixed-height summary layout before the auto-height and top-alignment rules were added.
• Browser QA confirmed that the complete brand-extract description wraps without horizontal clipping or overlap with the SKILL.md detail.

Validation

• pnpm guard
• pnpm typecheck
• pnpm --filter @open-design/web exec vitest run -c vitest.config.ts tests/styles/settings-polish.test.ts --maxWorkers=2
• pnpm --filter @open-design/web test — 624 test files passed, 6562 tests passed, 1 expected failure, 11 skipped
• pnpm --filter @open-design/web build
• git diff --check
• Browser QA in Integrations > Skills using the brand-extract skill

[lefarcen]

@kuigoo Thanks for opening this as a draft — the bug write-up and validation notes are clear. We'll hold off on a full review until it's marked ready for review.

[kuigoo]

Before

Expanded rows still keep the collapsed one-line ellipsis.

After

Expanded rows wrap the complete description and grow the summary header without overlapping the SKILL.md detail.

[lefarcen]

@kuigoo Thanks for marking this ready for review. 🧪 This PR has user-visible UI changes that will need a manual QA pass before merge — please hold off self-merging for now; we'll loop QA in once it's merge-ready (and after design sign-off).

[lefarcen]

@kuigoo Thanks for adding the before/after screenshots — they make the layout fix much clearer.

[github-actions]

Visual regression review

Head: 748b482 · Base: 322ed40

6 changed · 43 unchanged · 0 new without baseline · 0 failed

Changed cases

Case	Main	PR	Diff
visual-home-context-picker 1,174 px (0.09%)
visual-home-plugin-use-staged 4,565 px (0.35%)
visual-home-staged-attachment 3,301 px (0.25%)
visual-topbar-byok-switcher 860 px (0.07%)
visual-topbar-local-cli-model-list 2,200 px (0.17%)
visual-topbar-open-design-model-picker 1,384 px (0.11%)

Unchanged cases

Case	Main	PR	Diff
visual-avatar-local-agent-list 138 px (0.01%)
visual-avatar-local-agent-list-panel 34 px (0.04%)
visual-avatar-menu 159 px (0.01%)
visual-avatar-menu-panel 30 px (0.09%)
visual-avatar-open-design-model-picker 186 px (0.01%)
visual-critical-settings 0 px (0.00%)
visual-critical-workspace 429 px (0.03%)
visual-critical-workspace-preview 92 px (0.01%)
visual-design-system-detail 4 px (0.00%)
visual-design-systems 4 px (0.00%)
visual-home 0 px (0.00%)
visual-home-catalog 0 px (0.00%)
visual-home-context-picker-popover 21 px (0.01%)
visual-home-plugin-filter 0 px (0.00%)
visual-home-plugin-use-with-query 0 px (0.00%)
visual-integrations 0 px (0.00%)
visual-integrations-mcp 0 px (0.00%)
visual-integrations-use-everywhere 0 px (0.00%)
visual-new-project-modal 0 px (0.00%)
visual-onboarding-cloud 0 px (0.00%)

Visual diff is advisory only and does not block merging.

[nettee]

@kuigoo I reviewed the expanded skill-row CSS and regression coverage in apps/web/src/styles/viewer/templates-plugins.css and apps/web/tests/styles/settings-polish.test.ts. The new expanded-state rules correctly override the global fixed button height, preserve the collapsed ellipsis behavior, and allow wrapped descriptions to sit above the SKILL.md detail. The live PR checks are green, including workspace tests, settings UI P0, visual checks, and the static gate; git diff --check also passes. The prepared checkout had no installed dependencies, so I could not rerun Vitest locally. This is a focused, well-documented fix—thanks for including the before/after evidence and validation notes!

_{🔁 Powered by Looper · runner=reviewer · agent=codex · An autonomous AI dev team for your GitHub repos.}