Manage field dropdown button breaking it's style on content type page when you have multiline description. [#3362684]

Problem/Motivation

There has been an issue observed on the 'Structure -> Content Type' page where the theming of the manage field dropdown breaks when a multiline description is added. This problem has been tested on versions 9.x, 10.x, and 11.x of the core.

Steps to reproduce

1. Drupal 10.0.x and set the claro theme as admin theme
2. Navigate to admin/structure/types and add a new content type with multiline description and save.
3. Go back to Content type listing page and now you can see the issue.

Proposed resolution

Adding a white-space: nowrap; css is resolving the issue.

Comment	File	Size	Author
#4	3362684-4.patch	1.37 KB	gauravvvv
#2	fixedwidth.png	67.23 KB	Anuja Surve
#2	3362684-1.patch	625 bytes	Anuja Surve
	Screenshot 2023-05-25 at 4.51.51 PM.png	169.07 KB	santosh_verma

Comments

Comment #1

25 May 2023 at 12:25

Santosh_Verma created an issue. See original summary.

Comment #2

Anuja Surve commented 25 May 2023 at 14:18

Status	File	Size
new	3362684-1.patch	625 bytes
new	fixedwidth.png	67.23 KB

Patch attached, please review.

Comment #3

santosh_verma commented 26 May 2023 at 06:16

Status:

Active

» Needs work

@Anuja Surve Certainly! Instead of directly modifying the CSS file, it is generally considered good practice to modify the source file and compile it to generate the final CSS file. Here's how you can approach it:

1. Locate the dropbutton.pcss.css source file that needs to be modified. This file is typically written in a preprocessor language like Sass or Less.
2. Make the necessary changes to the dropbutton.pcss.css source file.
3. Compile the modified source file to generate the final CSS file.
4. After compiling the modified source file, verify that the generated CSS file reflects your changes and create a patch.

for reference
https://www.drupal.org/docs/8/modules/claro/development

and after uploading the patch please change the status to need review

Comment #4

gauravvvv commented 29 May 2023 at 02:58

Status:

Needs work

» Needs review

Status	File	Size
new	3362684-4.patch	1.37 KB

I have added a patch for same. please review

Comment #5

santosh_verma commented 29 May 2023 at 06:47

I thoroughly tested patch #4 and verified that it functions correctly, successfully resolving the issue on popular browsers including Chrome, Safari, and Mozilla

RTBC + 1