notes icon indicating copy to clipboard operation
notes copied to clipboard

Category selection menu is cut off

Open PowerUser64 opened this issue 1 year ago • 4 comments

The category selection menu is cut off, so not all categories are visible.

Steps to reproduce

  1. Save enough notes to make at least three new categories
  2. Open the category selection menu from the elipsis menu on the note
  3. The menu is cut off and you can't view the third item in it.

Expected behaviour

The whole menu should be visible.

Actual behaviour

Currently, only the first three items in the menu are visible.

Screenshots

Server

Please complete the following information.

  • Notes app version: 4.9.2
  • Nextcloud version: 28.0.3
  • OS: NixOS (nextcloud is running in the official nextcloud apache docker container)
  • Web server: apache
  • PHP version: ???
  • Database: mariadb

Nextcloud configuration:

{
    "system": {
        "htaccess.RewriteBase": "\/",
        "memcache.local": "\\OC\\Memcache\\APCu",
        "apps_paths": [
            {
                "path": "\/var\/www\/html\/apps",
                "url": "\/apps",
                "writable": false
            },
            {
                "path": "\/var\/www\/html\/custom_apps",
                "url": "\/custom_apps",
                "writable": true
            }
        ],
        "memcache.distributed": "\\OC\\Memcache\\Redis",
        "memcache.locking": "\\OC\\Memcache\\Redis",
        "redis": {
            "host": "***REMOVED SENSITIVE VALUE***",
            "password": "***REMOVED SENSITIVE VALUE***",
            "port": 6379
        },
        "instanceid": "***REMOVED SENSITIVE VALUE***",
        "passwordsalt": "***REMOVED SENSITIVE VALUE***",
        "secret": "***REMOVED SENSITIVE VALUE***",
        "trusted_domains": [
            "cloud.mydomain.net"
        ],
        "datadirectory": "***REMOVED SENSITIVE VALUE***",
        "dbtype": "mysql",
        "version": "28.0.0.11",
        "overwrite.cli.url": "https:\/\/cloud.mydomain.net",
        "overwriteprotocol": "https",
        "dbname": "***REMOVED SENSITIVE VALUE***",
        "dbhost": "***REMOVED SENSITIVE VALUE***",
        "dbport": "",
        "dbtableprefix": "oc_",
        "mysql.utf8mb4": true,
        "dbuser": "***REMOVED SENSITIVE VALUE***",
        "dbpassword": "***REMOVED SENSITIVE VALUE***",
        "installed": true,
        "maintenance": false,
        "loglevel": 0,
        "mail_from_address": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpmode": "smtp",
        "mail_sendmailmode": "smtp",
        "mail_domain": "***REMOVED SENSITIVE VALUE***",
        "mail_smtphost": "***REMOVED SENSITIVE VALUE***",
        "mail_smtpport": "465",
        "mail_smtpsecure": "ssl",
        "mail_smtpauth": 1,
        "mail_smtpname": "***REMOVED SENSITIVE VALUE***",
        "mail_smtppassword": "***REMOVED SENSITIVE VALUE***"
    }
}

Client

Please complete the following information.

  • Browser (incl. version): Mozilla Firefox 122.0
  • OS: NixOS

Log files

(ask if you want them, they don't seem relevant here)

PowerUser64 avatar Mar 01 '24 07:03 PowerUser64

From trying locally, there's now a scrollbar that can be used to show all the items: Image

So, believe this is fixed. Feel free to reopen if it's still a problem for you

enjeck avatar Nov 09 '24 17:11 enjeck

Sorry, maybe my original diagram wasn't clear. What I'm bringing up is it seems as though the folder list should continue beyond the end of the menu, like this:

how it is what it looks like it should be
Image Image

The scroll bar you're pointing out was there when I made this issue, but my browser (firefox) was hiding it since my mouse wasn't hovering on it.

What I'm bringing up here is that the menu you open by clicking the three dots note shouldn't have (or need) a scroll bar. The category selection menu should be on top of the three dot menu, so it isn't limited to being inside it.

@enjeck I don't have permission to re-open the issue, could you re-open it?

PowerUser64 avatar Nov 09 '24 22:11 PowerUser64

I personally don't think this is a bug, and that it's fine for the dropdown to be cropped and scrollable within its container. Especially since the dropdown can be much longer. Would like to hear what @nextcloud/designers think.

enjeck avatar Nov 10 '24 04:11 enjeck

The part that's possibly most problematic about the current design is that when the category list is too big, it creates nested scroll bars, one for the ellipses menu and one for the category menu.

So, in order to scroll through the category menu you need to hover on the category menu to get it to appear, then you scroll down, which causes the ellipses menu to scroll, then when you reach the bottom of the ellipsis menu, you need to stop scrolling for a bit so your browser "resets" which scroll bar is focused, then you scroll again to scroll in the category menu, while only being able to see a small portion of it. And, if you take your mouse off the category menu while you're scrolling, it disappears and you have to scroll around to get back to where you were.

The category menu having a scroll bar is fine, but having a tall scroll bar nested behind a small scroll bar makes it confusing to use.

I'd also like to hear what the designers think about this.

PS: I should also note that I usually search for categories, but often only being able to see two or three categories at once isn't enough to see if what I'm searching for already exists or if I need to make a new one.

PowerUser64 avatar Nov 10 '24 05:11 PowerUser64