Copy to clipboard buttons size and alignment

[Alejandro Cruz]

Copy to clipboard buttons from the mobile view are larger than from the desktop view (with the same approximate width).

Also, if the codePaddingBlock property is changed, the height of the button is not calculated correctly.

[Hippo]

Hello and welcome! Thank you for this report and the helpful screenshots.

That the button size increases on mobile is an accessibility feature to increase its tap size. However, I also agree that it doesn't look as nice on mobile due to this change.

What would you think about the alternative of still increasing the tap area, but keeping the size of the button consistent? This is a common solution to this problem on mobile and could also work for EC.

Regarding the size of the button when reducing the block padding to a minimal value like the one you've shown: There is no calculation happening at all right now. It's a fixed size that satisfies accessibility guidelines. I could try to calculate the size accordingly so that it hopefully doesn't peek out of the frame (again while keeping the actual tap area the same), but depending on how small you make the padding, the button might look very tiny. Can you show an example of the size you'd like it to have? It should be possible to change the size in your browser's DevTools and take a screenshot.

[Alejandro Cruz]

Yeah I think it would be nice to have a smaller button on mobile/tablet devices keeping the same tap area for accessibility.

What I tried (as a quick patch) is to scale the button smaller:

<Code code=`${content}` lang="html" class="codeblock" frame="none" />

@media (width <= 1024px) {
  .codeblock .copy {
	  transform: scale(.90);
  }
}
@media (width <= 768px) {
  .codeblock .copy {
	  transform: scale(.80);
  }
}
@media (width <= 640px) {
  .codeblock .copy {
	  transform: scale(.70);
  }
}

>1024px default 1 rem of padding:

>768px default 1 rem of padding:

>640px default 1 rem of padding:

<640px default 1 rem of padding:

One problem of scaling is that the "Copied!" label when clicked causes the button to move to the left (it then returns to its position):

An example of what I would like (in my specific case) should be something like this (with .5rem of padding):

.codeblock .copy {
  margin-top: -7px;
  transform: scale(.80);
}

@media (width <= 1024px) {
.codeblock .copy {
	margin-top: -8px;
	transform: scale(.70);
}
}
@media (width <= 768px) {
.codeblock .copy {
	margin-top: -8px;
	transform: scale(.65);
}
}
@media (width <= 640px) {
.codeblock .copy {
	transform: scale(.55);
}
}

>640px .5 rem of padding:

Still a problem as needs to be scalable taking in consideration the padding and the actual code height but I hope it will serve as an example.

I don't know how "bad practice" it would be, but perhaps a ShowCopyToClipboardButtonOnMobile option would also be interesting?

Thanks!

[Henry Black]

I would love the option for a smaller button whilst maintaining the larger click area on mobile