Fix "Insert Header" Toolbar Button Responsive Styling

[noi5e]

In the legacy editor, the "Insert Header" toolbar button's icon completely disappears when you resize the window.
Specifically, if the window's width is greater than 700px and less than 1000px.

Video

(The Header button is the H in the video below)

Screen.Recording.2021-03-20.at.8.33.22.PM.mov

How to Reproduce

Go to any place that uses the legacy editor on our site. This includes notes, wikis, and questions.
It also includes /wiki/new.

1. For example, go to this note on our testing server at stable.
2. Resize the window as above, and notice how the H disappears.

Suggested Fixes

You'll have to do some research in the codebase and the CSS stylesheets.

The partial for the toolbar is at /app/views/editor/_toolbar.html.erb:

plots2/app/views/editor/_toolbar.html.erb

Lines 29 to 44 in 07a243d

	<a
	id="header-button-<%= toolbar_element_id %>"
	title="Header"
	data-action="h2"
	<%# to setState on editor.js %>
	data-form-id="<%= toolbar_element_id %>"
	data-placement="bottom"
	data-toggle="tooltip"
	class="header-button btn btn-outline-secondary btn-sm rich-text-button"
	>
	<b>
	<span class="d-md-none d-lg-inline">
	<i class="fa fa-header"></i>
	</span>
	</b>
	</a>

I notice that the icon is wrapped in a span with class d-md-none, so that might be it. But definitely play around with this and see what you find!

This is a great issue for someone who just completed an FTO and wants something a little more challenging.

Post a comment here to claim this issue, and afterward, feel free to post a comment asking for help if you get stuck!

[waridrox]

Can I try it please ? @noi5e

[noi5e]

@waridrox Nice, that was fast! Go ahead, just post a comment here if you get stuck.

[waridrox]

You know what they say - sometimes the answer is right in front of you...

plots2/app/views/editor/_toolbar.html.erb

Lines 29 to 43 in 07a243d

	<a
	id="header-button-<%= toolbar_element_id %>"
	title="Header"
	data-action="h2"
	<%# to setState on editor.js %>
	data-form-id="<%= toolbar_element_id %>"
	data-placement="bottom"
	data-toggle="tooltip"
	class="header-button btn btn-outline-secondary btn-sm rich-text-button"
	>
	<b>
	<span class="d-md-none d-lg-inline">
	<i class="fa fa-header"></i>
	</span>
	</b>

In this case, code at line 40 was applying an unnecessary span element which was conflicting with the styles. Removing that simply resolved the issue :D

No functionality is hindered after the change though a lot of time went into finding this 😅

Functionality.mp4

I've reverted back the colors, they were just for debugging purposes.