Skip to content

fix(web): align floating preview corners - #197

Merged
incognitojam merged 2 commits into
mainfrom
t3code/fix-browser-preview-border-radius-1
Aug 18, 2026
Merged

incognitojam merged 2 commits into
mainfrom
t3code/fix-browser-preview-border-radius-1

Conversation

@incognitojam

@incognitojam incognitojam commented Aug 18, 2026 •

Copy link
Copy Markdown
Owner

The floating browser preview clipped its native browser surface at 12px while the visible frame and inset ring resolved to 14px. The webview also filled the frame beneath its translucent inset ring, making page content appear outside the outline.

This change aligns the outer layers at a 14px radius, then places the browser content inside the 1px border with a 13px inner radius.

Verification

  • vp test run apps/web/src/browser/hostedBrowserWebviewStyle.test.ts
  • vp run --filter @t3tools/web typecheck
  • Before/after visual verification performed by the maintainer in the desktop client

Screenshots

Before/after screenshots were captured and reviewed by the maintainer but are not embedded in this PR.


Written by an agent (T3 Code, gpt-5.6-sol).

@incognitojam
incognitojam force-pushed the t3code/fix-browser-preview-border-radius-1 branch from e49b02f to 6253a89 Compare August 18, 2026 20:22
@incognitojam
incognitojam force-pushed the t3code/fix-browser-preview-border-radius-1 branch from 6253a89 to 0ae331b Compare August 18, 2026 20:48
@incognitojam
incognitojam marked this pull request as ready for review August 18, 2026 20:48
@incognitojam
incognitojam enabled auto-merge (squash) August 18, 2026 20:48
@incognitojam
incognitojam merged commit 808fa97 into main Aug 18, 2026
11 of 12 checks passed
@incognitojam
incognitojam deleted the t3code/fix-browser-preview-border-radius-1 branch August 18, 2026 20:54
incognitojam added a commit that referenced this pull request Aug 19, 2026
The floating browser preview clipped its native browser surface at 12px
while the visible frame and inset ring resolved to 14px. The webview
also filled the frame beneath its translucent inset ring, making page
content appear outside the outline.

This change aligns the outer layers at a 14px radius, then places the
browser content inside the 1px border with a 13px inner radius.

## Verification

- `vp test run apps/web/src/browser/hostedBrowserWebviewStyle.test.ts`
- `vp run --filter @t3tools/web typecheck`
- Before/after visual verification performed by the maintainer in the
desktop client

## Screenshots

Before/after screenshots were captured and reviewed by the maintainer
but are not embedded in this PR.

---
Written by an agent (T3 Code, gpt-5.6-sol).

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
yngatech-nightly Bot pushed a commit that referenced this pull request Aug 20, 2026
The floating browser preview clipped its native browser surface at 12px
while the visible frame and inset ring resolved to 14px. The webview
also filled the frame beneath its translucent inset ring, making page
content appear outside the outline.

This change aligns the outer layers at a 14px radius, then places the
browser content inside the 1px border with a 13px inner radius.

## Verification

- `vp test run apps/web/src/browser/hostedBrowserWebviewStyle.test.ts`
- `vp run --filter @t3tools/web typecheck`
- Before/after visual verification performed by the maintainer in the
desktop client

## Screenshots

Before/after screenshots were captured and reviewed by the maintainer
but are not embedded in this PR.

---
Written by an agent (T3 Code, gpt-5.6-sol).

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
yngatech-nightly Bot pushed a commit that referenced this pull request Aug 21, 2026
The floating browser preview clipped its native browser surface at 12px
while the visible frame and inset ring resolved to 14px. The webview
also filled the frame beneath its translucent inset ring, making page
content appear outside the outline.

This change aligns the outer layers at a 14px radius, then places the
browser content inside the 1px border with a 13px inner radius.

## Verification

- `vp test run apps/web/src/browser/hostedBrowserWebviewStyle.test.ts`
- `vp run --filter @t3tools/web typecheck`
- Before/after visual verification performed by the maintainer in the
desktop client

## Screenshots

Before/after screenshots were captured and reviewed by the maintainer
but are not embedded in this PR.

---
Written by an agent (T3 Code, gpt-5.6-sol).

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
incognitojam added a commit that referenced this pull request Aug 27, 2026
The floating browser preview clipped its native browser surface at 12px
while the visible frame and inset ring resolved to 14px. The webview
also filled the frame beneath its translucent inset ring, making page
content appear outside the outline.

This change aligns the outer layers at a 14px radius, then places the
browser content inside the 1px border with a 13px inner radius.

## Verification

- `vp test run apps/web/src/browser/hostedBrowserWebviewStyle.test.ts`
- `vp run --filter @t3tools/web typecheck`
- Before/after visual verification performed by the maintainer in the
desktop client

## Screenshots

Before/after screenshots were captured and reviewed by the maintainer
but are not embedded in this PR.

---
Written by an agent (T3 Code, gpt-5.6-sol).

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
incognitojam added a commit that referenced this pull request Aug 28, 2026
The floating browser preview clipped its native browser surface at 12px
while the visible frame and inset ring resolved to 14px. The webview
also filled the frame beneath its translucent inset ring, making page
content appear outside the outline.

This change aligns the outer layers at a 14px radius, then places the
browser content inside the 1px border with a 13px inner radius.

## Verification

- `vp test run apps/web/src/browser/hostedBrowserWebviewStyle.test.ts`
- `vp run --filter @t3tools/web typecheck`
- Before/after visual verification performed by the maintainer in the
desktop client

## Screenshots

Before/after screenshots were captured and reviewed by the maintainer
but are not embedded in this PR.

---
Written by an agent (T3 Code, gpt-5.6-sol).

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
incognitojam pushed a commit that referenced this pull request Sep 28, 2026
Fork adaptation: keeps fork #197's corner geometry, a 14px frame with the browser content inset inside the 1px ring and clipped at 13px, while taking upstream's single frame radius and inherited layer radii.

(cherry picked from commit 3997b9a)
Upstream-PR: 10915
incognitojam pushed a commit that referenced this pull request Sep 29, 2026
Co-authored-by: Claude Code <[email protected]>

Fork adaptation: The browser source keeps fork #197's corner geometry, a 14px frame with the content inset inside the 1px ring and clipped at 13px, and fork #526's view-only shield (preview-surface-continuity), now a shell option only the browser source sets, so floating device streams stay interactive as upstream intends. Agent opens keep the fork's right-panel presentation. The devices guide keeps styal naming.

(cherry picked from commit 8bbe2bf)
Upstream-PR: 11285
incognitojam pushed a commit that referenced this pull request Sep 29, 2026
Co-authored-by: Claude Code <[email protected]>

Fork adaptation: The browser source keeps fork #197's corner geometry, a 14px frame with the content inset inside the 1px ring and clipped at 13px, and fork #526's view-only shield (preview-surface-continuity), now a shell option only the browser source sets, so floating device streams stay interactive as upstream intends. Agent opens keep the fork's right-panel presentation. The devices guide keeps styal naming.

(cherry picked from commit 8bbe2bf)
Upstream-PR: 11285
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant