Formatting of the gallery with a gap on the right side in justified layout

[Gendra13]

Lychee version

master (1d7fbf7)

Which PHP version are you using?

PHP 8.3

Detailed description of the problem

During my tests with different layouts, I noticed a few strange results with the formatting of the gallery when using the justified layout. Especially noticeable was a relatively large “gap” on the right side of the gallery. This was even more pronounced when watching the page from a smartphone (with an already narrow display).
Also, the “gap” seems to increase when the gallery is redrawn, like after switching to masonary and back to justified or just selecting an image in the album.

I tried to dig into the code of resources/js/layouts/useJustify.ts thinking is should be a simple formatting change, however I came across two problems which seems to cause the issue, that I could not easily fix.

1.
Regarding the gap in general:
From what I understand the code in

const containerDefaultWidth = parseInt(getComputedStyle(baseElem).width) - 36 - (timelineData.isLeftBorderVisible ? 50 : 0);
const containerWidth = timelineData.isTimeline
	? Math.min(parseInt(getComputedStyle(el).width), containerDefaultWidth)
	: parseInt(getComputedStyle(el).width); 

should check whether the timeline is enabled & visible and reduce the width of each image accordingly to account for the space used up by the timeline. However, in my tests those expressions are always evaluated as true, even if the timeline is disabled for the specific album.
As I test I aggravated the code to (timelineData.isLeftBorderVisible ? 200 : 0); and even when the timeline is off, the now very large “reserved” space is still displayed.
I could imagine, that some of this is caused by the fact, that isLeftBorderVisible if forced-on for non-SE users, however isTimeline should still be false, if the timeline is inactive for the album.

2.
Regarding the “changing” of the gap after redraw. (which also happend to other layout then justified if the are pre-selected when first opening the album)
I believe this behavior is caused by the scrollbar on the right side in larger albums. When the album is opened the first time, the calculation is based on the width of the whole browser window, without taking a scroll bar in consideration (is that the reason for the -36 in the code?). However, when the site is redrawn the browser realizes that there’s a scrollbar and getComputedStyle(baseElem).width returns a smaller value of only the remaining space, therefore the 36px are accounted for twice.
Also this makes it more noticeable on smartphones where there are no scrollbars displayed at all.

I also checked how the old version (v5) has handled that and it think the problem wasn’t present there because it mostly used flex columns which are automatically redrawn whenever the viewport changes. Would it be possible to implement flex columns also in v6. This would also allow an immediate resize of the album when the browser window is changed.

(I hope I am not too much nitpicking here. Those are just the things I noticed when comparing v5 to v6. Regardless these minor things, I wanted to say I am really impressed by the new features and wanted to thank you for the huge efford you put into Lychee).

Steps to reproduce the issue

1. Open an album with a few photos.
2. Compare the free space on the right side to the left side.
3. Strg-Click on an image -> the gap on the right increases slightly.

Diagnostics [REQUIRED]

