feat(ui-modal): add margin to fullscreen modal

[git-nandor]

INSTUI-5067

Summary

A size="fullscreen" Modal previously covered the entire viewport edge-to-edge, making it hard to tell it was a modal.

Changes

• Modal applies fullScreenMargin (new token) based on sharedTokens.breakpoints (new token).
• The Small viewports docs example now uses a theme override to simulate the small viewport media query behavior.
• The Constraining Modal to a parent element section example was updated to fix the scrollbar introduced by the new margin changes by increasing its size.
• prettier@3.8.1 pulled by new style-dictionary@4.4.0 caused conflicts with ui-codemods. Fixed by adding "prettier": "2.8.8" to the root package.json.

Test plan

Check the Modal page Media Modal example with default (fullscreen, cover) settings.

• Large screen (≥ 768px): it is inset on all sides, rounded corners + shadow, backdrop visible around it.
• Small screen (< 768px): edge-to-edge, no margin/radius.

Co-Authored-By: 🤖 Claude

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-07-16 13:56 UTC

[github-actions]

Visual regression report

✅ No changes.

Status	Count
Unchanged	32
Changed	0
New	0
Removed	0

📊 View full report

_{Baselines come from the visual-baselines branch. They refresh on every merge to master.}

[joyenjoyer]

Looks good to me visually. However, modal rendering became noticeably slower. Please check it (hint: use any browser's performance profiler).

It would be better to put the Prettier fix in a separate commit.

I ran Claude's code review skill against this PR, and it claimed that boxShadowObjectsToCSSString is being called redundantly multiple times. Please look into this as well.

[git-nandor]

Thanks! Prettier fix in a separate commit.
Redundant boxShadowObjectsToCSSString calls fixed by computing it once and reusing it.
Box-shadow blur is one of the most expensive paint operations and scales with painted area. Modal now paints a 2-layer, 28px-blur box-shadow + rounded corners on a near-fullscreen element so the cost shows up.

[joyenjoyer]

looks good now