Long Topic Title in Learn WordPress overlapping with the searchbox

[jhimross]

Description

Long topic title will cause overlapping display with the searchbox

Step-by-step reproduction instructions

1. Go to this page https://learn.wordpress.org/topic/extending-wordpress/page/2/
2. See the Title and Search bar. https://share.getcloudapp.com/E0uL1Gw6

Expected behaviour

It should display like this:- https://share.getcloudapp.com/Apug0BAQ

Actual behaviour

But if the title is longer, the issue will happen. https://share.getcloudapp.com/geuPNv82

Environment information

-I can replicate the issue in any browser, any OS, and mostly when in desktop view

Additional Info

Simple fix is by decreasing the size of the .section-heading_title.h2

.section-heading_title.h2 {
    font-size: 2.0rem;
}

See https://share.getcloudapp.com/d5uD7rPb

[cynthianorman]

I am interested in working on this issue. For the solution so far, I'm leaning towards placing the search box within its own row placed just above the Topic's Title. The fix of reducing the font size of H2 will affect all pages so that may not be desirable.

[cynthianorman]

Here's my proposed update:

• archive-lesson-plan.php
• lines 190 to 193

		<div class="row align-middle between section-heading section-heading--with-space">
			<?php the_archive_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
			<?php get_template_part( 'template-parts/component', 'archive-search' ); ?>
		</div>

• replace with lines 190 to 195

		<div class="row align-right">
			<?php get_template_part( 'template-parts/component', 'archive-search' ); ?>
		</div>
		<div class="row align-left">
			<?php the_archive_title( '<h1 class="section-heading_title h2">', '</h1>' ); ?>
		</div>

Expected result:
https://snipboard.io/1ME5ue.jpg

[jonathanbossenger]

@cynthianorman that sounds like a good solution.

Are you comfortable to go ahead and create a pull request with this change? This will allow someone to test your proposed change on their own local copy of the site, and provide feedback.

[jonathanbossenger]

Hi @cynthianorman that looks like a solid solution. If you're happy to go ahead and create a pull request for this change, I can review it for you. Please feel free to ping me here once the PR is ready.

[cynthianorman]

Thank you @jonathanbossenger the PR is ready

[jonathanbossenger]

Thank you @cynthianorman I will do my best to review it this week.