Skip to content

[Bug]: View mode switch button (grid view or list view) not displayed on narrow screens or mobile devices #52277

@dot-alonso

Description

@dot-alonso

⚠️ This issue respects the following points: ⚠️

Bug description

The button to switch view modes in folders (grid view or list view) disappears when the screen width is narrow (“screen” < 512). Accordingly, it is not displayed on many mobile devices, although there is enough space for it. The lack of a button makes it impossible to switch viewing modes

Videos with demonstation:
1
2

Screenshot from mobile phone:
Image

This behavior is defined here:

<NcButton v-if="fileListWidth >= 512 && enableGridView"
:aria-label="gridViewButtonLabel"
:title="gridViewButtonLabel"
class="files-list__header-grid-button"
type="tertiary"
@click="toggleGridView">
<template #icon>
<ListViewIcon v-if="userConfig.grid_view" />
<ViewGridIcon v-else />
</template>
</NcButton>

Steps to reproduce

Open any folder or public link in a narrow browser window or on mobile phone in portrait mode (screen < 512)

Expected behavior

The button should be displayed at any screen size.

Nextcloud Server version

31

Operating system

Debian/Ubuntu

PHP engine version

PHP 8.3

Web server

Apache (supported)

Database engine version

MariaDB

Is this bug present after an update or on a fresh install?

Upgraded to a MAJOR version (ex. 31 to 32)

Are you using the Nextcloud Server Encryption module?

Encryption is Disabled

What user-backends are you using?

  • Default user-backend (database)
  • LDAP/ Active Directory
  • SSO - SAML
  • Other

Configuration report

{
    "system": {
        "instanceid": "***REMOVED SENSITIVE VALUE***",
        "passwordsalt": "***REMOVED SENSITIVE VALUE***",
        "secret": "***REMOVED SENSITIVE VALUE***",
        "trusted_domains": [
            "***REMOVED SENSITIVE VALUE***"
        ],
        "datadirectory": "***REMOVED SENSITIVE VALUE***",
        "dbtype": "mysql",
        "version": "31.0.4.1",
        "overwrite.cli.url": "***REMOVED SENSITIVE VALUE***",
        "dbname": "***REMOVED SENSITIVE VALUE***",
        "dbhost": "***REMOVED SENSITIVE VALUE***",
        "dbport": "",
        "dbtableprefix": "oc_",
        "mysql.utf8mb4": true,
        "dbuser": "***REMOVED SENSITIVE VALUE***",
        "dbpassword": "***REMOVED SENSITIVE VALUE***",
        "installed": true,
        "default_phone_region": "RU",
        "simpleSignUpLink.shown": false,
        "config_is_read_only": false,
        "maintenance": false,
        "maintenance_window_start": 1,
        "filelocking.enabled": true,
        "memcache.distributed": "\\OC\\Memcache\\Redis",
        "memcache.local": "\\OC\\Memcache\\Redis",
        "memcache.locking": "\\OC\\Memcache\\Redis",
        "redis": {
            "host": "***REMOVED SENSITIVE VALUE***",
            "port": 0
        },
        "log_type": "file",
        "logfile": "\/var\/log\/nextcloud.log",
        "loglevel": 1,
        "logdateformat": "F d, Y H:i:s",
        "htaccess.RewriteBase": "\/",
        "enforce_theme": "dark",
        "mail_smtpmode": "smtp",
        "mail_sendmailmode": "smtp",
        "app_install_overwrite": {
            "0": "files_downloadactivity",
            "1": "files_archive",
            "3": "hidesidebars",
            "4": "files_scripts",
            "5": "passwords",
            "6": "files_readmemd",
            "7": "sharingpath",
            "8": "nextframe"
        },
        "enable_previews": true,
        "preview_max_scale_factor": 1,
        "theme": "",
        "defaultapp": "",
        "updater.release.channel": "stable"
    }

List of activated Apps

Enabled:
  - activity: 4.0.0
  - admin_audit: 1.21.0
  - app_api: 5.0.2
  - bruteforcesettings: 4.0.0
  - cfg_share_links: 7.0.1
  - checksum: 1.2.6
  - circles: 31.0.0
  - cloud_federation_api: 1.14.0
  - comments: 1.21.0
  - dav: 1.33.0
  - external: 6.0.2
  - federatedfilesharing: 1.21.0
  - files: 2.3.1
  - files_accesscontrol: 2.0.0
  - files_archive: 1.2.6
  - files_downloadactivity: 1.18.1
  - files_downloadlimit: 4.0.0
  - files_pdfviewer: 4.0.0
  - files_scripts: 4.1.0
  - files_sharing: 1.23.1
  - files_versions: 1.24.0
  - files_zip: 2.1.0
  - forms: 5.1.0
  - hidesidebars: 2.2.6
  - logreader: 4.0.0
  - lookup_server_connector: 1.19.0
  - metadata: 0.22.0
  - oauth2: 1.19.1
  - password_policy: 3.0.0
  - photos: 4.0.0-dev.1
  - previewgenerator: 5.8.0
  - privacy: 3.0.0
  - profile: 1.0.0
  - provisioning_api: 1.21.0
  - recommendations: 4.0.0
  - related_resources: 2.0.0
  - richdocuments: 8.6.4
  - serverinfo: 3.0.0
  - settings: 1.14.0
  - sharebymail: 1.21.0
  - socialsharing_telegram: 3.3.0
  - survey_client: 3.0.0
  - systemtags: 1.21.1
  - text: 5.0.0
  - theming: 2.6.1
  - theming_customcss: 1.18.0
  - twofactor_backupcodes: 1.20.0
  - twofactor_totp: 13.0.0-dev.0
  - unroundedcorners: 1.1.4
  - updatenotification: 1.21.0
  - user_status: 1.11.0
  - viewer: 4.0.0
  - webhook_listeners: 1.2.0
  - workflowengine: 2.13.0
Disabled:
  - contactsinteraction: 1.12.0 (installed 1.11.0)
  - dashboard: 7.11.0 (installed 7.9.0)
  - encryption: 2.19.0
  - federation: 1.21.0 (installed 1.20.0)
  - files_external: 1.23.0
  - files_readmemd: 3.0.2 (installed 3.0.2)
  - files_reminders: 1.4.0 (installed 1.4.0)
  - files_trashbin: 1.21.0 (installed 1.19.0)
  - firstrunwizard: 4.0.0 (installed 2.18.0)
  - htmlviewer: 31.0.0 (installed 31.0.0)
  - nextcloud_announcements: 3.0.0 (installed 1.18.0)
  - nextframe: 0.0.7 (installed 0.0.7)
  - notes: 4.12.0 (installed 4.12.0)
  - notifications: 4.0.0 (installed 2.17.0)
  - passwords: 2025.4.20 (installed 2025.4.20)
  - sharingpath: 0.4.4 (installed 0.4.4)
  - support: 3.0.0 (installed 2.0.0)
  - suspicious_login: 9.0.1
  - twofactor_nextcloud_notification: 5.0.0
  - user_ldap: 1.22.0
  - weather_status: 1.11.0 (installed 1.9.0)

Nextcloud Signing status

Nextcloud Logs

Additional info

This problem makes it inconvenient to work with the web interface on mobile devices

Metadata

Metadata

Assignees

No one assigned

    Labels

    0. Needs triagePending check for reproducibility or if it fits our roadmap31-feedbackbug

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions