[Bug]: Side menu is almost unusable on small resolution #34777

Mer0me · 2022-10-24T17:18:28Z

⚠️ This issue respects the following points: ⚠️

This is a bug, not a question or a configuration/webserver/proxy issue.
This issue is not already reported on Github (I've searched it).
Nextcloud Server is up to date. See Maintenance and Release Schedule for supported versions.
Nextcloud Server is running on 64bit capable CPU, PHP and OS.
I agree to follow Nextcloud's Code of Conduct.

Bug description

My laptop screen has this screen resolution : 1366x768px

Displaying the side menu of a file with a preview on firefox maximized (but not full screen) :

It's very difficult to use the share drop-down list and to access internal link and other informations in side menu in these conditions.

Steps to reproduce

Reduce the height of the browser window or use an old screen
Display the side menu of a file with a preview thumbnail
Try to share it or to get the internal link

Expected behavior

UI should be responsive and should propose to minimize/toggle the thumbnail preview or detecting the height of the div, toggle it itself.

Installation method

Community Web installer on a VPS or web space

Operating system

Debian/Ubuntu

PHP engine version

PHP 7.4

Web server

Apache (supported)

Database engine version

MariaDB

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

No response

Are you using the Nextcloud Server Encryption module?

No response

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": [
            "merome.net",
            "cloud.merome.net",
            "192.168.1.100"
        ],
        "datadirectory": "***REMOVED SENSITIVE VALUE***",
        "overwrite.cli.url": "https:\/\/merome.net\/owncloud",
        "dbtype": "mysql",
        "version": "25.0.0.18",
        "logtimezone": "UTC",
        "installed": true,
        "theme": "",
        "loglevel": 0,
        "maintenance": false,
        "trashbin_retention_obligation": "auto",
        "dbname": "***REMOVED SENSITIVE VALUE***",
        "dbhost": "***REMOVED SENSITIVE VALUE***",
        "dbuser": "***REMOVED SENSITIVE VALUE***",
        "dbpassword": "***REMOVED SENSITIVE VALUE***",
        "mail_from_address": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpmode": "sendmail",
        "mail_domain": "***REMOVED SENSITIVE VALUE***",
        "updater.release.channel": "stable",
        "mail_sendmailmode": "smtp",
        "app_install_overwrite": [
            "calendar",
            "onlyoffice",
            "spreed",
            "files_mindmap",
            "files_texteditor",
            "external",
            "deck"
        ],
        "mysql.utf8mb4": true,
        "memcache.local": "\\OC\\Memcache\\Redis",
        "has_rebuilt_cache": true,
        "app.mail.verify-tls-peer": false,
        "default_phone_region": "FR",
        "debut": true,
        "memcache.locking": "\\OC\\Memcache\\Redis",
        "filelocking.enabled": "true",
        "redis": {
            "host": "***REMOVED SENSITIVE VALUE***",
            "port": 0,
            "timeout": 0
        },
        "trusted_proxies": "***REMOVED SENSITIVE VALUE***"
    }
}

List of activated Apps

Enabled:
  - activity: 2.17.0
  - admin_audit: 1.15.0
  - calendar: 4.0.1
  - circles: 25.0.0
  - cloud_federation_api: 1.8.0
  - comments: 1.15.0
  - contacts: 5.0.1
  - contactsinteraction: 1.6.0
  - dashboard: 7.5.0
  - dav: 1.24.0
  - external: 5.0.0
  - federatedfilesharing: 1.15.0
  - federation: 1.15.0
  - files: 1.20.1
  - files_external: 1.17.0
  - files_mindmap: 0.0.26
  - files_pdfviewer: 2.6.0
  - files_rightclick: 1.4.0
  - files_sharing: 1.17.0
  - files_texteditor: 2.14.0
  - files_trashbin: 1.15.0
  - files_versions: 1.18.0
  - files_zip: 1.1.2
  - firstrunwizard: 2.14.0
  - forms: 3.0.0
  - integration_mastodon: 1.0.3
  - integration_twitter: 1.0.3
  - logreader: 2.10.0
  - lookup_server_connector: 1.13.0
  - mail: 2.0.3
  - maps: 0.2.1
  - nextcloud_announcements: 1.14.0
  - notifications: 2.13.1
  - notify_push: 0.5.0
  - oauth2: 1.13.0
  - onlyoffice: 7.6.6
  - password_policy: 1.15.0
  - photos: 2.0.0
  - polls: 4.0.0
  - privacy: 1.9.0
  - provisioning_api: 1.15.0
  - recommendations: 1.4.0
  - related_resources: 1.0.1
  - serverinfo: 1.15.0
  - settings: 1.7.0
  - sharebymail: 1.15.0
  - snappymail: 2.19.2
  - spreed: 15.0.0
  - support: 1.8.0
  - survey_client: 1.13.0
  - suspicious_login: 4.3.0
  - systemtags: 1.15.0
  - text: 3.6.0
  - theming: 2.0.0
  - twofactor_backupcodes: 1.14.0
  - updatenotification: 1.15.0
  - user_status: 1.5.0
  - viewer: 1.9.0
  - weather_status: 1.5.0
  - workflowengine: 2.7.0
