Skip to content

fix(web): use opaque background for maximized workspace panel - #4376

Merged
terrytangyuan merged 1 commit into
omnigent-ai:mainfrom
terrytangyuan:fix/fullscreen
Aug 11, 2026
Merged

fix(web): use opaque background for maximized workspace panel#4376
terrytangyuan merged 1 commit into
omnigent-ai:mainfrom
terrytangyuan:fix/fullscreen

Conversation

@terrytangyuan

@terrytangyuan terrytangyuan commented Aug 7, 2026

Copy link
Copy Markdown
Member

Related issue

N/A

Summary

In dark mode, the workspace panel's background is set to transparent so it blends into the canvas when docked. When the panel is maximized (fullscreen mode for viewing code changes), it uses absolute inset-0 to cover the full content area — but the transparent background lets the chat content underneath bleed through.

This fix:

  • Adds a data-maximized attribute to the workspace panel <aside> when maximized.
  • Gates the dark-mode transparent background rule with :not([data-maximized]) so it only applies when docked.
  • Applies var(--card-solid) as an opaque background when maximized, covering all themes (default, custom translucent sidebar, and built-in themes with semi-transparent --card values).

Test Plan

  1. Open the app in dark mode.
  2. Open a file or diff in the workspace panel.
  3. Click the maximize button to enter fullscreen.
  4. Verify the background is solid — no chat content visible behind the code.
  5. Click minimize to return to docked mode and verify the panel still blends into the canvas as before.
  6. Repeat with a custom theme that uses translucent sidebar.

Demo

Before (chat bleeds through maximized workspace panel):

Screenshot From 2026-08-07 15-38-29

Type of change

  • Bug fix
  • Feature
  • UI / frontend change
  • Refactor / chore
  • Docs
  • Test / CI
  • Breaking change

Test coverage

  • Unit tests added / updated
  • Integration tests added / updated
  • E2E tests added / updated
  • Manual verification completed
  • Existing tests cover this change
  • Not applicable

Coverage notes

CSS-only fix plus one data attribute. Verified manually by maximizing the workspace panel in dark mode and confirming the background is opaque. No automated test covers glassmorphism rendering.

Changelog

Maximized workspace panel no longer shows chat content through a transparent background in dark mode.

@github-actions github-actions Bot added the size/M Pull request size: M label Aug 7, 2026
@github-actions
github-actions Bot requested a review from daniellok-db August 7, 2026 19:49
The dark-mode glassmorphism rule clears the workspace panel's background
to transparent so it blends into the canvas when docked. When the panel
is maximized (absolute inset-0), this lets the chat content underneath
bleed through.

Add a data-maximized attribute to the panel and gate the transparent
background rules with :not([data-maximized]). Apply an explicit
var(--card-solid) background when maximized so the panel is opaque
across all themes.

Signed-off-by: Yuan Tang <terrytangyuan@gmail.com>
@github-actions github-actions Bot added size/S Pull request size: S and removed size/M Pull request size: M labels Aug 8, 2026

@daniellok-db daniellok-db left a comment

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.

lg

@omnigent-ci

omnigent-ci Bot commented Aug 11, 2026

Copy link
Copy Markdown
Contributor

Polly AI Review

Review: fix(web): use opaque background for maximized workspace panel

Blocking issues

None. The fix is correct and well-scoped:

  • data-maximized={maximized || undefined} correctly renders the attribute only when maximized (true → present, undefined → omitted), so the [data-maximized] / :not([data-maximized]) attribute selectors gate exactly as intended.
  • --card-solid is defined in every theme scope that can be active (default light/dark, custom translucent light/dark, and all built-in themes), so var(--card-solid) always resolves to an opaque value — no undefined-variable fallback risk.
  • The :not([data-maximized]) guard is applied consistently to all three transparent/translucent docked rules (the base dark rule and both custom-translucent-sidebar media rules), so nothing re-introduces transparency in the maximized state. When maximized, the panel-content children revert to their default bg-card fills, but the opaque --card-solid on the <aside> sits behind them, preventing bleed-through even if --card is semi-transparent.
  • Specificity/!important interplay is sound: the docked transparent rules are excluded via :not([data-maximized]) when maximized, so the single maximized !important rule wins uncontested.

Security vulnerabilities

None. CSS-only change plus one boolean-derived data attribute; no injection, auth, or data-exposure surface.

Non-blocking notes

  • The maximized opaque rule applies across all themes, including light mode where the docked panel already uses md:bg-card. This is harmless (still opaque and theme-consistent) and arguably more robust, but note the fix is not strictly dark-mode-only despite the PR framing.
  • No automated coverage, as acknowledged. Glassmorphism/theme rendering is inherently visual; manual verification is a reasonable bar here, though a lightweight snapshot asserting data-maximized toggles on the aside would guard the React side of the contract against regression.

Summary

A clean, correct, minimal fix. The transparent-background rule is properly gated to the docked state and an opaque --card-solid backing is applied when maximized, resolving the bleed-through across all themes. No correctness or security concerns; ship it.


Automated review by Polly · workflow run

@terrytangyuan
terrytangyuan merged commit 13ce328 into omnigent-ai:main Aug 11, 2026
51 of 55 checks passed
@terrytangyuan
terrytangyuan deleted the fix/fullscreen branch August 11, 2026 03:24
@github-actions github-actions Bot added the no-doc-update Merged PR does not need a docs update label Aug 11, 2026
@github-actions

Copy link
Copy Markdown
Contributor

🏷️ Doc impact: no-doc-update

This is a purely visual CSS/styling fix giving the maximized workspace panel an opaque background so chat content doesn't bleed through — no user-facing feature, integration, policy, or documented behavior changed.

Auto-classified on merge. Set the label manually before merging to override. · run

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

Labels

no-doc-update Merged PR does not need a docs update size/S Pull request size: S

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants