Button to add a post tag breaks into new line in German translation

[stromhalm]

Hi there,

I noticed that in the German translation the "Add Post Tag" button breaks into a new line in the "Tags" widget on post pages. This is due to the 180px fixed width of the input field and the translated word "Hinzufügen" being significantly longer than the original "Add".

This can be easily reproduced on a new install with the German translation activated in the settings and the "Classic Editor" plugin installed. I understand that reproducing this bug requires the external plugin, but since the faulty CSS is still located in the Core, I would suggest it being fixed here.

Please have a look at the attached screenshots of the English and German widgets to see the problem.

[stromhalm]

Post Tags widget with the German translation activated

[stromhalm]

Widget with English localization

Hi there,

this would be as simple fix for my ticket #64088 on Trac.
It adjusts the width of the input element in the post tags widget dynamically according to the width of the "Add Post Tag" button using Flexbox.

[stromhalm]

Another screenshot with my fix from PR 10201 applied

[sabernhardt]

The 180px width goes back to [11172], for adding tags in the 'classic' editor.

The "Add" button can wrap below the input with certain languages when the Tags meta box is in a second column and when the viewport width is more than 782 pixels wide. The buttons are more than 70 pixels wide for about 40 of the ​button's translations (the number 40 is based on the Segoe UI font).

On smaller screens, the input extends the full width, and the button appears below the input with a margin. CSS flex does not work well with the current style for narrower screens.

[mukesh27]

Replying to sabernhardt:

On smaller screens, the input extends the full width, and the button appears below the input with a margin. CSS flex does not work well with the current style for narrower screens.

Agree with @sabernhardt.

[sabernhardt]

uses flex when tags box is in narrow column, switching to block on smaller screens

[sabernhardt]

I meant that flex would not work well in all situations. It still could have something like 64088.diff​.