fix(frontend): unify modal close button and title styling

[hieptl]

• A human has tested these changes.

---

Why

Problem

After ac86d3ec, two close-button conventions coexisted in the app:

• Some modals (InstallServerModal, etc.) used the inline white Lucide X + text-white title pattern.
• Other modals (SettingsModal, the confirmation modals, the various *ModalHeader components, etc.) used different patterns or no close icon at all.

The designer asked us to:

1. Roll back ac86d3ec's visual direction entirely.
2. Standardize every modal in the app on a single, consistent pattern — using the older shared ModalCloseButton (gray ModalCloseIcon, absolute top-right) and a plain <h2> title that sits on its own row (not on the close button's row).

Expected behavior

All modals in the app render:

1. A single gray close icon — <ModalCloseButton /> (uses ModalCloseIcon SVG, text-tertiary-alt default, hovers to white) positioned absolutely at top-right of the modal container.
2. A plain <h2> title — text-lg font-semibold, no text-white override, no <BaseModalTitle>.
3. The original header layout — title sits on its own (no flex justify-between row sharing space with the close icon). Title gets pr-6 (or wider on padded sections) to leave room for the absolute close button.

Affected modals

• The five modals ac86d3ec touched (CustomServerEditor, AddSkillModal, SkillDetailModal, AddAutomationModal, InstallServerModal) — revert to pre-ac86d3ec state.
• Modals that previously used an inline white close button or <BaseModalTitle> and weren't part of ac86d3ec — bring them onto the same gray-icon / plain-<h2> pattern: BackendFormModal (add + edit), ManageBackendsModal, OpenRepositoryModal, OpenWorkspaceDialog, OpenRepositoryDialog, PluginLaunchModal, and the four *ModalHeader components (SkillsModalHeader, HooksModalHeader, SystemMessageHeader, MetricsModalHeader).
• InstallServerModal's legacy inline white X button (a duplicate alongside ModalCloseButton) — removed so only the gray button remains.

Out of scope

• Modals with no close icon (SettingsModal, FolderBrowserModal, confirmation modals). No change.
• Other non-close icon buttons (refresh buttons in SkillsModalHeader / HooksModalHeader, row-action buttons, etc.). Stay as-is.

Acceptance criteria

• Every modal in the app uses <ModalCloseButton /> for its close affordance.
• No file imports lucide-react's X or react-icons/io5's IoClose for a modal close button.
• No file declares a local ICON_BUTTON_CLASS solely for a modal close button (Skills/Hooks headers may keep theirs since the refresh button still uses it).
• BaseModalTitle is no longer used in BackendFormModal or ManageBackendsModal; both render <h2 className="text-lg font-semibold"> instead.
• InstallServerModal shows exactly one close button.
• npm run typecheck and npm run lint pass.

Issue Number

Resolves #746

How to Test

1. Clone the agent-server-gui repository.
2. Start the development server using:

npm run dev

Demo Video

app-1913.mov

Type

• Bug fix
• Feature
• Refactor
• Breaking change
• Docs / chore

Notes

Risk

Medium. Pure UI/layout refactor — no behavior change in any of the affected modals. The biggest risk is positioning: absolute ModalCloseButton requires position: relative on its containing element, which this PR adds in every necessary spot. The pr-6 / pr-10 / pr-12 clearances on titles and header rows have been chosen to keep them clear of the corner button at standard modal widths; unusually long translated titles may visually approach the close icon but won't be physically clipped.

---

🐳 Docker images for this PR

• GHCR package: https://github.com/OpenHands/agent-canvas/pkgs/container/agent-canvas

Component	Value
Image	ghcr.io/openhands/agent-canvas
Architectures	amd64, arm64
Agent Server	ghcr.io/openhands/agent-server:1.23.0-python
Automation	openhands-automation==1.0.0a3
Commit	f72ae98ace1b6c3be921a755d62f37fd2aacd000

Pull (multi-arch manifest)

# Multi-arch manifest — Docker automatically pulls the correct architecture
docker pull ghcr.io/openhands/agent-canvas:sha-f72ae98

Run

docker run -it --rm \
  -p 8000:8000 \
  ghcr.io/openhands/agent-canvas:sha-f72ae98

All tags pushed for this build

ghcr.io/openhands/agent-canvas:sha-f72ae98-amd64
ghcr.io/openhands/agent-canvas:hieptl-app-1913-amd64
ghcr.io/openhands/agent-canvas:pr-747-amd64
ghcr.io/openhands/agent-canvas:sha-f72ae98-arm64
ghcr.io/openhands/agent-canvas:hieptl-app-1913-arm64
ghcr.io/openhands/agent-canvas:pr-747-arm64
ghcr.io/openhands/agent-canvas:sha-f72ae98
ghcr.io/openhands/agent-canvas:hieptl-app-1913
ghcr.io/openhands/agent-canvas:pr-747

About Multi-Architecture Support

• Each tag (e.g., sha-f72ae98) is a multi-arch manifest supporting both amd64 and arm64
• Docker automatically pulls the correct architecture for your platform
• Individual architecture tags (e.g., sha-f72ae98-amd64) are also available if needed

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agent-canvas	Ready	Preview, Comment	May 24, 2026 4:46am

[github-actions]

📸 Snapshot Test Report

Warning

Snapshot comparison step crashed (timeout, OOM, or runner error) — diff results below may be incomplete or absent.
Check the CI logs for the full error output (look for the "Run snapshot comparison" step).

✅ 13 snapshots changed — acknowledged via the update-snapshots label. New baselines will be uploaded when this PR merges.

Category	Count
🔴 Changed	13
🆕 New	0
✅ Unchanged	60
Total	73

🔴 Changed snapshots (13)

backends-extended — 9 snapshots

backend-add-blank-disabled

Expected (main)	Actual (PR)	Diff

backend-add-cloud-advanced-open

Expected (main)	Actual (PR)	Diff

backend-add-cloud-no-key-disabled

Expected (main)	Actual (PR)	Diff

backend-add-form-partially-filled

Expected (main)	Actual (PR)	Diff

backend-add-local-ready

Expected (main)	Actual (PR)	Diff

backend-add-two-column-layout

Expected (main)	Actual (PR)	Diff

backend-add-whitespace-host-disabled

Expected (main)	Actual (PR)	Diff

backend-edit-prefilled

Expected (main)	Actual (PR)	Diff

backend-manage-two-listed

Expected (main)	Actual (PR)	Diff

backends — 2 snapshots

backend-add-modal

Expected (main)	Actual (PR)	Diff

backend-manage-modal

Expected (main)	Actual (PR)	Diff

mcp-page

mcp-slack-install-2-modal

Expected (main)	Actual (PR)	Diff

settings-page

add-backend-modal

Expected (main)	Actual (PR)	Diff

✅ Unchanged snapshots (60)

archived-conversation

• conversation-panel-with-archived-badges
• conversation-view-archived
• conversation-view-sandbox-error

automations

• automations-delete-modal
• automations-list-active-inactive
• automations-no-automations
• automations-search-no-results

backends-extended

• backend-add-cloud-with-key-enabled
• backend-add-invalid-url-disabled
• backend-add-name-only-disabled
• backend-after-switch
• backend-cancel-nothing-saved
• backend-dropdown-two-backends
• backend-manage-after-removal
• backend-remove-cancelled
• backend-remove-confirmation
• backend-switch-overlay

backends

• backend-selector-open

changes-tab

• changes-deleted-file
• changes-diff-viewer
• changes-empty

collapsible-thinking

• reasoning-content-collapsed
• reasoning-content-expanded
• think-action-collapsed
• think-action-expanded

mcp-page

• mcp-custom-server-1-editor-open
• mcp-custom-server-2-url-filled
• mcp-custom-server-3-all-filled
• mcp-custom-server-4-installed
• mcp-custom-server-editor
• mcp-empty-installed
• mcp-search-filtered
• mcp-slack-install-1-marketplace
• mcp-slack-install-3-filled
• mcp-slack-install-4-installed

onboarding

• onboarding-step-0-choose-agent
• onboarding-step-1-check-backend
• onboarding-step-2-setup-llm
• onboarding-step-3-say-hello

projects-workspace-browser

• projects-workspace-browser

settings-page

• analytics-consent-modal
• home-screen
• settings-app-page
• settings-page

settings-secrets

• secrets-add-form-filled
• secrets-add-form
• secrets-after-save
• secrets-delete-confirm
• secrets-list

settings-verification

• condenser-settings
• verification-settings-off
• verification-settings-on

sidebar

• sidebar-collapsed
• sidebar-conversation-panel
• sidebar-filter-menu

skills-page

• skills-empty
• skills-loaded
• skills-no-match
• skills-search-filtered
• skills-type-filter

---

Generated by the Snapshot Tests workflow. This comment was created by an AI agent (OpenHands) on behalf of the repo maintainers.

[hieptl]

PR Review by OpenHands / pr-review (pull_request) is failing. I will merge this pull request for now. If any issues are found, I will address them in follow-up pull requests. Thank you! 🙏