--------------------
warning: /v**********************lic/sym/ has permissions 0755, but should have 2775
warning: /var/*****************torage/tmp/jobs/ has permissions 0755, but should have 2775
warning: /var/*****************torage/tmp/uploads/ has permissions 0755, but should have 2775
warning: Default timezone not properly set; you might experience strange results when importing photos without explicit EXIF timezone
info   : Found 1 placeholders that could be generated.
info   : Have you considered supporting Lychee? :)


Info:
--------------------
Lychee Version (git):                      master (1d7fbf7) -- Up to date (1 hours ago).
DB Version:                                6.1.2

composer install:                          --no-dev
APP_ENV:                                   production
APP_DEBUG:                                 false
APP_URL:                                   set
APP_DIR:                                   set
LOG_VIEWER_ENABLED:                        true
VUEJS_ENABLED:                             true
PHOTO_PIPES:                               true

System:                                    Linux
PHP Version:                               8.3.13
PHP User agent:                            Lychee/4 (https://lycheeorg.github.io/)
Timezone:                                  UTC
Max uploaded file size:                    512M
Max post size:                             512M
Chunk size:                                12.80 MB
Max execution time:                        300
MySQL Version:                             10.6.18-MariaDB-0ubuntu0.22.04.1

exec() Available:                          yes
Imagick Available:                         1
Imagick Enabled:                           1
Imagick Version:                           1691
GD Version:                                2.3.3
Number of foreign key:                     36 found.


Config:
--------------------
version:                                   060102
check_for_updates:                         1
sorting_photos_col:                        taken_at
sorting_photos_order:                      ASC
sorting_albums_col:                        max_taken_at
sorting_albums_order:                      ASC
imagick:                                   1
skip_duplicates:                           1
small_max_width:                           0
small_max_height:                          360
medium_max_width:                          1920
medium_max_height:                         1080
lang:                                      en
image_overlay_type:                        none
default_license:                           reserved
compression_quality:                       90
grants_full_photo_access:                  1
delete_imported:                           0
mod_frame_enabled:                         0
mod_frame_refresh:                         30
thumb_2x:                                  1
small_2x:                                  1
medium_2x:                                 1
landing_page_enable:                       0
force_migration_in_production:             0
search_public:                             0
hide_version_number:                       0
SL_enable:                                 0
SL_for_admin:                              0
recent_age:                                1
grants_download:                           0
photos_wraparound:                         1
map_display:                               1
zip64:                                     1
map_display_public:                        1
map_provider:                              OpenStreetMap.de
force_32bit_ids:                           0
map_include_subalbums:                     1
update_check_every_days:                   1
has_exiftool:                              0
share_button_visible:                      0
import_via_symlink:                        0
has_ffmpeg:                                0
location_decoding:                         1
location_decoding_timeout:                 30
location_show:                             1
location_show_public:                      1
rss_enable:                                0
rss_recent_days:                           7
rss_max_items:                             100
prefer_available_xmp_metadata:             0
editor_enabled:                            1
lossless_optimization:                     0
swipe_tolerance_x:                         150
swipe_tolerance_y:                         250
local_takestamp_video_formats:             .avi|.mov
log_max_num_line:                          1000
unlock_password_photos_with_url_param:     0
nsfw_visible:                              1
nsfw_blur:                                 0
nsfw_warning:                              0
nsfw_warning_admin:                        0
nsfw_banner_override:                      
map_display_direction:                     1
album_subtitle_type:                       takedate
upload_processing_limit:                   4
new_photos_notification:                   0
legacy_id_redirection:                     1
zip_deflate_level:                         6
default_album_protection:                  1
album_decoration:                          none
album_decoration_orientation:              row
allow_username_change:                     1
auto_fix_orientation:                      1
use_job_queues:                            1
random_album_id:                           starred
use_last_modified_date_when_no_exif_date:  0
layout:                                    justified
date_format_photo_thumb:                   D, d M Y H:i:s
date_format_photo_overlay:                 D, d M Y H:i:s
date_format_sidebar_uploaded:              D, d M Y H:i:s
date_format_sidebar_taken_at:              D, d M Y H:i:s
date_format_hero_min_max:                  F Y
date_format_hero_created_at:               M Y
date_format_album_thumb:                   M Y
upload_chunk_size:                         0
nsfw_banner_blur_backdrop:                 0
search_pagination_limit:                   1000
search_minimum_length_required:            4
photo_layout_justified_row_height:         320
photo_layout_masonry_column_width:         400
photo_layout_grid_column_width:            250
photo_layout_square_column_width:          180
photo_layout_gap:                          10
display_thumb_album_overlay:               always
display_thumb_photo_overlay:               hover
default_album_thumb_aspect_ratio:          1/1
use_album_compact_header:                  0
login_button_position:                     left
back_button_enabled:                       0
back_button_text:                          Return to Home
current_job_processing_visible:            0
SA_random_thumbs:                          0
job_processing_queue_visible:              1
login_required:                            0
enable_unsorted:                           0
enable_starred:                            0
enable_recent:                             0
enable_on_this_day:                        0
login_required_root_only:                  1
dark_mode_enabled:                         1
show_keybinding_help_popup:                0
show_keybinding_help_button:               1
disable_se_call_for_actions:               0
enable_se_preview:                         0
slideshow_timeout:                         5
keep_original_untouched:                   1
low_quality_image_placeholder:             1
timeline_photos_enabled:                   0
timeline_photos_public:                    0
timeline_photos_granularity:               day
timeline_photos_order:                     taken_at
timeline_photos_layout:                    justified
timeline_photos_pagination_limit:          200
timeline_albums_enabled:                   0
timeline_albums_public:                    0
timeline_albums_granularity:               year
timeline_left_border_enabled:              1
timeline_photo_date_format_year:           Y
timeline_photo_date_format_month:          M Y
timeline_photo_date_format_day:            j M Y
timeline_photo_date_format_hour:           g:i
timeline_album_date_format_year:           Y
timeline_album_date_format_month:          M Y
timeline_album_date_format_day:            j M
hide_nsfw_in_smart_albums:                 1
hide_nsfw_in_frame:                        1
hide_nsfw_in_map:                          1
hide_nsfw_in_search:                       1
search_photos_layout:                      square
hide_nsfw_in_rss:                          1
hide_nsfw_in_timeline:                     1

Browser & System [REQUIRED]

Server:
Ubuntu 22.04 LTS (Linux 6.8.0-48)
php8.3.12
nginx/1.18.0

Client:
Windows 10
Firefox 132.0

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I understand my bug report will be removed if I haven't met the criteria above.

[ildyria]

I hoped I had fixed that one...

I believe this behavior is caused by the scrollbar on the right side in larger albums.

Exactly.

When the album is opened the first time, the calculation is based on the width of the whole browser window, without taking a scroll bar in consideration (is that the reason for the -36 in the code?). However, when the site is redrawn the browser realizes that there’s a scrollbar and getComputedStyle(baseElem).width returns a smaller value of only the remaining space, therefore the 36px are accounted for twice.

Also this makes it more noticeable on smartphones where there are no scrollbars displayed at all.

Good point! I did not think of that one. I will see to take that info for update.

I also checked how the old version (v5) has handled that and it think the problem wasn’t present there because it mostly used flex columns which are automatically redrawn whenever the viewport changes. Would it be possible to implement flex columns also in v6. This would also allow an immediate resize of the album when the browser window is changed.

v5 had the same problem actually. v4 was also impacted but to a lesser extend.
I am still trying to figure out how to solve this one.

And yes the redrawing should ideally not be happening, as you can see, it is a tricky one...

[ildyria]

Fix on its way: https://github.com/LycheeOrg/Lychee/pull/2766/files