Text overlapping issue on mobile [#3188407]

While using Admin toolbar search module along with Admin toolbar, on small screen sizes (xm). The search toolbar overlaps certain sections of the header like the breadcrumb

Before:

After:

Comment	File	Size	Author
#42	after-patch-test.png	23.07 KB	dsandhya
#42	before-patch-test.png	21.06 KB	dsandhya
#39	3188407-39.patch	614 bytes	Shubham Sharma 77
#39	Before-patch.png	162.61 KB	Shubham Sharma 77
#39	After-patch.png	117.45 KB	Shubham Sharma 77
#34	3188407-34.patch	1.07 KB	Munavijayalakshmi
#32	after_3188407.png	30.86 KB	Munavijayalakshmi
#32	before_3188407.png	27.03 KB	Munavijayalakshmi
#32	3188407-32.patch	878 bytes	Munavijayalakshmi
#30	3188407-30.patch	437 bytes	Manibharathi E R
#29	3188407-29.patch	436 bytes	Manibharathi E R
#28	3188407-28.patch	1.85 KB	Manibharathi E R
#26	3188407-26.patch	1.85 KB	Manibharathi E R
#25	3188407-25.patch	1.84 KB	Manibharathi E R
#24	After-Patch-apply.png	38 KB	Manibharathi E R
#24	Before-Patch-apply.png	34.41 KB	Manibharathi E R
#24	3188407-24.patch	932 bytes	Manibharathi E R
#23	Screen Shot 2022-07-19 at 7.18.50 PM.png	62.27 KB	smustgrave
#22	3188407-Admin-Toolbar-Search-3.png	94.23 KB	Harish1688
#22	3188407-Admin-Toolbar-Search-2.png	52.94 KB	Harish1688
#22	3188407-Admin-Toolbar-Search.png	62.48 KB	Harish1688
#18	3188407--after--patch--pic.png	31.91 KB	vikashsoni
#18	3188407--before--patch--pic.png	31.63 KB	vikashsoni
#15	text_overlapping_issue_on_mobile-3188407-15.patch	1002 bytes	revati_gawas
#12	AP 3188407 iPad.png	209.2 KB	chetanbharambe
#12	AP 3188407 S5.png	268.37 KB	chetanbharambe
#12	AP 3188407 iPhone.png	199.99 KB	chetanbharambe
#12	BP 3188407 iPhone.png	269.15 KB	chetanbharambe
#9	3188407.9.patch	510 bytes	sakthivel m
#9	After-patch.png	87.74 KB	sakthivel m
#9	Before-patch.png	91.79 KB	sakthivel m
#6	3188407_after_2.png	29.01 KB	abhijith s
#6	3188407-after_1.png	32.53 KB	abhijith s
#5	After-patch.png	20.03 KB	bhumikavarshney
#5	before-patch.png	18.98 KB	bhumikavarshney
#4	3188407-4.patch	520 bytes	djsagar
#4	Screen Shot 2020-12-15 at 1.33.08 PM.png	48.98 KB	djsagar
	Screen Shot 2020-12-15 at 12.09.36 PM.png	423.49 KB	djsagar

Issue fork drupal-3188407

Show commands

Start within a Git clone of the project using the version control instructions.

Add & fetch this issue fork’s repository

Or, if you do not have SSH keys set up on git.drupalcode.org:

Add & fetch this issue fork’s repository

3188407-text-overlapping-issue compare
Check out this branch for the first time

Check out existing branch, if you already have it locally

About issue forks

Comments

Comment #1

15 December 2020 at 06:47

djsagar created an issue. See original summary.

Comment #2

djsagar commented 15 December 2020 at 06:48

Issue summary:

View changes

Comment #3

djsagar commented 15 December 2020 at 06:50

Title:

Text overlapping issue on mbile

» Text overlapping issue on mobile

Comment #4

djsagar commented 15 December 2020 at 08:06

Status:

Active

» Needs review

Status	File	Size
new	Screen Shot 2020-12-15 at 1.33.08 PM.png	48.98 KB
new	3188407-4.patch	520 bytes

After applied the patch which affected. and also affected the screen sort for the mobile view.

Comment #5

bhumikavarshney commented 4 March 2021 at 11:41

Status	File	Size
new	before-patch.png	18.98 KB
new	After-patch.png	20.03 KB

Patch #4, seems working fine. Moving to RTBC +1. Added an after and before patch screenshot for reference.

Comment #6

abhijith s commented 16 March 2021 at 13:59

Status	File	Size
new	3188407-after_1.png	32.53 KB
new	3188407_after_2.png	29.01 KB

Applied patch #4 and its not working.

After patch:
after1

after2

Comment #7

abhijith s commented 16 March 2021 at 14:00

Status:

Needs review

» Needs work

Comment #8

anjalivijay commented 18 March 2021 at 06:27

Assigned:

Unassigned

» anjalivijay

Status	File	Size
new	Before-patch.png	91.79 KB
new	After-patch.png	87.74 KB
new	3188407.9.patch	510 bytes

Comment #10

djsagar commented 21 April 2021 at 19:29

Assigned:

anjalivijay

» Unassigned

Comment #11

chetanbharambe commented 28 April 2021 at 04:53

Assigned:

Unassigned

» chetanbharambe

Comment #12

chetanbharambe commented 28 April 2021 at 06:26

Status	File	Size
new	BP 3188407 iPhone.png	269.15 KB
new	AP 3188407 iPhone.png	199.99 KB
new	AP 3188407 S5.png	268.37 KB
new	AP 3188407 iPad.png	209.2 KB

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

Testing Steps:
# Goto: /admin/Content
# User should not see Text overlapping issue on responsiveness. (When the User installs the admin toolbar module, the Admin Toolbar Quick Search should not overlap.)

Looks good to me.
Can be a move to RTBC
Please refer attached screenshots for Before and After patch.

Comment #13

chetanbharambe commented 28 April 2021 at 06:26

Assigned:	chetanbharambe	» Unassigned
Status:	Needs review	» Reviewed & tested by the community

Comment #14

lauriii

he/him

Finnish

Finland

commented 27 May 2021 at 14:04

Status:	Reviewed & tested by the community	» Needs work
Issue tags:		+Needs issue summary update

This increases the padding for all users, even those not using admin toolbar search which I think we don't want. Either way, I don't think this is specific to admin toolbar. Any set of toolbar configuration that makes the toolbar wrap into multiple lines would cause this issue.

Comment #15

revati_gawas

English

Sawantwadi, Maharashtra

commented 3 June 2021 at 12:19

Status:

Needs work

» Needs review

Status	File	Size
new	text_overlapping_issue_on_mobile-3188407-15.patch	1002 bytes

Here is the clean patch against 8.9.x branch which solve the above issue. Can someone please review.
Thank you!

Comment #16

3 June 2021 at 12:19

Version:

8.9.x-dev

» 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Comment #17

3 June 2021 at 12:19

Version:

9.2.x-dev

» 9.3.x-dev

Comment #18

vikashsoni commented 25 January 2022 at 11:34

Status	File	Size
new	3188407--before--patch--pic.png	31.63 KB
new	3188407--after--patch--pic.png	31.91 KB

Applied patch #9 applied successfully
Thanks for the patch
for ref sharing screenshot ....

Comment #19

kristen pol

she/her

English

Santa Cruz, CA, USA

commented 23 February 2022 at 08:54

@revati_gawas Can you figure out a way to do this without using !important?

It's barely used in the Seven theme and mostly for the print.css and the only place I see it used with position is in skip-link.css.

[drupal-10.0.x-dev/10.0.x] [seven]$ grep -r "\!important" .
./css/components/skip-link.css:  position: absolute !important;
./css/components/tabs.css:  max-height: none !important;
./css/components/tabs.css:  padding-top: 0 !important;
./css/components/views-ui.css:  border-right: 1px solid transparent !important;
./css/components/views-ui.css:  border-left: 1px solid transparent !important;
./css/components/views-ui.css:  background-color: #fe7 !important;
./css/components/views-ui.css:  background-color: #ffb !important;
./css/components/dropbutton.component.css:  width: auto !important;
./css/components/dropbutton.component.css:  border-radius: 20em !important;
./css/base/print.css:    color: #000 !important; /* Black prints faster: h5bp.com/s */
./css/base/print.css:    background-color: transparent !important;
./css/base/print.css:    box-shadow: none !important;
./css/base/print.css:    text-shadow: none !important;
./css/base/print.css:    max-width: 100% !important;
./css/base/print.css:    background: none !important;
./css/base/print.css:    margin: 0 4px !important;
./css/base/print.css:    border-radius: 4px 4px 0 0 !important;

Comment #20

kristen pol

she/her

English

Santa Cruz, CA, USA

commented 8 March 2022 at 20:42

Issue tags:

+Bug Smash Initiative

Tagging for bugsmash.

Comment #21

8 March 2022 at 20:42

Version:

9.3.x-dev

» 9.4.x-dev

Drupal 9.3.15 was released on June 1st, 2022 and is the final full bugfix release for the Drupal 9.3.x series. Drupal 9.3.x will not receive any further development aside from security fixes. Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Comment #22

Harish1688 commented 15 July 2022 at 07:45

Status	File	Size
new	3188407-Admin-Toolbar-Search.png	62.48 KB
new	3188407-Admin-Toolbar-Search-2.png	52.94 KB
new	3188407-Admin-Toolbar-Search-3.png	94.23 KB

As mention in the last comment (#21), 'Drupal 9 bug reports should be targeted for the 9.4.x-dev branch from now on, and new development or disruptive changes should be targeted for the 9.5.x-dev branch.'. Tested the module with (9.5.x-dev branch) and enable the search part. issue is resolved on mobile, tab and desktop also.
screenshot attached for reference

Comment #23

smustgrave commented 19 July 2022 at 23:19

Status:

Needs review

» Needs work

Status	File	Size
new	Screen Shot 2022-07-19 at 7.18.50 PM.png	62.27 KB

Moving back to needs work based on the comment #19. Agree is there a way to do this without !important

Also is this theme specific? I tested on seven and did not notice the issue

Comment #24

Manibharathi E R commented 27 July 2022 at 08:17

Status:

Needs work

» Needs review

Status	File	Size
new	3188407-24.patch	932 bytes
new	Before-Patch-apply.png	34.41 KB
new	After-Patch-apply.png	38 KB

Adding Patch Against the 9.4.x.
Before Patch Apply

After Patch Apply

Comment #25

Manibharathi E R commented 27 July 2022 at 10:53

Status	File	Size
new	3188407-25.patch	1.84 KB

Updated Patch.

Comment #26

Manibharathi E R commented 27 July 2022 at 11:04

Status	File	Size
new	3188407-26.patch	1.85 KB

Comment #27

Manibharathi E R commented 27 July 2022 at 11:04

Updated Patch #25.

Comment #28

Manibharathi E R commented 27 July 2022 at 11:19

Status	File	Size
new	3188407-28.patch	1.85 KB

#26 Patch Updation.

Comment #29

Manibharathi E R commented 27 July 2022 at 11:41

Status	File	Size
new	3188407-29.patch	436 bytes

Patch Updation

Comment #30

Manibharathi E R commented 27 July 2022 at 11:47

Status	File	Size
new	3188407-30.patch	437 bytes

Patch Updation

Comment #31

Munavijayalakshmi commented 27 July 2022 at 15:27

Assigned:

Unassigned

» Munavijayalakshmi

Comment #32

Munavijayalakshmi commented 27 July 2022 at 17:54

Status	File	Size
new	3188407-32.patch	878 bytes
new	before_3188407.png	27.03 KB
new	after_3188407.png	30.86 KB

Comment #33

Munavijayalakshmi commented 27 July 2022 at 18:04

Version:	9.4.x-dev	» 9.5.x-dev
Status:	Needs review	» Needs work

Comment #34

Munavijayalakshmi commented 28 July 2022 at 06:48

Status	File	Size
new	3188407-34.patch	1.07 KB

for testing purposes only.

Comment #35

Munavijayalakshmi commented 28 July 2022 at 07:24

Assigned:

Munavijayalakshmi

» Unassigned

Comment #36

longwave

he/him

English

commented 26 August 2022 at 21:26

Component:

Seven theme

» toolbar.module

The Seven theme has been removed from Drupal 10 core. However, this issue appears to apply to the Toolbar module no matter which theme is used, so moving to the Toolbar module component.

Comment #37

ameymudras commented 27 August 2022 at 07:31

Tested this on Drupal 9.5 and the issue seems to be only with the admin toolbar module particularly when admin_toolbar_search is used. If we don't use admin toolbar module the core toolbar module seems to be working without any issue on small screen size.

Comment #38

27 August 2022 at 07:31

Version:

9.5.x-dev

» 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Comment #39

Shubham Sharma 77 commented 6 February 2023 at 11:53

Status:

Needs work

» Needs review

Status	File	Size
new	After-patch.png	117.45 KB
new	Before-patch.png	162.61 KB
new	3188407-39.patch	614 bytes

Fixed failed commands on #34 and fixed this issue on the toolbar module.
Attached a patch against Drupal 10.1.x.
For ref sharing screenshots...

Comment #40

smustgrave commented 15 February 2023 at 19:55

Status:	Needs review	» Needs work
Issue tags:		+Needs Review Queue Initiative

Issue summary update still needs to happen per #14

Comment #41

ameymudras commented 27 February 2023 at 14:10

Issue summary:	View changes
Issue tags:	-Needs issue summary update

Comment #42

dsandhya commented 17 May 2023 at 15:41

Status	File	Size
new	before-patch-test.png	21.06 KB
new	after-patch-test.png	23.07 KB

Verified and tested patch #39 for version 10.1.x-dev irrespective of themes this Patch applied successfully and looks good to me.

Comment #43

17 May 2023 at 15:41

Version:

10.1.x-dev

» 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Comment #44

17 May 2023 at 15:41

Version:

11.x-dev

» main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.