-
Notifications
You must be signed in to change notification settings - Fork 1.5k
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.
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
More robust edge detection #2710
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
PR Summary
This PR enhances the ChatBanner component's overflow detection mechanism, improving its ability to handle edge cases where content is on the verge of overflowing.
- Implemented robust overflow checking using
getBoundingClientRect()
for both width and height inweb/src/app/chat/ChatBanner.tsx
- Adjusted layout with improved flex and visibility settings for better content overflow handling
- Added
useLayoutEffect
hook to perform overflow checks and update state accordingly - Introduced separate visible and invisible content divs for more accurate overflow comparison
1 file(s) reviewed, 1 comment(s)
Edit PR Review Bot Settings
web/src/app/chat/ChatBanner.tsx
Outdated
<div className="absolute top-0 left-0 invisible flex justify-center max-w-full"> | ||
<div | ||
ref={fullContentRef} | ||
className={`overflow-hidden invisible${settings.enterpriseSettings.two_lines_for_chat_header ? "line-clamp-2" : "line-clamp-1"} text-center max-w-full`} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
syntax: Missing space after 'invisible' in className
Description
Previously, ellipsis at the very edge of being necessary would not quite be caught by our edge detection
Fixes https://linear.app/danswer/issue/DAN-778/banner-width-bug
How Has This Been Tested?
[Describe the tests you ran to verify your changes]
Accepted Risk
[Any know risks or failure modes to point out to reviewers]
Related Issue(s)
[If applicable, link to the issue(s) this PR addresses]
Checklist: