Mobile UI optimization

[kemsguy7]

This pr resolves issue: #5318 where i resolved some ux issues on the mobile view of the registry page.

Key changes

• ---

• Changed display of filters and search input fields to flex column display for better visual alignment
• Fixed overflowing pill by taking it to a new line and reducing the font size

Demo

mobile-optimization-open-telm.mp4

[kemsguy7]

@svrnm , please kindly review

[svrnm]

looks good overall, thank you. One additional thing: If there are multiple links at the bottom of an element, the links are not in line (see screenshot below)

[svrnm]

Suggested change

	background-color: $color;
	background-color: $color;

[kemsguy7]

@svrnm do i add a space here too?

[kemsguy7]

@svrnm , i've applied a fix to this issue, kindly find attached a screenshot

looks good overall, thank you. One additional thing: If there are multiple links at the bottom of an element, the links are not in line (see screenshot below)

[svrnm]

Suggested change

	{{ end -}}
	{{ end -}}

[kemsguy7]

@svrnm please what fix exactly do you need here? the linting?

[svrnm]

Add an empty line at the bottom of the file

[svrnm]

Note that you might be able to auto fix that by running npm run:format locally

[kemsguy7]

oh! @svrnm , thanks for this. I'm on it.

[kemsguy7]

@svrnm fixed, please review

[svrnm]

Minor issue, but beyond that this looks good!

When you have applied that minor change, I consider this as done! After the outreachy application phase we will take another look and see if we can merge this PR.

[svrnm]

Suggested change

	{{ end -}}
	{{ end -}}

[svrnm]

@kemsguy7 following up on this. Are you interested in continuing with this? If so, I would like to focus on "Changed display of filters and search input fields to flex column display for better visual alignment" and keep the other optimization out for now. Can you update this PR or create a new PR to address that?

Thanks