GrafanaUI: Smaller padding around Drawer's title, subtitle, and tabs

[polibb]

What is this feature?

The whole sidebar of Save dashboard (modal > drawer > save dashboard form) is scrollable.

EDIT: After discussion we agreed to leave the title, subtitle, and tabs always visible and scroll only the content, as it was until now. This PR is removing the option to make the content not scrollable: #75287

This PR only tweaks the padding on smaller screens, so that it's easier to access the content.

Why do we need this feature?

Because otherwise when the page is zoomed-in the user cannot see the input for the description and Save/Cancel buttons well, even though the content itself is scrollable. The title and subtitle above the content take up too much space.

Who is this feature for?

People with lower vision abilities, who need to zoom in the page a lot to be able to read it.

Which issue(s) does this PR fix?:

Fixes #66490

Special notes for your reviewer:

Not sure this is the right approach, but it's an approach. Feel free to suggest other solutions, if you think you have something better.

Please check that:

• It works as expected from a user's perspective.
• If this is a pre-GA feature, it is behind a feature toggle.
• The docs are updated, and if this is a notable improvement, it's added to our What's New doc.

[joshhunt]

Maybe @ashharrison90 has fixed this already? #75287

[polibb]

@joshhunt, nope - just checked. What @ashharrison90 is doing is removing the option to make the content scrollable and making it scrollable by default. I'm making the all of the Save dashboard sidebar scrollable, because when you only scroll the content it's still very difficult to use on smaller window (higher zoom).

But also I'm making the space on smaller screens more compact, so the title and subtitle don't take up most of the space anyway.

[ashharrison90]

@polibb sorry for the delay, wanted to chat to the team in our weekly about this.

i don't think we should allow for scrolling all of the drawer content tbh. it allows for scrolling off screen things which feel quite important to keep visible (drawer title, description, tabs, etc.)

however i think the tweaks you've done to header padding are probably worth exploring further, even at full screen it seems rather large. wdyt about a combination of my PR (to always scroll the content) and some tweaks to padding in this PR, maybe working with @staton-hyse11 or @amy-super to make sure they're happy? 🤔

[polibb]

thank you for taking a look here, @ashharrison90!

I see your point, but I think it would be best if there is a way to access the content and tabs without seeing the title and subtitle, at least for a bit while you're editing or reading the content itself (something like in-focus out-of-focus movement to center the content for you) when you're on such a small screen.

Now if we merge both, having made the content mandatorily scrollable will bring us back where it's difficult to see it on a screen 320x256, as described in the a11y issue. So yeah, I can tweak the padding a bit more above the tabs 😊.

Maybe we can tweak the padding and font for all screen sizes, if it's alright with @staton-hyse11, @amy-super, or @Ijin08 ?

[ashharrison90]

thank you for taking a look here, @ashharrison90!

I see your point, but I think it would be best if there is a way to access the content and tabs without seeing the title and subtitle, at least for a bit while you're editing or reading the content itself (something like in-focus out-of-focus movement to center the content for you) when you're on such a small screen.

Now if we merge both, having made the content mandatorily scrollable will bring us back where it's difficult to see it on a screen 320x256, as described in the a11y issue. So yeah, I can tweak the padding a bit more above the tabs 😊.

Maybe we can tweak the padding and font for all screen sizes, if it's alright with @staton-hyse11 and @amy-super?

it's difficult to see anything at 320x256... 😅 that's just not really a screen size the product can work at. i'd rather we optimise for a more standard resolution and do as much as possible to help those lower resolutions without impacting the behaviour elsewhere.

think tweaking the padding in all cases is a good shout 👍 maybe try that and dump some screenshots to see what they think

[polibb]

Suggestion for the design changes (only padding is tweaked):

Before:

After:

[axelavargas]

👋🏾 The padding changes look good, however, it would be great if we double-check with @amy-super and @staton-hyse11 :)

[ashharrison90]

i'd be in favour of just lowering padding everywhere tbh, not just at the sm breakpoint 👍

[amy-super]

I wouldn't be a UX if I didn't ask a semi-related question here 😉
Why do we show the tab at all when we only have a single tab? We don't do that on other pages, and it would be another way to save space in smaller viewports - especially if it's just labeling something as vague as "Details" as in this example. WDYT about also making it so the tab only appears if there are multiple?

But generally, I'm cool with how this looks. I'm pretty sure we don't have a pattern for this component yet in Figma, so we'll want to add it to the DS backlog somehow to get it added with the new padding. @staton-hyse11 how do we do that?

[staton-hyse11]

@polibb This change looks good to me 👍. I also agree with @ashharrison90 on this. I think adjusting the padding for all breakpoints makes sense here.

@amy-super, getting this into Figma should be straightforward if there is someone to do the design work. @polibb are you working with a designer? if not, we can create an issue and drop in our backlog for future work and someone to pickup.

[polibb]

@amy-super That's a good question - I guess no one has thought about the case where it's just one tab, probably because it's only one tab when there are no changes and if there are no changes there's no point to be on this screen at all - you cannot click 'Save'.

Thanks, @staton-hyse11, I'll adjust the padding on all screens here then.
On this specific issue no designer is involved on my side, so please create an issue 🙏 😊.

[staton-hyse11]

Saga backlog issue created: #75693

[torkelo]

@staton-hyse11 @amy-super I think the top padding removal looks ok but no padding between subtitle and tabs looks very cramped.

The latest change (No padding between subtitles and tabs):

With 8px padding below the subtitle:

[staton-hyse11]

That looks good 👍