[Bug] Last app icon of top menu doesn't show properly upon 90% of zoom #434

New issue

Open

opened 2025-05-26 17:59:39 +02:00 by gio-educ · 0 comments

gio-educ commented

2025-05-26 17:59:39 +02:00

Environment

Custom menu version: 5.1.1
Nextcloud version: 31.0.5
PHP version: 8.3.6
Web server (Nginx, Apache2): Apache/2.4.58 (Ubuntu) (apache2handler)

- Web browser and version (Firefox 80, Google Chrome 74, etc): Checked in Chrome and Firefox for Windows

Configuration

{
  "add-logo-link": true,
  "always-displayed": false,
  "apps-categories-custom": {
    "external_index1": "cat19253798270638844",
    "external_index2": "cat3349012556544273",
    "external_index3": "cat3349012556544273",
    "external_index8": "cat7791097921989013",
    "dashboard": "customization",
    "integration_github": "integration",
    "ocs_api_viewer": null,
    "photos": "multimedia",
    "polls": "organization",
    "contacts": "social",
    "announcementcenter": "tools",
    "analytics": "tools",
    "forms": "tools",
    "tables_application_3": "tools",
    "tables_application_5": "tools",
    "tables": "tools",
    "appointments": null
  },
  "apps-order": [
    "external_index1",
    "external_index2",
    "external_index3",
    "external_index8",
    "activity",
    "calendar",
    "collectives",
    "dashboard",
    "deck",
    "files",
    "forms",
    "mail",
    "notes",
    "photos",
    "polls",
    "snappymail",
    "tables",
    "spreed",
    "tasks"
  ],
  "background-color": "#7e5fb8",
  "background-color-opacity": 100,
  "background-color-to": "#7e5fb8",
  "big-menu": false,
  "big-menu-hidden-apps": [],
  "categories-custom": [
    {
      "id": "cat19253798270638844",
      "en": "Websites",
      "de": "Webseiten ",
      "en_GB": "Websites",
      "es": "Sitios web"
    },
    {
      "id": "cat7791097921989013",
      "en": "Collaboration",
      "de": "Kollaboration ",
      "en_GB": "Collaboration",
      "es": "Collaboración"
    },
    {
      "id": "cat3349012556544273",
      "en": "Learning & Teaching",
      "de": "Lernen & Lehre",
      "en_GB": "Learning & Teaching",
      "es": "Aprendizaje y enseñanza"
    }
  ],
  "categories-order": [
    "cat19253798270638844",
    "cat3349012556544273",
    "cat7791097921989013",
    "other",
    "customization",
    "dashboard",
    "external_links",
    "files",
    "workflow",
    "games",
    "integration",
    "monitoring",
    "multimedia",
    "office",
    "organization",
    "search",
    "security",
    "social",
    "tools"
  ],
  "categories-order-type": "custom",
  "current-app-background-color": "#6e53a1",
  "dark-mode-background-color": "#7e5fb8",
  "dark-mode-background-color-opacity": 66,
  "dark-mode-background-color-to": "#7e5fb8",
  "dark-mode-current-app-background-color": "#6e53a1",
  "dark-mode-icon-invert-filter": 0,
  "dark-mode-icon-opacity": 100,
  "dark-mode-loader-color": "#FFFFFF",
  "dark-mode-opener": "side-menu-opener",
  "dark-mode-text-color": "#FFFFFF",
  "default-enabled": true,
  "display-logo": true,
  "external-sites-in-top-menu": false,
  "force": false,
  "force-light-icon": false,
  "icon-invert-filter": 0,
  "icon-opacity": 100,
  "loader-color": "#B38FF3",
  "loader-enabled": true,
  "opener": "side-menu-opener",
  "opener-hover": false,
  "opener-only": false,
  "opener-position": "before",
  "show-settings": true,
  "side-with-categories": true,
  "size-icon": "normal",
  "size-text": "normal",
  "target-blank-apps": [
    "external_index1",
    "external_index2",
    "external_index3",
    "external_index8"
  ],
  "text-color": "#fafafa",
  "top-menu-apps": [
    "external_index1",
    "external_index2",
    "external_index3",
    "external_index8"
  ],
  "top-menu-mouse-over-hidden-label": 0,
  "top-side-menu-apps": [
    "external_index1",
    "external_index2",
    "external_index3",
    "external_index8"
  ],
  "use-avatar": false
}

Steps to reproduce

Activate Custom Menu with a list of applications to be shown on the top menu
Reduce the zoom on the browser until 80%
Increase it (ctrl + +) and observe what whappend when you are on 90% within the last app icon

