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.

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

fix(web): fix thumbnail hover link overflowing past thumbnail bounds #16762

Open
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

Snowknight26
Copy link
Contributor

@Snowknight26 Snowknight26 commented Mar 10, 2025

Description

This fixes the height and z-index of the <a> element when hovering over asset thumbnails. Because the a element is absolutely positioned and shifted down 41px, it was possible navigate to the asset by clicking below the thumbnail when you didn't intend to navigate to it. Now that the z-index is correct, the element no longer has to be offset, fixing the link position.

This also fixes the search page showing scrollbars when hovering over thumbnails from the last row of results on the search results page.

How Has This Been Tested?

  • Hovered over and clicked on assets in the asset viewer
  • Hovered over and clicked on assets on the search page
  • Hovered over and clicked on additional assets when in selection mode

Screenshots (if appropriate)

Before:
image

After:
image

Checklist:

  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation if applicable
  • I have no unrelated changes in the PR.
  • I have confirmed that any new dependencies are strictly necessary.
  • I have written tests for new code (if applicable)
  • I have followed naming conventions/patterns in the surrounding code
  • All code in src/services/ uses repositories implementations for database calls, filesystem operations, etc.
  • All code in src/repositories/ is pretty basic/simple and does not have any immich specific logic (that belongs in src/services/)

@zackpollard zackpollard requested a review from midzelis March 10, 2025 08:49
@NicholasFlamy

This comment was marked as outdated.

@@ -241,7 +241,7 @@
class="absolute z-30 {className} top-[41px]"
Copy link
Member

@NicholasFlamy NicholasFlamy Mar 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if you do this?

Suggested change
class="absolute z-30 {className} top-[41px]"
class="absolute z-20 {className} top-0"

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From what I tested previously, this offset is needed, otherwise you can't click on the checkmark to actually start the selection process.

Copy link
Member

@NicholasFlamy NicholasFlamy Mar 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I figured out a solution.
Change z-30 to z-20 and on the div below change z-20 to z-30 and you can then set 0 like in my suggestion.

@NicholasFlamy
Copy link
Member

So, this issue was a regression, as it doesn't occur on v1.122.2

Correction, this issue does occur on v1.122.2. I didn't realize it behaves differently if there is an asset directly below it in the same date group.

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

Successfully merging this pull request may close these issues.

2 participants