Horizontal scroll appears when adding large classes to layout components

[bryanboza]

Problem Statement

When users add large class names to layout components in the dotCMS layout builder, a horizontal scroll bar appears in the editor. This issue occurs because the class names overflow the width of the layout editor interface, forcing horizontal scrolling. This affects the user experience by cluttering the interface and making it difficult to interact with the layout.

Steps to Reproduce

• Log into the dotCMS backend.
• Navigate to the layout builder.
• Add a row or column to the layout.
• Assign a long or descriptive class name to the row or column (e.g., "very-long-class-name-for-layout-component").

Acceptance Criteria

We need to show just the first X characters and "..." at the end in order to have a better vision of the area and all the added classes

dotCMS Version

Tested on trunk // Docker // FF

Proposed Objective

Quality Assurance

Proposed Priority

Priority 3 - Average

[bryanboza]

@melissarojas-dotcms please if you can provide some mucks for this will be great.