Observed Results

With zoom under 90% there is no problem, but upon 90% and beyond, the last icon doesn't show aligned with the previous one, and it doesn't show the name of the app by hover it.

Dark mode in Chrome:

Light mode in Firefox:

Expected Results

The last icon show be shown and perform as the rest of them

More informations

No response

### Environment * Custom menu version: 5.1.1 * Nextcloud version: 31.0.5 * PHP version: 8.3.6 * Web server (Nginx, Apache2): Apache/2.4.58 (Ubuntu) (apache2handler) - * Web browser and version (Firefox 80, Google Chrome 74, etc): Checked in Chrome and Firefox for Windows ### Configuration ``` { "add-logo-link": true, "always-displayed": false, "apps-categories-custom": { "external_index1": "cat19253798270638844", "external_index2": "cat3349012556544273", "external_index3": "cat3349012556544273", "external_index8": "cat7791097921989013", "dashboard": "customization", "integration_github": "integration", "ocs_api_viewer": null, "photos": "multimedia", "polls": "organization", "contacts": "social", "announcementcenter": "tools", "analytics": "tools", "forms": "tools", "tables_application_3": "tools", "tables_application_5": "tools", "tables": "tools", "appointments": null }, "apps-order": [ "external_index1", "external_index2", "external_index3", "external_index8", "activity", "calendar", "collectives", "dashboard", "deck", "files", "forms", "mail", "notes", "photos", "polls", "snappymail", "tables", "spreed", "tasks" ], "background-color": "#7e5fb8", "background-color-opacity": 100, "background-color-to": "#7e5fb8", "big-menu": false, "big-menu-hidden-apps": [], "categories-custom": [ { "id": "cat19253798270638844", "en": "Websites", "de": "Webseiten ", "en_GB": "Websites", "es": "Sitios web" }, { "id": "cat7791097921989013", "en": "Collaboration", "de": "Kollaboration ", "en_GB": "Collaboration", "es": "Collaboración" }, { "id": "cat3349012556544273", "en": "Learning & Teaching", "de": "Lernen & Lehre", "en_GB": "Learning & Teaching", "es": "Aprendizaje y enseñanza" } ], "categories-order": [ "cat19253798270638844", "cat3349012556544273", "cat7791097921989013", "other", "customization", "dashboard", "external_links", "files", "workflow", "games", "integration", "monitoring", "multimedia", "office", "organization", "search", "security", "social", "tools" ], "categories-order-type": "custom", "current-app-background-color": "#6e53a1", "dark-mode-background-color": "#7e5fb8", "dark-mode-background-color-opacity": 66, "dark-mode-background-color-to": "#7e5fb8", "dark-mode-current-app-background-color": "#6e53a1", "dark-mode-icon-invert-filter": 0, "dark-mode-icon-opacity": 100, "dark-mode-loader-color": "#FFFFFF", "dark-mode-opener": "side-menu-opener", "dark-mode-text-color": "#FFFFFF", "default-enabled": true, "display-logo": true, "external-sites-in-top-menu": false, "force": false, "force-light-icon": false, "icon-invert-filter": 0, "icon-opacity": 100, "loader-color": "#B38FF3", "loader-enabled": true, "opener": "side-menu-opener", "opener-hover": false, "opener-only": false, "opener-position": "before", "show-settings": true, "side-with-categories": true, "size-icon": "normal", "size-text": "normal", "target-blank-apps": [ "external_index1", "external_index2", "external_index3", "external_index8" ], "text-color": "#fafafa", "top-menu-apps": [ "external_index1", "external_index2", "external_index3", "external_index8" ], "top-menu-mouse-over-hidden-label": 0, "top-side-menu-apps": [ "external_index1", "external_index2", "external_index3", "external_index8" ], "use-avatar": false } ``` ### Steps to reproduce 1. Activate Custom Menu with a list of applications to be shown on the top menu 2. Reduce the zoom on the browser until 80% 3. Increase it (ctrl + +) and observe what whappend when you are on 90% within the last app icon ### Observed Results With zoom under 90% there is no problem, but upon 90% and beyond, the last icon doesn't show aligned with the previous one, and it doesn't show the name of the app by hover it. Dark mode in Chrome: ![image](/attachments/9b40bab1-f89d-4ed3-b1ce-e598cb6c5181) Light mode in Firefox: ![image](/attachments/a1d0678e-09e7-4641-af23-2407ea0a4a3a) ### Expected Results The last icon show be shown and perform as the rest of them ### More informations _No response_

image.png

58 KiB

image.png

78 KiB