Allow to make LinkButton wide on mobile

[ematipico]

What version of starlight are you using?

0.32.5

What is your idea?

I would like to be able to make the LinkButton comment wide (full width), possibly only on mobile, but not necessarily only on mobile. Just a prop should be enough.

Why is this feature necessary?

Content on mobile goes from top to bottom, and we use usually use just a finger to interact with it. If the content of a bottom is just a few words, I am displaying a locale that is read from left-to-right, and I use might right hand to scroll the content, I am forced to stretch my thumb to reach out the button and interact with it.

By having the possibility to make the button wide, full-width, I can touch the button with less effort.

Do you have examples of this feature in other projects?

No response

Participation

• I am willing to submit a pull request for this feature.

[delucis]

Interesting idea, thanks @ematipico! Something definitely to think about.

In the meantime, I guess this can be achieved pretty quickly with a snippet of custom CSS:

/* Make the button full width and center its children. */
.sl-link-button {
  width: 100%;
  justify-content: center;
}

/* At the desired screen width revert the button to its implicit width. */
@media (min-width: 30em) {
  .sl-link-button {
    width: unset;
  }
}

StackBlitz example of the above: https://stackblitz.com/edit/github-qsjaphcq?file=src%2Fstyle.css

[delucis]

And if you wanted to mimic a prop to only apply the full-width approach to specific buttons, you can do that with a class:

.sl-link-button.full-width {
  width: 100%;
  justify-content: center;
}
@media (min-width: 30em) {
  .sl-link-button.full-width {
    width: unset;
  }
}

And then use that on the component:

<LinkButton class="full-width" href="https://example.com">
  Button text
</LinkButton

StackBlitz demo: https://stackblitz.com/edit/github-qsjaphcq-qbopnw1s?file=src%2Fstyle.css