Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Overlay over chats when Canvas opened only in light theme for Firefox #93

Closed
Tracked by #86
itsmartashub opened this issue Dec 14, 2024 · 0 comments · Fixed by #90
Closed
Tracked by #86

Overlay over chats when Canvas opened only in light theme for Firefox #93

itsmartashub opened this issue Dec 14, 2024 · 0 comments · Fixed by #90
Assignees
@itsmartashub
Labels
Area: Canvas Bug Something isn't working Status: Already Implemented A proposal which has already been implemented before

Comments

@itsmartashub
Copy link
Owner

itsmartashub commented Dec 14, 2024 •
edited
Loading

When the canvas is opened in the light theme and using Firefox, an overlay appears over the chats container. This overlay causes the text to be selectable, elements to be clickable, and users can copy content, but the elements are visually "ghosted" or obscured, so it probably has poiner-events: none prop on itself.
This issue is specific to the light theme and only occurs in Firefox.
Or it's not a bug, it's a privacy feature xD

The problematic overlay css selector:
html.light body div.relative.flex.h-full.w-full.overflow-hidden.transition-colors.z-0 div div.pointer-events-none.absolute.left-0.top-0.z-10.h-full.w-full.bg-black/[0.025].dark:bg-transparent

The issue arises because I'm using the [class^="bg-black"] selector to apply a full bg color, but in this case, the element is semi-transparent. I'm still unsure why OpenAI is utilizing this element and why it's fully transparent specifically for the dark theme.

Thank you @TheMaskedGuardian for helping me 🙏
@itsmartashub itsmartashub added Bug Something isn't working Status: WIP Work In Progress Area: Canvas labels Dec 14, 2024
@itsmartashub itsmartashub self-assigned this Dec 14, 2024
@itsmartashub itsmartashub mentioned this issue Dec 14, 2024
Closed
11 tasks
itsmartashub added a commit that referenced this issue Dec 15, 2024
@itsmartashub
fix(canvas/overlay): resolve chat overlay issue in light theme on Fir…
3aefa08 
…efox (#93, #86)

- Address the overlay issue that appears over the chats container when the canvas is opened in the light theme and using Firefox
- Ensure the overlay does not obstruct user interactions and is visually consistent

[The issue arises because I'm using the [class^="bg-black"] selector to apply a full bg color, but in this case, the element is semi-transparent. I'm still unsure why OpenAI is utilizing this element and why it's fully transparent specifically for the dark theme.]

Changes summary:
    - Fixed the issue where an overlay appeared over the chats container in the light theme on Firefox, ensuring it does not obstruct user interactions and is visually consistent.
@itsmartashub itsmartashub mentioned this issue Dec 15, 2024
Merged
itsmartashub added a commit that referenced this issue Dec 15, 2024
@itsmartashub
Merge pull request #90 from itsmartashub/feat/canvas
8cf3a59 
[86] Add `Canvas` text and code support

Closes: #86, #88, #89, #91, #92, #93
Still open: #94
@itsmartashub itsmartashub linked a pull request Dec 15, 2024 that will close this issue
[86] Add Canvas text and code support #90
Merged
@itsmartashub itsmartashub added Status: Already Implemented A proposal which has already been implemented before and removed Status: WIP Work In Progress labels Dec 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@itsmartashub itsmartashub

Labels
Area: Canvas Bug Something isn't working Status: Already Implemented A proposal which has already been implemented before
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[86] Add Canvas text and code support itsmartashub/GPThemes
1 participant
@itsmartashub