[GH-ISSUE #22] Bug: Viewport container blocking user interactions #18

New issue

Open

opened 2026-03-02 05:16:33 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 05:16:33 +03:00

Owner

Originally created by @AmauryAparicio on GitHub (Feb 20, 2026).
Original GitHub issue: https://github.com/hiaaryan/sileo/issues/22

Originally assigned to: @hiaaryan on GitHub.

Technical Analysis

The element <button data-sileo-toast="true"> is acting as an invisible overlay that extends across a significant portion of the header (highlighted in purple/blue in the dev tools). Because this container sits higher in the z-index stack but occupies physical space, it captures clicks and hovers intended for the icons (Heart, Sun, Profile) underneath.

Proposed Fix (CSS)

To allow interactions to "pass through" the empty space of the viewport while still allowing the actual notification to be clickable, apply the following:

/* 1. Set height to 0, it does not affect functionality and stops any unexpected interactions */
[data-sileo-toast="true"] {
  height: 0;
}

This might only be a partial solution, might need an actual fix on how toast is rendered.

Originally created by @AmauryAparicio on GitHub (Feb 20, 2026). Original GitHub issue: https://github.com/hiaaryan/sileo/issues/22 Originally assigned to: @hiaaryan on GitHub. ## Technical Analysis The element `<button data-sileo-toast="true">` is acting as an invisible overlay that extends across a significant portion of the header (highlighted in purple/blue in the dev tools). Because this container sits higher in the z-index stack but occupies physical space, it captures clicks and hovers intended for the icons (Heart, Sun, Profile) underneath. ## Proposed Fix (CSS) To allow interactions to "pass through" the empty space of the viewport while still allowing the actual notification to be clickable, apply the following: ```CSS /* 1. Set height to 0, it does not affect functionality and stops any unexpected interactions */ [data-sileo-toast="true"] { height: 0; } ``` This might only be a partial solution, might need an actual fix on how toast is rendered. <img width="691" height="383" alt="Image" src="https://github.com/user-attachments/assets/cefc275f-14be-4913-a0b8-e9125d264a3e" />