Skip to content

Conversation

uhthomas
Copy link
Collaborator

@uhthomas uhthomas commented Aug 6, 2025

Description

The thumbhash had a z-index setting which meant it would cover the search bar, and would always cause weird animations when scrolling up in search results.

This is fixable by removing the z-index and moving it in front the other elements to get a naturally higher higher z-index preference.

How Has This Been Tested?

I've tested locally, but I can also test on the preview instance too.

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/)

Copy link
Contributor

github-actions bot commented Aug 6, 2025

Deploying preview environment to https://pr-20720.preview.internal.immich.cloud/

{#if (!loaded || thumbError) && asset.thumbhash}
<canvas
use:thumbhash={{ base64ThumbHash: asset.thumbhash }}
class="absolute object-cover"
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

also note the z index class has been removed

@uhthomas uhthomas requested a review from midzelis August 6, 2025 15:23
@uhthomas
Copy link
Collaborator Author

uhthomas commented Aug 6, 2025

I'm going to find out why we define the thumbhash in two places and which is the right one to use, and whether it breaks displaying errors.

@uhthomas
Copy link
Collaborator Author

uhthomas commented Aug 6, 2025

So from testing quickly, it's not making anything worse. It looks like thumbhashes already hide the error state. I'll try and clean it up though as I'm here.

@uhthomas uhthomas force-pushed the fix-web-thumbhash-z-index branch 4 times, most recently from 440fffd to 3f42693 Compare August 6, 2025 15:49
The thumbhash had a z-index setting which meant it would cover the search bar,
and would always cause weird animations when scrolling up in search results.

This is fixable by removing the z-index and moving it in front the other
elements to get a naturally higher higher z-index preference.
Copy link
Member

@alextran1502 alextran1502 left a comment

Choose a reason for hiding this comment

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

Nice fix!

@alextran1502 alextran1502 merged commit f36efd1 into main Aug 6, 2025
53 checks passed
@alextran1502 alextran1502 deleted the fix-web-thumbhash-z-index branch August 6, 2025 21:57
@github-actions github-actions bot removed the preview label Aug 6, 2025
ollioddi pushed a commit to ollioddi/immich that referenced this pull request Aug 11, 2025
)

The thumbhash had a z-index setting which meant it would cover the search bar,
and would always cause weird animations when scrolling up in search results.

This is fixable by removing the z-index and moving it in front the other
elements to get a naturally higher higher z-index preference.
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