메뉴
Modal overflow, ModalDialogContent actions row, right-aligned wrapping footers (web + management-web).
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Canonical linear DB migrations under infra/k8s/base/ops/source/database/linear-migrations, ops bundles, env keys, and runners. Use when adding or changing SQL migrations, K8s DB bootstrap, or scripts/database in this repo.
When an E2E test verifies a specific element, pass it to the capture helper so the step screenshot is taken with that element vertically centered.
Create and use Metaboost git worktrees in sibling directories named metaboost_<branch_slug> (underscores). Use when starting feature work, moving WIP off the main checkout, or opening the correct worktree path for a branch.
Distributed tracing and OTLP export patterns. Use when adding trace context, log correlation, or Observability env — after Metaboost adopts a shared observability package.
When you finish a plan file in active/, automatically move it to completed/. If it's the last plan in its set, move the whole set. Use when completing any plan under .llm/plans/active/.
User vocabulary abcmemory and abcremember — where Cursor guidance lives and how to persist new instructions. Use when the user says abcmemory or abcremember.
| name | modal-layout-contract |
| description | Modal overflow, ModalDialogContent actions row, right-aligned wrapping footers (web + management-web). |
| version | 1.0.0 |
@metaboost/ui)When to use: Adding or changing dialogs (Modal), modal footers, or debugging horizontal scrollbars
inside modals in apps/web, apps/management-web, or packages/ui shells (ConfirmDeleteModal,
RateLimitModal, GoToPageModal).
Modal — full-window overlay; use withBackdrop / backdropOpaque for confirm dialogs.
Pass onClose when the dialog is dismissible (shows close control).ModalDialogContent — standard body wrapper for confirm/prompt dialogs and small forms inside
Modal: readable max width, padding that clears the close button, optional actions slot.ModalDialogContent actions — the standard footer for cancel/submit (and similar): justify-content: flex-end, flex-wrap: wrap, gap from tokens. Use in both web and management-web so confirm dialogs match the web baseline (right-aligned group).display: flex; justify-content: flex-end rows for modal footers when
ModalDialogContent can own the actions prop — use ConfirmDeleteModal or compose
ModalDialogContent directly.overflow-x: hidden on the modal to mask overflow — fix the child (min-width: 0
on flex/grid items, actions wrap, break long unbreakable strings).ModalDialogContent root uses min-width: 0, max-width, and overflow-wrap: anywhere
so content cannot widen the panel; shared form components should still declare min-width: 0 on
their own flex rows/columns where needed.actions (same as FormActions / use-form-component).FormActions from @metaboost/ui for page footers — same
right-aligned, wrap, cancel-then-submit order.flex-wrap on actions, or a child with fixed width / min-width: auto in a flex context;
check nested flex rows without min-width: 0.var(..., fallback) in modal SCSSModal / ModalDialogContent over app-local dialog shells