Disabled:
  - bruteforcesettings: 2.2.0
  - deck: 1.7.1
  - duplicatefinder: 0.0.15
  - emlviewer: 1.0.2
  - encryption
  - extract: 1.3.2
  - files_markdown: 2.3.6
  - passwords: 2022.10.10
  - tables: 0.2.0
  - twofactor_totp
  - user_ldap
  - workspace

Nextcloud Signing status

No errors have been found.

Nextcloud Logs

Not relevant

Additional info

No response

tmllull · 2022-10-26T09:09:15Z

Same with other sections:

Calendar: the input text for the name is "overflow" behind the limits of the calendar.

Contacts: the limit space list is "overflow" behind the settings button.

This is very frustrating...

PVince81 · 2022-10-28T12:43:23Z

it was already difficult before, now with the extra pixels from the border it got worse.

for the files sidebar the issue is mostly when there's a thumbnail, maybe that one should reduce itself further ?

@jancborchardt

szaimen · 2022-11-08T18:06:04Z

Keeping it open to keep track of it

szaimen · 2022-11-08T18:06:38Z

Needs:

backport to vue 7
new release of vue 7
merge of new vue 7 in master
backport of new vue 7 to stable25

jancborchardt · 2022-11-15T19:21:04Z

Just to be clear @szaimen, the fix is to make the whole height of the sidebar scrollable right? I think that’s good :)

szaimen · 2022-11-15T19:29:45Z

Just to be clear @szaimen, the fix is to make the whole height of the sidebar scrollable right? I think that’s good :)

Yep and thanks :)

szaimen · 2022-11-15T19:35:54Z

Reopening for the last missing step

skjnldsv · 2022-12-09T07:25:44Z

Better fix proposal, use compact mode on low-height screen resolutions.

Before	After

PVince81 · 2022-12-15T08:15:49Z

@skjnldsv can you help here ?

skjnldsv · 2022-12-15T08:38:49Z

Yep

szaimen · 2022-12-20T16:48:49Z

Ping @skjnldsv ? :)

szaimen · 2022-12-20T16:52:29Z

This has become more urgent now that vue 7.2.0 was merged into stable25. Otherwise we would need to revert vue 7.2.0 again to not risk re-introducing this regression in 25.0.3

PVince81 · 2023-01-03T09:50:35Z

@Pytal please have a look, this is also an accessibility topic and is blocking further accessibility improvements in nextcloud-vue as we can't update the library further (see #35877)

fyi @AndyScherzinger

skjnldsv · 2023-01-03T16:50:10Z

I don't remember what the issue was, but with my comment above

Better fix proposal, use compact mode on low-height screen resolutions.

There is no need for any vue update.
The only fix necessary is on server:

server/apps/files/src/views/Sidebar.vue

Line 234 in 628b0d8

compact: !this.fileInfo.hasPreview || this.isFullScreen,

Just add one screen height check here (with an onresize watcher to update accordingly)

szaimen · 2023-01-03T23:18:22Z

WIP here: #35972. @skjnldsv please have a look!

szaimen · 2023-01-04T11:48:17Z

Reopening to keep track of the backport

szaimen · 2023-01-04T12:10:54Z

[stable25] appsidebar should be compact when opened on small heights #35983

Mer0me added 0. Needs triage Pending check for reproducibility or if it fits our roadmap bug labels Oct 24, 2022

szaimen added 25-feedback ui-refresh-feedback high labels Oct 24, 2022

This was referenced Nov 1, 2022

update to Nextcloud 25 nextcloud/all-in-one#1280

Closed

fix sidebar scrolling for small displays nextcloud-libraries/nextcloud-vue#3444

Merged

szaimen added 2. developing Work in progress and removed 0. Needs triage Pending check for reproducibility or if it fits our roadmap labels Nov 8, 2022

Pytal closed this as completed in nextcloud-libraries/nextcloud-vue#3444 Nov 8, 2022

szaimen reopened this Nov 8, 2022

skjnldsv mentioned this issue Nov 15, 2022

Bump @nextcloud/vue to 7.1.0-beta0 #35179

Merged

