chore(web): improve responsiveness in Album and Shared Album pages on small devices #11055
Conversation
| <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar --> | ||
| <section | ||
| id="asset-grid" | ||
| class="scrollbar-hidden h-full overflow-y-auto outline-none pb-[60px] {isEmpty ? 'm-0' : 'ml-4 tall:ml-0 mr-[60px]'}" | ||
| class="scrollbar-hidden h-full overflow-y-auto outline-none pb-[60px] {isEmpty | ||
| ? 'm-0' | ||
| : 'ml-4 tall:ml-0 mr-[20px] md:mr-[60px]'}" |
There was a problem hiding this comment.
Just so you know, this component is also used on other pages, such as the main timeline. Reducing the margin causes the asset grid and scrollbar to overlap and when thumbnails have a light color, the scrollbar labels have poor contrast. Maybe we can add a background color to the labels?
| Current PR | With background |
|---|---|
 |
 |
There was a problem hiding this comment.
Looks good to me. In mnbm Photos they solved it by having the scollbar labels disappear after a short timeout (might try to replicate that in a seperate PR). I've enabled edits by maintainers, I think you can push your changes to my branch.
|
I think It might be a good idea to reduce the left and right margins as well. |
Do you mean like in the reference image? To basically have no margins? |
Yes, but instead of having no margins at all like in the reference image, it would be better to reduce the current margins slightly. |
|
I've reverted those changes for now. Might try again in another PR. |
alextran1502
changed the title
Changes I made:
asset-grid: on small screens remove right marginalbum-titleand shared album page: scale font size with viewportalbum-viewerand album page: less top margin on small screensmust-not-be-named Photos for reference:
