Olivero's Title overflow when title link text too long.

Applied patch #3 and it works fine.The title becomes properly aligned after applying this patch.

Before path:

After patch:

RTBC +1

I have attached the before and after patch screenshot for reference.
Moving to RTBC.

Test failure was caused by #3207086: [HEAD BROKEN] Consistent failure in MonthDatePluginTest which is fixed. Ordered retest and put this issue back to RTBC per #6.

Restoring status after HEAD was broken.

+++ b/core/themes/olivero/css/base/base.pcss.css
@@ -21,6 +21,7 @@ html {
+  word-wrap: break-word;

Based on https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap word-wrap is deprecated. Should we use overflow-wrap instead?

Verified and tested patch#3 on Olivero 9.3.0-dev version with 9.3.x-dev
Patch applied successfully and result is Acceptable.

Testing Steps:

1. Install Drupal 9.3.x-dev version.
2. Go to Appearance -> Set Olivero theme as admin and default theme
3. Create a Basic HTML page node and add the title with long Text
4. Save and Verify the before patch on Front end
5. Now Apply patch and clear the cache and re verify the after patch on created HTML Page node

Testing Output:

After applying the patch the title is displayed properly in wrapped form. Please refer attached Before patch and After patch images for reference. Hence moving this ticket to RTBC.

Moving to NW

As per @lauriii's comment in https://www.drupal.org/project/drupal/issues/3210358#comment-14155124

Also the bug fix seems potentially high risk since it impacts all elements.

Since the overflow is specific for the title element, the fix should be applied only for the title.

Added a patch to update the .page-title
Also, added a hypen to specify the break.

Verified and tested patch #17 on the drupal 9.3.x-dev version. Patch applied successfully.

Testing Steps:

• Install Drupal 9.3.x-dev version
• Set Olivero theme as admin and default theme (from Appearance)
• Create a Basic article page add the long text in the title field.
• Save and Verify the title of the article page.

Expected Result:

• User should see the title in the compact format.

Actual Results:

• User is able to see the title in compact format. No title overflow.

Please refer attached screenshot.
This is can be move to RTBC.

In order to properly test this, we'll need screenshots in Chrome, FF, and Safari of long text breaking, as well as properly spaced text to ensure that it doesn't improperly break.

Adding after patch screenshots on Chrome and Firefox, I can't test this on Safari.

Thanks for the screenshots, but the spacing screenshot needs to tell me if the word breaks are in the correct place.

Unfortunately, I can't tell where they are supposed to be. It would be nice if we had words when testing out the spacing. Such as 'test test test' etc.

Hey mherchel,
It breaks the line after the space. Adding others screenshot to reference, is that what you wanted?

Verified and tested patch #17.
Patch applied successfully.

Testing Steps:
# Go to Appearance -> Set Olivero theme
# Create a basic page with a long title and long body without any space
# Save it
# See the results

Expected Results:
# Title should not overflow when title link text is too long.

Actual Results:
# Title overflow when title link text is too long.

Issue: Currently Page is not stable and it's horizontally scrollable.

Please refer attached screenshots.
Looks good to me.
Can be a move to Needs work.

This is a normal priority bug under the normal issue priority definition, which specifically refers to:

Bugs for site visitors that do not interfere with site use, for example, visual layout issues.

Applied patch #3 working fine after patch the body field coming in proper layout
Thanks for the patch
for ref sharing screenshot

I have applied patch #3 before and after screenshots.

@Shubham Sharma 77 @vikashsoni @chetanbharambe and anyone else testing this issue, please:

1) Do not test something again if you are just testing the same thing. There have been 6 people who have tested this issue since the patch was provided and it would be much more helpful if people read the previous comments and respond accordingly.

2) Note the browsers and testing steps.

3) See #24 for testing directions. Some of these things have been tested already, you can look at the various comments and figure out what is left to test.

Applied patch #34 cleanly. Adding results as screenshots.

Tested #34 and it worked perfectly.

#34 doesn't provide proper line breaking in all browsers.

Attaching image of Safari as an example.

This issue is trickier than it seems. CSS does not give us proper tools to take into account all use cases, and I don't want to bloat the page with JavaScript.

This issue is a duplicate of #3177475: Olivero: Ensure long words break properly when zoomed in to provide proper reflow (the same issue marked as related). If you go through the (long) comments, you can see various explanations, code samples, codepens, accessibility reviews, etc.