Olivero: Header is breaking in mobile screen's when site name is two-liner.

Adding a screenshot for reference.

CommentFileSizeAuthor
#12 3211622 mobile.png39.04 KBrikki_iki
#12 3211622 tablet.png74.98 KBrikki_iki
#11 interdiff-9-11.txt2.22 KBmherchel
#11 3211622-11.patch2.28 KBmherchel
#10 After Patch 3211622 Android up.png521.68 KBchetanbharambe
#10 After Patch 3211622 iPhone up.png553.08 KBchetanbharambe
#10 Before Patch 3211622 up.png509.43 KBchetanbharambe
#9 3211622-9.patch1.2 KBkiran.kadam911
#6 After Patch 3211622 Android.png347.47 KBchetanbharambe
#6 After Patch 3211622 iPhone.png344.13 KBchetanbharambe
#6 Before Patch 3211622.png298.64 KBchetanbharambe
#4 3211622-after_without_logo.png17.14 KBAbhijith S
#4 3211622-after_with_logo.png22.65 KBAbhijith S
#4 3211622-before_with_logo.png17.24 KBAbhijith S
#4 3211622-before_without_logo.png17.54 KBAbhijith S
#2 Screenshot 2021-04-30 at 16.24.21.png44.41 KBGauravvvv
#2 Screenshot 2021-04-30 at 16.19.49.png48.7 KBGauravvvv
#2 3211622-2.patch1.2 KBGauravvvv
Screenshot 2021-04-30 at 15.56.31.png40.91 KBGauravvvv
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Gauravmahlawat created an issue. See original summary.

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commented
FileSize
3211622-2.patch1.2 KB
Screenshot 2021-04-30 at 16.19.49.png48.7 KB
Screenshot 2021-04-30 at 16.24.21.png44.41 KB

I have attached a patch. Please review.

I have attached an after-patch screenshot with the site logo and name.

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commented
Status: Active » Needs review
Abhijith S’s picture

Abhijith S CreditAttribution: Abhijith S as a volunteer and at Zyxware Technologies commented
FileSize
3211622-before_without_logo.png17.54 KB
3211622-before_with_logo.png17.24 KB
3211622-after_with_logo.png22.65 KB
3211622-after_without_logo.png17.14 KB

Applied patch #2 and it works fine. Adding screenshots below.

Before patch;
before1

before2

After patch:
after2

after1

RTBC +1

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

chetanbharambe’s picture

chetanbharambe CreditAttribution: chetanbharambe at QED42 for Drupal India Association commented
Status: Needs review » Reviewed & tested by the community
FileSize
Before Patch 3211622.png298.64 KB
After Patch 3211622 iPhone.png344.13 KB
After Patch 3211622 Android.png347.47 KB

Verified and tested patch #2.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Home Page on Responsiveness devices
# User is able to see the site name
# Go to Appearance -> Olivero setting -> Upload the logo
# Go to Home Page -> Inspect element and add 2 liner site name
# User is able to see Header and Logo are breaking when site name is two-liner.

Expected Results:
# User should not see breaking Header and logo when site name is two-liner.

Actual Results:
# User is able to see Header and Logo are breaking when site name is two-liner.

Looks good to me.
Can be a move to RTBC.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 2: 3211622-2.patch, failed testing. View results

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel at Lullabot commented
Title: Olivero: Header is breaking when site name is two-liner » Olivero: Text can be cut off at mobile if site-branding text goes to two lines
Category: Support request » Bug report

Verified this issue exists.

kiran.kadam911’s picture

kiran.kadam911
he/him
Location Mumbai, India 🇮🇳
CreditAttribution: kiran.kadam911 at QED42 for Drupal India Association commented
Status: Needs work » Needs review
FileSize
3211622-9.patch1.2 KB

Thanks, @Gauravmahlawat for the patch.

Re-rolled patch #2 for 9.3.x

Thanks!

chetanbharambe’s picture

chetanbharambe CreditAttribution: chetanbharambe at QED42 for Drupal India Association commented
Status: Needs review » Reviewed & tested by the community
FileSize
Before Patch 3211622 up.png509.43 KB
After Patch 3211622 iPhone up.png553.08 KB
After Patch 3211622 Android up.png521.68 KB

Verified and tested patch #9.
Patch applied successfully and looks good to me.

Testing Steps:
# Goto: Home Page on Responsiveness devices
# User is able to see the site name
# Go to Appearance -> Olivero setting -> Upload the logo
# Go to Home Page -> Inspect element and add 2 liner site name
# User is able to see Header and Logo are breaking when site name is two-liner.

Expected Results:
# User should not see breaking Header and logo when site name is two-liner.

Actual Results:
# User is able to see Header and Logo are breaking when site name is two-liner.

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

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
CreditAttribution: mherchel at Lullabot commented
Status: Reviewed & tested by the community » Needs review
Issue tags: +CSS
FileSize
3211622-11.patch2.28 KB
interdiff-9-11.txt2.22 KB

Thanks for the work on this!

The current patch only fixed the issue at the smallest breakpoint. The changes in this patch fix the issue at tablet-sized breakpoints as well as remove the unnecessary height: auto;

Tugboat preview at https://3211622-header-text-bnampkxdogbtmk5ff6a0gwpxbv1jjty2.tugboat.qa/

rikki_iki’s picture

rikki_iki CreditAttribution: rikki_iki at PreviousNext commented
Status: Needs review » Reviewed & tested by the community
FileSize
3211622 tablet.png74.98 KB
3211622 mobile.png39.04 KB

Latest patch looks great. Confirming it works for both mobile and tablet sizes (screenshots attached) with quite a large amount of text in there.
Marking RTBC

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 11: 3211622-11.patch, failed testing. View results

Gauravvvv’s picture

Gauravvvv CreditAttribution: Gauravvvv at OpenSense Labs commented
Status: Needs work » Reviewed & tested by the community

Restoring status, unrelated failure.

  • lauriii committed f83185a on 9.2.x 
    Issue #3211622 by Gauravmahlawat, mherchel, kiran.kadam911, rikki_iki:...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
CreditAttribution: lauriii at Acquia commented
Version: 9.3.x-dev » 9.2.x-dev
Status: Reviewed & tested by the community » Fixed

Committed df024ac and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.