fix:align artifact preview exit button (#1445)

This commit is contained in:
Neha Prasad 2026-05-12 19:09:31 +05:30 committed by GitHub
parent 09a8fa8d64
commit 2d405fae96
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 2 deletions

View file

@ -11175,11 +11175,15 @@ button.ghost.mcp-copy-btn:hover:not(:disabled) {
}
.present-exit {
position: absolute;
top: 12px;
right: 12px;
top: calc(env(safe-area-inset-top, 0px) + 20px);
right: calc(env(safe-area-inset-right, 0px) + 20px);
z-index: 1001;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
font-size: 12px;
line-height: 1;
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--border);
border-radius: var(--radius-sm);

View file

@ -1,5 +1,7 @@
// @vitest-environment jsdom
import { readFileSync } from 'node:fs';
import { join } from 'node:path';
import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
import { renderToStaticMarkup } from 'react-dom/server';
import { afterEach, describe, expect, it, vi } from 'vitest';
@ -1557,6 +1559,16 @@ function baseLiveArtifactWorkspaceEntry(
}
describe('LiveArtifactViewer', () => {
it('keeps the presentation exit button aligned with preview chrome spacing', () => {
const css = readFileSync(join(process.cwd(), 'src/index.css'), 'utf8');
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('display: inline-flex;');
expect(rule).toContain('align-items: center;');
});
it('enters and exits in-tab presentation from the present menu', async () => {
const fetchMock = vi.fn(async (input: string | URL | Request) => {
const url = typeof input === 'string' ? input : input instanceof Request ? input.url : String(input);