Skip to content

fix(web): update .present-exit styles for improved accessibility and … #4132

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jzhishu wants to merge 2 commits into
base: main
Choose a base branch
from
+28 −9
Open

fix(web): update .present-exit styles for improved accessibility and … #4132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4e9f6b5
fix(web): update .present-exit styles for improved accessibility and …
jzhishu Jun 11, 2026
6c6aa7e
fix(web): adjust .present-exit button styles for compactness and alig…
jzhishu Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 24 additions & 6 deletions apps/web/src/styles/viewer/composio.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,19 +324,37 @@
}
.present-exit {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 20px);
right: calc(env(safe-area-inset-right, 0px) + 20px);
top: calc(env(safe-area-inset-top, 0px) + 12px);

@PerishCode PerishCode Jun 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This offset change needs the existing web test updated in the same PR. apps/web/tests/components/FileViewer.test.tsx has a keeps the presentation exit button aligned with preview chrome spacing assertion that still expects right: calc(env(safe-area-inset-right, 0px) + 20px);, while this diff now ships + 12px. Once dependencies are installed, that focused web test will fail even though the CSS change may be intentional. Please update the test to assert the new geometry, or preserve the old 20px spacing if the test is still the intended invariant.

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

@jzhishu jzhishu Jun 11, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, thanks. I updated the existing FileViewer assertion to match the new 12px inset and added coverage for the compact pill treatment so the test reflects the intended smaller close-control geometry.

right: calc(env(safe-area-inset-right, 0px) + 12px);
z-index: 1001;
display: inline-flex;
align-items: center;
padding: 6px 12px;
gap: 6px;
min-height: 30px;
padding: 0 10px;
font-size: 12px;
background: rgba(255, 255, 255, 0.92);
font-weight: 600;
line-height: 1;
color: var(--text-muted);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
border-radius: var(--radius-pill);
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out), transform var(--dur-quick) var(--ease-out);
}
.present-exit:hover {
background: var(--bg-subtle);
border-color: var(--border-strong);
color: var(--text);
}
.present-exit:active {
transform: translateY(1px);
}
.present-exit:focus-visible {
outline: 2px solid color-mix(in srgb, var(--selected) 72%, transparent);
outline-offset: 2px;
}
.present-exit:hover { background: white; }

/* Picker (legacy in some surfaces) */
.picker {
Expand Down
7 changes: 4 additions & 3 deletions apps/web/tests/components/FileViewer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5133,14 +5133,15 @@ describe('LiveArtifactViewer', () => {
expect(rule).toContain('display: none;');
});

it('keeps the presentation exit button aligned with preview chrome spacing', () => {
it('keeps the presentation exit button compact and aligned with preview chrome spacing', () => {
const css = readExpandedIndexCss();
const rule = css.match(/\.present-exit\s*\{[^}]+\}/)?.[0] ?? '';

expect(rule).toContain('top: calc(env(safe-area-inset-top, 0px) + 20px);');
expect(rule).toContain('right: calc(env(safe-area-inset-right, 0px) + 20px);');
expect(rule).toContain('top: calc(env(safe-area-inset-top, 0px) + 12px);');
expect(rule).toContain('right: calc(env(safe-area-inset-right, 0px) + 12px);');
expect(rule).toContain('display: inline-flex;');
expect(rule).toContain('align-items: center;');
expect(rule).toContain('border-radius: var(--radius-pill);');
});

it('keeps in-tab presentation overlays anchored to the inherited workspace tab height', () => {
Expand Down
Loading