Pytal closed this as completed in #35179 Nov 15, 2022

szaimen reopened this Nov 15, 2022

szaimen closed this as completed Nov 15, 2022

szaimen reopened this Dec 9, 2022

szaimen added 1. to develop Accepted and waiting to be taken care of and removed 2. developing Work in progress labels Dec 9, 2022

szaimen added this to the Nextcloud 25.0.3 milestone Dec 9, 2022

Pytal mentioned this issue Dec 12, 2022

Bump @nextcloud/vue to 7.2.0 #35717

Merged

PVince81 assigned skjnldsv Dec 15, 2022

szaimen added the regression label Dec 20, 2022

PVince81 assigned artonge and unassigned skjnldsv Dec 21, 2022

szaimen mentioned this issue Dec 23, 2022

[stable25] Revert "Update @nextcloud/vue to 7.2.0" #35877

Closed

arnowelzel mentioned this issue Jan 2, 2023

[Bug]: NC 25 - Share menu not fully visible when it opens upwards #35938

Open

9 tasks

PVince81 assigned Pytal and unassigned artonge Jan 3, 2023

This comment was marked as off-topic.

Sign in to view

This comment was marked as resolved.

Sign in to view

Cwpute mentioned this issue Jan 3, 2023

[Bug]: Three-dots drop-down menu broken on small screen resolution #35971

Closed

9 tasks

This comment was marked as off-topic.

Sign in to view

szaimen mentioned this issue Jan 3, 2023

appsidebar should be compact when opened on small heights #35972

Merged

szaimen added 2. developing Work in progress and removed 1. to develop Accepted and waiting to be taken care of labels Jan 3, 2023

PVince81 closed this as completed in #35972 Jan 4, 2023

szaimen reopened this Jan 4, 2023

szaimen mentioned this issue Jan 4, 2023

[stable25] appsidebar should be compact when opened on small heights #35983

Merged

1 task

szaimen closed this as completed Jan 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug]: Side menu is almost unusable on small resolution #34777

[Bug]: Side menu is almost unusable on small resolution #34777

Mer0me commented Oct 24, 2022

tmllull commented Oct 26, 2022 •

edited

Loading

PVince81 commented Oct 28, 2022

szaimen commented Nov 8, 2022

szaimen commented Nov 8, 2022 •

edited

Loading

jancborchardt commented Nov 15, 2022

szaimen commented Nov 15, 2022

szaimen commented Nov 15, 2022

skjnldsv commented Dec 9, 2022

PVince81 commented Dec 15, 2022

skjnldsv commented Dec 15, 2022

szaimen commented Dec 20, 2022

szaimen commented Dec 20, 2022

PVince81 commented Jan 3, 2023

skjnldsv commented Jan 3, 2023 •

edited

Loading

This comment was marked as off-topic.

This comment was marked as resolved.

This comment was marked as off-topic.

szaimen commented Jan 3, 2023

szaimen commented Jan 4, 2023

szaimen commented Jan 4, 2023 •

edited

Loading

[Bug]: Side menu is almost unusable on small resolution #34777

[Bug]: Side menu is almost unusable on small resolution #34777

Comments

Mer0me commented Oct 24, 2022

⚠️ This issue respects the following points: ⚠️

Bug description

Steps to reproduce

Expected behavior

Installation method

Operating system

PHP engine version

Web server

Database engine version

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

Are you using the Nextcloud Server Encryption module?

What user-backends are you using?

Configuration report

List of activated Apps

Nextcloud Signing status

Nextcloud Logs

Additional info

tmllull commented Oct 26, 2022 • edited Loading

PVince81 commented Oct 28, 2022

szaimen commented Nov 8, 2022

szaimen commented Nov 8, 2022 • edited Loading

jancborchardt commented Nov 15, 2022

szaimen commented Nov 15, 2022

szaimen commented Nov 15, 2022

skjnldsv commented Dec 9, 2022

PVince81 commented Dec 15, 2022

skjnldsv commented Dec 15, 2022

szaimen commented Dec 20, 2022

szaimen commented Dec 20, 2022

PVince81 commented Jan 3, 2023

skjnldsv commented Jan 3, 2023 • edited Loading

This comment was marked as off-topic.

This comment was marked as resolved.

This comment was marked as off-topic.

szaimen commented Jan 3, 2023

szaimen commented Jan 4, 2023

szaimen commented Jan 4, 2023 • edited Loading

tmllull commented Oct 26, 2022 •

edited

Loading

szaimen commented Nov 8, 2022 •

edited

Loading

skjnldsv commented Jan 3, 2023 •

edited

Loading

szaimen commented Jan 4, 2023 •

edited

Loading