Skip to content

Japanese labels overlap form fields in External storage modal when viewport height is small #60720

@ynott

Description

@ynott

Bug description

When using Nextcloud in Japanese, labels in the "Add storage" modal of the External storage settings screen overlap with form fields when the browser viewport height is small.

This makes the External storage configuration screen difficult to read and use.

Steps to reproduce

  1. Set the Nextcloud user interface language to Japanese.
  2. Go to Administration settings.
  3. Open the External storage settings screen.
  4. Reduce the browser window height so that the modal needs to scroll.
  5. Click "Add storage".
  6. Select a storage backend, for example "SMB/CIFS".
  7. Select an authentication method, for example "Login and password".
  8. Enter values in the storage settings fields.

Actual behavior

Some Japanese labels are displayed in the wrong position and overlap with input fields or select boxes.

For example:

  • The labels around "External storage", "Authentication", and "Storage settings" overlap with the select boxes.
  • Field labels such as "Host", "Share", "Remote subfolder", and "Domain" appear too close to or on top of the input fields.
  • The issue is especially visible when the browser window height is small and the modal becomes scrollable.

Expected behavior

Labels should remain aligned correctly and should not overlap with input fields, select boxes, or other form elements.

The External storage settings modal should remain readable and usable in Japanese, even when the browser viewport height is small.

Screenshots

small viewport height sufficient viewport height
Image Image

I added a comparison screenshot.

Left: broken layout when the browser viewport height is small.
Right: normal layout when the browser viewport height is sufficient.

Environment

  • Nextcloud version: Nextcloud Hub 26 Winter (33.0.3)
  • App: External storage support
  • External storage support app version: 1.25.1
  • UI language: Japanese
  • Browser: Google Chrome
  • Browser version: 148.0.7778.179 (Official Build) (64-bit)
  • Operating system: Windows 11 Pro 25H2
  • OS build: 26200.8457
  • Storage backend tested: SMB/CIFS
  • Authentication method tested: Login and password
  • Condition: The issue occurs when the browser viewport height is small.

Additional context

This looks like a layout issue related to the modal height, scrolling behavior, and floating/input labels in Japanese.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status

    To triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions