Strange layout of sub-albums when there is no "normal" picture in the album

[Gendra13]

Lychee version

v5.2.1

Which PHP version are you using?

PHP 8.3

Detailed description of the problem

I am using a few albums as collections, meaning they have multiple sub-albums but don't contain images by themselves.
With lychee v5.1.2 they were aligned normally in one or multiple left-aligned rows.

However when updating to v5.2.1 (and also v5.2.0) there is a strange gap in the layout in front of the first cover.
As soon as I add a single image to the "root"-album, the layout is normal again, so this only happens when there are no images in the album but only sub-albums.
FYI: Since this also happens in v5.2.0 it should not be connected to #2377.

"root"-album with broken layout

Fixed layout after uploading an image into the "root"-album. That is also the way it looked with v5.1.2 even without the additional image.

Steps to reproduce the issue

1. Create an new album "root"
2. Create one or more sub-albums inside "root" but don't upload images directly into "root"
3. There will be a gap in the layout in front of the first "sub-album" cover
4. Upload an image into the "root" album and the gap is gone
5. Delete the image and the gap is back again

Diagnostics [REQUIRED]

Diagnostics
-----------
    Warning: /v**********************lic/sym/ has permissions 0775, but should have 2775
    Warning: /var/*****************torage/image-jobs/ has permissions 0775, but should have 2775
    Warning: /var/*****************torage/livewire-tmp/ has permissions 0775, but should have 2775
    Warning: Dropbox import not working. dropbox_key is empty.
    Warning: Default timezone not properly set; you might experience strange results when importing photos without explicit EXIF timezone


System Information
------------------
    Lychee Version (release):                5.2.1
    DB Version:                              5.2.1
    
    composer install:                        --no-dev
    APP_ENV:                                 production
    APP_DEBUG:                               false
    APP_URL:                                 set
    APP_DIR:                                 set
    LOG_VIEWER_ENABLED:                      true
    LIVEWIRE_ENABLED:                        true
    
    System:                                  Linux
    PHP Version:                             8.3.6
    PHP User agent:                          Lychee/4 (https://lycheeorg.github.io/)
    Timezone:                                UTC
    Max uploaded file size:                  512M
    Max post size:                           512M
    Livewire chunk size:                     12.00 MB
    Max execution time:                      300
    MySQL Version:                           10.6.16-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:                   12 found.


Config Information
------------------
    version:                                 050201
    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:                               1
    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:                 3
    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:                     oldstyle
    upload_processing_limit:                 4
    new_photos_notification:                 0
    legacy_id_redirection:                   1
    zip_deflate_level:                       6
    SA_enabled:                              0
    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:       300
    photo_layout_grid_column_width:          250
    photo_layout_square_column_width:        200
    photo_layout_gap:                        12
    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

Browser & System [REQUIRED]

Server: Ubuntu 22.04 LTS with nginx/1.18.0
Browser: Firefox 125.0.1 (64-Bit) and Chrome Version 124.0.6367.60

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]

that is weird. O.o

[ildyria]

Thank you for the investigation. I think I know where to fix that. 👍

[ildyria]

@Gendra13 could you try #2400 ?

[Gendra13]

@Gendra13 could you try #2400 ?

Thank you. Indeed that workaroud does fix the issue in my case (no description at all).

However in cases where there is a description text (and no photos beside the sub-albums) it still looks weird:

Would it be also possible to add a "new line charakter" after the description box when it is displayed, so that the list of sub-albums always start below that box when it is present?
How is this handled in albums that have both sub-albums as well as images themselfes? From what I can see, there is an additional "frame" around the different elements (header, albums, photos) , which makes the layout render correctly.

[ildyria]

However in cases where there is a description text (and no photos beside the sub-albums) it still looks weird.

Yeah I was expecting something of the sort. Surprising because it is supposed to use the full length w-full.
I'll dig more into that.

[Gendra13]

Thank you, with the new version of #2400 it is fixed.