Fix gallery close button being hidden behind the title #1181
Conversation
…behind the title
|
@julianlam is attempting to deploy a commit to the openbeta-dev Team on Vercel. A member of the Team first needs to authorize it. |
julianlam
changed the title
|
Hi @julianlam I am not able to reproduce this issue. Can add some steps to reproduce this and include the some details on device and browser? @vnugent am I able to add @julianlam to the openbeta organization (or whatever capacity it requires) so he doesn't need to PR from a fork? |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
I just added him |
|
@clintonlunn Done |
| @@ -23,14 +23,14 @@ export const DialogContent = React.forwardRef<any, Props>( | |||
| className={clx(fullScreen ? 'dialog-wide' : 'dialog-default')} {...props} ref={forwardedRef} | |||
| > | |||
| <div className='flex items-center px-2'> | |||
| <DialogPrimitive.Title className='dialog-title'> | |||
There was a problem hiding this comment.
@julianlam after some investigation, I believe the issue is actually that the <PhotoGalleryModal /> component is using the defaults.css css rules, versus what was being tested in fdb64aa, that was referencing the global.css file.
I think some evidence to point to this is the new /climb//climbId page when updated to Next13 in #1195, the DialogClose button is correctly showing. This new page would be referencing global.css.
So while your fix works, maybe the fix is instead to alter the css in defaults.css to match global.css so we aren't relying on order, but instead restricting the title from overlapping with the close button:
.dialog-title {
@apply flex-grow text-center bg-base-100 leading-none;
}
.dialog-close-button {
@apply mx-auto z-auto;
}
What do you think?
There was a problem hiding this comment.
Given that the PhotoGalleryModal is only invoked by the climbs page (I don't actually know if this is true), and that it is being refactored, might be this PR is moot and can be closed 😄
There was a problem hiding this comment.
For sure, I do think it's still valid to fix though because it definitely is an issue during the transition period of old climb page to new climb page.
Current behaviour on openbeta.io:
The close button is visible, and not clickable.
Noting that alternating the order of elements resolves the overlap issue.
Seems related (regression?) from fdb64aa which ironically was trying to fix the same thing.
Reproduction Steps
Devices, etc.