XWIKI-22626: Long file names collide with elements from the right side on Office Importer on Firefox

[Sereza7]

Jira URL

https://jira.xwiki.org/browse/XWIKI-22626

Changes

Description

• Fixed the overflow by adding a max-width.

Clarifications

• This is a safe change that will only act when there's an overflow. The regular use case shouldn't be influenced by this change.
• Note that it's not possible to wrap this content cleanly with CSS, because it's all inside a input type='file'. There's a pseudo element to customize the button, but no way to access advanced CSS for the filename. All solutions I could find online were using JS to change the content of the displayed filename directly.

Screenshots & Video

The ticket was reported for Firefox with a zoom level above 100%, the screenshots below are taken in those conditions.
Before the changes in this PR:

After the changes in this PR:

We can see that the input does not longer overflows on the rest of the form. The overflowing filename is now partly hidden.

Executed Tests

Manual tests, see screenshots above.

Expected merging strategy

• Prefers squash: Yes
• Backport on branches:
  • 16.10.X (pretty safe style change)