Search box doesn't fit in overlays on mobile

[lindapaiste]

Increasing Access

It will look a lot better on mobile devices.

Feature enhancement details

@dewanshDT I came across a place where we could really use a <MediaQuery> in the JS. It should be quick if you want to do it. In the Overlay component we sometimes pass in a search box through an actions prop. It doesn't fit on small screens. We should make it so that the actions is only rendered in its current position on large screens. Then on small screens we would place the {actions} below the header, between lines 91 </header> and 92 {children}.

p5.js-web-editor/client/modules/App/components/Overlay.jsx

Lines 79 to 93 in b5ecd60

	<header className="overlay__header">
	<h2 className="overlay__title">{title}</h2>
	<div className="overlay__actions">
	{actions}
	<button
	className="overlay__close-button"
	onClick={this.close}
	aria-label={this.props.t('Overlay.AriaLabel', { title })}
	>
	<ExitIcon focusable="false" aria-hidden="true" />
	</button>
	</div>
	</header>
	{children}
	</section>

Just change that one part of it. Making the tables fit will be fixed by #2368 and converting Overlay to a function component will be fixed by #2309.

It may need a wrapper div with some margin or padding, which we would render only if actions is present. But that's less important. You could do it or not bother. It will be a huge improvement just to make everything fit!

[KSSaiTeja]

could you please assign this to me. i have prior knowledge about this issue. i an very much interested to work on this issue

[KSSaiTeja]

i am interested to work on this issue @lindapaiste please assign this to me

[shauryag2002]

Hi @dewanshDT , It seems like you are working on this issue quite long time,
if not able to do it !
Can @lindapaiste assign it to me?

[lindapaiste]

@KSSaiTeja feel free to work on it. Here's the documentation for the <MediaQuery> component: https://www.npmjs.com/package/react-responsive

[KSSaiTeja]

yeah thanks for the suggestion, i have fixed the issue and will raise a PR in a moment.. please review it and merge my PR please.. it will be more motivation for me..

[KSSaiTeja]

@lindapaiste i have two pending PR's in this repo.. please review them and merge them.. it will be more motivational to me towards contribute more for the p5.js organisation..! 😄

[Praveen03AJJARAPU]

Can you please assign me the issue? I am a beginner at contributing, this will help me to enter into the contributions.

[KSSaiTeja]

Hello @catarak

I hope you're doing well. I wanted to kindly request your assistance with something important. I've recently submitted two pull requests, each addressing specific issues within the p5.js-web-editor project. Your expertise and guidance in reviewing and potentially merging these PRs would be immensely appreciated.

Your feedback and support are not only valuable but also greatly motivating for me to continue contributing to the p5.js-web-editor project. Your insights will help enhance the overall quality of the codebase.

Thank you very much for taking the time to consider my requests. Your assistance means a lot to me, and I'm looking forward to your feedback.

Warm regards,

K S Sai Teja.

[KSSaiTeja]

@lindapaiste you assigned this issue to me. but till now you haven't reviewed my PR. please review my PR.

[KrishavRajSingh]

is this open?