Overflow in the details panel

[hampoelz]

Lychee version

v5.2.2

Which PHP version are you using?

PHP 8.2

Detailed description of the problem

The following two issues exist when viewing the details of photos with long descriptions:

• Words are not wrapped, which leads to an overflow in x direction
• Due to the long text, further informations are displayed too far down, which leads to an overflow in y direction

I added the following CSS code as a workaround, which fixes the word wrap and allows scrolling in y-direction:

#lychee_sidebar {
    overflow-y: scroll;
    overflow-x: clip;
    overflow-wrap: anywhere;
    padding: 10px;
}

However, on mobile devices, scrolling in the panel is recognized as a gesture that goes back to the album. I haven't found an option to disable this gesture.

Steps to reproduce the issue

No response

Diagnostics [REQUIRED]

Diagnostics
-----------
    Warning: Dropbox import not working. dropbox_key is empty.
    Info: Latest version of PHP is 8.3
    Warning: git (software) is not available.

System Information
------------------
    Lychee Version (tag):                    v5.2.2 (6a0bebe) -- Up to date (15 minutes ago).
    DB Version:                              5.2.2
    
    composer install:                        --no-dev
    APP_ENV:                                 production
    APP_DEBUG:                               false
    APP_URL:                                 set
    APP_DIR:                                 default
    LOG_VIEWER_ENABLED:                      true
    LIVEWIRE_ENABLED:                        true
    
    System:                                  Linux
    PHP Version:                             8.2.18
    PHP User agent:                          Lychee/4 (https://lycheeorg.github.io/)
    Timezone:                                Europe/Vienna
    Max uploaded file size:                  100M
    Max post size:                           100M
    Livewire chunk size:                     12.00 MB
    Max execution time:                      3600
    MySQL Version:                           10.6.17-MariaDB-1:10.6.17+maria~ubu2004
    
    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:                                 050202
    check_for_updates:                       0
    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:                         none
    compression_quality:                     90
    grants_full_photo_access:                1
    delete_imported:                         0
    mod_frame_enabled:                       1
    mod_frame_refresh:                       30
    thumb_2x:                                1
    small_2x:                                1
    medium_2x:                               1
    landing_page_enable:                     0
    force_migration_in_production:           0
    search_public:                           1
    hide_version_number:                     1
    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.org
    force_32bit_ids:                         0
    map_include_subalbums:                   1
    update_check_every_days:                 3
    has_exiftool:                            1
    share_button_visible:                    0
    import_via_symlink:                      0
    has_ffmpeg:                              1
    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:                       500
    swipe_tolerance_y:                       5
    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:                              1
    default_album_protection:                1
    album_decoration:                        all
    album_decoration_orientation:            row
    allow_username_change:                   1
    auto_fix_orientation:                    1
    use_job_queues:                          0
    random_album_id:                         starred
    use_last_modified_date_when_no_exif_date: 0
    layout:                                  justified
    date_format_photo_thumb:                 M j, Y, g:i:s A e
    date_format_photo_overlay:               M j, Y, g:i:s A e
    date_format_sidebar_uploaded:            M j, Y, g:i:s A e
    date_format_sidebar_taken_at:            M j, Y, g:i:s A e
    date_format_hero_min_max:                F Y
    date_format_hero_created_at:             M j, Y, g:i:s A T
    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:          1

Browser & System [REQUIRED]

Google Chrome v124 (arm64)
macOS v14.4

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.

[Colossus68]

At least on the desktop this was solved for me by entering the following lines in the CSS extensions in the settings:

#lychee_sidebar_container {
overflow-x: clip;
overflow-y: auto;
}
#lychee_sidebar {
padding-right: 15px;
overflow-wrap: anywhere;
}

If you don't scroll too far, this also works for me on my mobile phone (Android). If you scroll too far, the panel closes.

[ildyria]

Could you check if this fixes it: #2413

[hampoelz]

LGTM, but the scrolling issue on mobile persists.

[ildyria]

@hampoelz Updated to only trigger swipes in the movement is:
50% of the screen vertical or 25% horizontal.

See here: 44a7c0e

[ildyria]

Fixed with #2413