immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-07-25 14:00:45 +03:00
Code Issues 783 Packages Projects Releases 22 Wiki Activity

Favorite person icon overlapping name #5355

New Issue
Closed
opened 2026-02-05 11:22:27 +03:00 by OVERLORD · 2 comments
OVERLORD commented 2026-02-05 11:22:27 +03:00
Owner
Copy Link

Originally created by @viki53 on GitHub (Feb 10, 2025).

The bug

Hi,

I just updated to v1.126 and it went smoothly except for one small UI bug.

Once I've added a few people as favorites, when I went to the exlpore page to check out the new place UI, I saw that the heart icons on the persons I had just tagged were misaligned and overlapping

Screenshot of the bug

I don't think the absolute property in CSS is a good idea in general as it can quickly cause this kind of overlapping.

Maybe just put the icon inline with the name, or position it over the photo on one side? absolute top-0 left-0 z-10 classes would work as a quick fix, although probably not perfect.

Note that this bug doesn't happen on the People page, only in the Explore page.

The OS that Immich Server is running on

Ubuntu 24.04.1

Version of Immich Server

v1.126.0

Version of Immich Mobile App

N/A

Platform with the issue

  • Server
  • Web
  • Mobile

Your docker-compose.yml content

N/A

Your .env content

N/A

Reproduction steps

  1. Add a person (or a few) as favorite
  2. Go to the Explore page
  3. Look at the names of the persons you just tagged
    ...

Relevant log output

Additional information

No response

Originally created by @viki53 on GitHub (Feb 10, 2025). ### The bug Hi, I just updated to v1.126 and it went smoothly except for one small UI bug. Once I've added a few people as favorites, when I went to the exlpore page to check out the new place UI, I saw that the heart icons on the persons I had just tagged were misaligned and overlapping <img width="276" alt="Screenshot of the bug" src="https://github.com/user-attachments/assets/e29d1ea5-3d8a-4686-b81c-c8dd70ee638b" /> I don't think the `absolute` property in CSS is a good idea in general as it can quickly cause this kind of overlapping. Maybe just put the icon inline with the name, or position it over the photo on one side? `absolute top-0 left-0 z-10` classes would work as a quick fix, although probably not perfect. Note that this bug doesn't happen on the People page, only in the Explore page. ### The OS that Immich Server is running on Ubuntu 24.04.1 ### Version of Immich Server v1.126.0 ### Version of Immich Mobile App N/A ### Platform with the issue - [ ] Server - [x] Web - [ ] Mobile ### Your docker-compose.yml content ```YAML N/A ``` ### Your .env content ```Shell N/A ``` ### Reproduction steps 1. Add a person (or a few) as favorite 2. Go to the Explore page 3. Look at the names of the persons you just tagged ... ### Relevant log output ```shell ``` ### Additional information _No response_
OVERLORD commented 2026-02-05 11:22:30 +03:00
Author
Owner
Copy Link

@caburum commented on GitHub (Feb 28, 2025):

It also shows up over the menu on the explore page.

Image

@caburum commented on GitHub (Feb 28, 2025): It also shows up over the menu on the explore page. ![Image](https://github.com/user-attachments/assets/57ba1124-be03-4145-8cc0-c5751d178126)
OVERLORD commented 2026-02-05 11:22:31 +03:00
Author
Owner
Copy Link

@viki53 commented on GitHub (Mar 1, 2025):

I would have gone with top-4 left-4 rather than *-2, as it currently barely overlaps the photo in the Explore page, making the heart appear truncated.

With *-4 it sits truly on top of the photo.

@viki53 commented on GitHub (Mar 1, 2025): I would have gone with `top-4 left-4` rather than `*-2`, as it currently barely overlaps the photo in the Explore page, making the heart appear truncated. With `*-4` it sits truly on top of the photo.
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
changelog:enhancement
changelog:security
changelog:skip
changelog:translation
cli
date-time
dependencies
documentation
external-library
format
good first issue
mobile-beta
mobile-beta
mobile-beta
needs-answer
nice to have
pull-request
Mirrored from GitHub Pull Request
 sharing
tech-debt
📱mobile
🖥️web
🗄️server
🧠machine-learning
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#5355
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?