Horizontal scroll on code block widens the entire text field

[andreas-1107]

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.

Describe the bug
Horizontal scroll was enabled for long code blocks, see in Text here. Currently the code block horizontal scroll applies to the entire card input field.

To Reproduce

Steps to reproduce the behavior:

1. Open a new card.
2. Write a long paragraph of text.
3. See the text wrap of the paragraph being suited to the size of the opened card on the screen.
4. Create a code block and enter something long in it. For example, an URL.
5. See the text wrap of the paragraph go all the way to the end of the code block.

Expected behavior

The text wrap of everything but the code block should remain with the limits of the card. Only the code block should be scrollable horizontally. For example like this (Github code block behaviour):

https://verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl.com

Note also that the code block copy icon is not at the end of the code block scroll, but is available at the end of normal text width. It would be good if Nextcloud Deck code blocks could have the same behaviour to avoid user having to scroll to the right to copy code block contents.

Screenshots

Text without code block:

Text block with code block:

How it should work:

The exact same characters as in the Nextcloud Deck card screenshot above, with the code block below it:

Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.

https://verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl-verylongurl.com

Note also that the code block copy icon is not at the end of the code block scroll, but is available at the end of normal text width. It would be good if Nextcloud Deck code blocks could have the same behaviour to avoid user having to scroll to the right to copy code block contents.

Client details:

• OS: Mac
• Browser: Firefox
• Version: 148.0.2 (aarch64)
• Device: Mac

Server details

Operating system: Debian 13

Web server: Whatever is in the latest Nextcloud AIO stable release channel - not sure how to check this.

Database: PostgreSQL 17.8

PHP version: 8.3.30

Nextcloud version: 32.0.6

Where did you install Nextcloud from: Nextcloud AIO

Signing status: No errors have been found.

Login as admin user into your Nextcloud and access
http://example.com/index.php/settings/integrity/failed
paste the results here.

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

Nextcloud configuration: Can provide if relevant.

If you have access to your command line run e.g.:
sudo -u www-data php occ config:list system
from within your Nextcloud installation folder

or

Insert your config.php content here
Make sure to remove all sensitive content such as passwords. (e.g. database password, passwordsalt, secret, smtp password, …)

Are you using an external user-backend, if yes which one: No

Logs

Nextcloud log (data/nextcloud.log)

Insert your Nextcloud log here

Browser log

Insert your browser log here, this could for example include:

a) The javascript console log
b) The network log
c) ...