Skip to content

Conversation

@kushkumarkashyap7280
Copy link

…ll page #2106

screenshots

previously

Screenshot From 2025-11-11 11-24-19

fixed

Screenshot From 2025-11-11 13-00-49

Changes

font size and padding reduced so clearly visible on phone view

edit install.css file for mobile view

Copy link
Member

@dscho dscho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice!

@To1ne what do you say?

@kushkumarkashyap7280
Copy link
Author

when you will merge it sir ,

Copy link
Collaborator

@To1ne To1ne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kushkumarkashyap7280 I've got some comments. Let me know what you think.

font-size: 0.75rem;
line-height: 1.2em;
display: flex;
flex: 1;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kushkumarkashyap7280 This makes the tab buttons grow on semi-small screens:

Image

vs the old

Image

Is that intentional?


On large'ish screen we always show tab buttons that fit the contentd;

Image

Why have them grow on mobile? As far as I can tell, it has no effect on the issue you're trying to fix.

a[role="tab"] {
padding: .5rem;
padding: .5rem .25rem;
font-size: 0.75rem;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's arguable, but I think it's too small. I rather have you drop this line out.

@media (max-width: $mobile-m) {
a[role="tab"] {
padding: .5rem;
padding: .5rem .25rem;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this change is all we need.

Until you want to take it one step further and support really narrow screens. But in that case I suggest we work on putting flex-direction: column on .install-tabs, so we have vertical tabs. But there's more work to be done to have it look nicely, because for example round corners aren't okay:

Image

(and it would also be better to not have "Install" and "Latest version" side-by-side.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants