Skip to content

fix(ui): remove opaque corner fillets on transparent window#5

Open
thanhleviet wants to merge 1 commit intophuc-nt:mainfrom
thanhleviet:fix/transparent-window-corners
Open

fix(ui): remove opaque corner fillets on transparent window#5
thanhleviet wants to merge 1 commit intophuc-nt:mainfrom
thanhleviet:fix/transparent-window-corners

Conversation

@thanhleviet
Copy link
Copy Markdown

Summary

  • Fix opaque rectangular fillets visible at four window corners in dark theme
  • Window now renders clean rounded corners by compositing directly against the desktop

Problem

The window had transparent: false in Tauri config, so macOS drew an opaque rectangular frame behind the CSS border-radius: 14px on #overlay-view and #settings-view. This made the four corner areas visibly opaque — appearing as small rectangular "fillets" that broke the rounded corner appearance.

Fix

  • transparent: true — makes the native window background clear so CSS rounded corners show through to the desktop
  • shadow: false — disables the macOS system window shadow, which is rectangular and would peek out behind the rounded CSS shape
  • clip-path: inset(0 round 14px) — hard-clips each view's rendering (including backdrop-filter blur which can leak outside border-radius on WebKit) to the rounded rectangle
  • Removed outer box-shadow from both views — on a transparent window, the dark drop shadows would float visibly in the transparent corner area

Beautiful app — the glassmorphism design, clean TTS provider abstractions, and the vanilla JS + Tauri architecture make this a joy to work with.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant