Custom color picker is hidden behind horizontal overflow in NC29

konradmb commented 2 days ago

How to use GitHub

Please use the 👍 reaction to show that you are affected by the same issue.
Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
Subscribe to receive notifications on status change and new comments.

Steps to reproduce

Draw a rectangle.
Try to access custom stroke/background color though Island menu on the left.

Expected behaviour

Custom color picker can be accessed without horizontal overflow, like in upstream Excalidraw:

Actual behaviour

Custom color picker can not be accessed without scrolling horizontal overflow, despite plenty of space on the right to be displayed without overflow.

Probable root cause

https://help.nextcloud.com/t/css-variable-change-and-probable-regressions-in-apps/196999 https://github.com/nextcloud/whiteboard/blob/734457a6852ea789e95b0ab24d35ae7c6ce05f09/src/App.scss#L27 Changing --default-clickable-area var from 44px to 34px solves this (shouldn't right corners be rounded?): obraz

Server configuration

Web server: Nginx

Database: PostgreSQL

PHP version: 8.2.23

Nextcloud version: Nextcloud Hub 8 (29.0.7)

List of activated apps

``` If you have access to your command line run e.g.: sudo -u www-data php occ app:list from within your Nextcloud installation folder Enabled: - activity: 2.21.1 - admin_audit: 1.19.0 - bruteforcesettings: 2.9.0 - calendar: 4.7.16 - circles: 29.0.0-dev - cloud_federation_api: 1.12.0 - collectives: 2.14.3 - comments: 1.19.0 - contacts: 6.0.0 - contactsinteraction: 1.10.0 - dashboard: 7.9.0 - dav: 1.30.1 - deck: 1.13.2 - dicomviewer: 2.1.2 - drawio: 3.0.3 - external: 5.4.0 - federatedfilesharing: 1.19.0 - federation: 1.19.0 - files: 2.1.1 - files_3dmodelviewer: 0.0.14 - files_downloadlimit: 2.0.0 - files_external: 1.21.0 - files_lock: 29.0.1 - files_pdfviewer: 2.10.0 - files_reminders: 1.2.0 - files_sharing: 1.21.0 - files_trashbin: 1.19.0 - files_versions: 1.22.0 - firstrunwizard: 2.18.0 - forms: 4.2.4 - groupfolders: 17.0.3 - logreader: 2.14.0 - lookup_server_connector: 1.17.0 - nextcloud_announcements: 1.18.0 - notes: 4.11.0 - notifications: 2.17.0 - oauth2: 1.17.1 - onlyoffice: 9.4.0 - password_policy: 1.19.0 - photos: 2.5.0 - privacy: 1.13.0 - provisioning_api: 1.19.0 - quota_warning: 1.20.0 - recommendations: 2.1.0 - related_resources: 1.4.0 - serverinfo: 1.19.0 - settings: 1.12.0 - sharebymail: 1.19.0 - spreed: 19.0.9 - support: 1.12.0 - survey_client: 1.17.0 - systemtags: 1.19.0 - tables: 0.8.0 - tasks: 0.16.1 - text: 3.10.1 - theming: 2.4.0 - theming_customcss: 1.17.0 - twofactor_backupcodes: 1.18.0 - twofactor_totp: 11.0.0-dev - updatenotification: 1.19.1 - user_status: 1.9.0 - viewer: 2.3.0 - weather_status: 1.9.0 - whiteboard: 1.0.2 - workflowengine: 2.11.0 Disabled: - cadviewer: 10.10.7 (installed 10.10.7) - encryption: 2.17.0 - integration_excalidraw: 2.2.0 (installed 2.2.0) - maps: 1.4.0 (installed 1.4.0) - suspicious_login: 7.0.0 (installed 7.0.0) - user_ldap: 1.20.0 ```

Browser

Browser name: Firefox/Chromium Browser version: Firefox 130.0.1/Chromium 129.0.6668.58

Operating system: Fedora 40

konradmb commented 1 day ago

Workaround

obraz

Install https://apps.nextcloud.com/apps/theming_customcss

In /settings/admin/theming add in Custom CSS text form:

.excalidraw .Stack button,
.App .excalidraw .Stack button {
  min-width: 34px !important
}

Save

grnd-alt commented 11 hours ago

caused by this line in themes: https://github.com/nextcloud/server/blob/stable28/apps/theming/css/default.css#L55C1-L55C34 it was updated from nc 29 and before (--default-clickable-area: 48) to nc 30 (--default-clickable-area: 34)

konradmb commented 11 hours ago

it was updated from nc 29 and before (--default-clickable-area: 48) to nc 30 (--default-clickable-area: 34)

nc 29 and before - 44 px

nextcloud / whiteboard