Embed badge URL section overflows on smaller screens

[uncenter]

Are you experiencing an issue with...

shields.io

🐞 Description

On smaller screens, the tab names overflow and overlap with the page content:

🔗 Link to the badge

Visible on all badge pages.

[calebcartwright]

Thanks for letting us know! This is the new frontend just rolled out today so I suspect we'll probably see a few things like this, and very helpful to get these reports

[uncenter]

Thanks for letting us know! This is the new frontend just rolled out today so I suspect we'll probably see a few things like this, and very helpful to get these reports

Yes! I've been watching from the sidelines for a while now as the PR was being updated and really glad to see it finally get merged this morning! Looking great so far.

[chris48s]

I've had a quick look at this.

I think rather than override the styles in our repo I am going to try and contribute a patch upstream to https://github.com/cloud-annotations/docusaurus-openapi/

I need to spend a bit more time on it, but (mainly for my own reference), I think the patch is going to look something like:

diff --git a/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Curl/styles.module.css b/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Curl/styles.module.css
index af3c9e8..f868110 100644
--- a/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Curl/styles.module.css
+++ b/packages/docusaurus-theme-openapi/src/theme/ApiDemoPanel/Curl/styles.module.css
@@ -10,7 +10,8 @@
   border-radius: var(--openapi-card-border-radius)
     var(--openapi-card-border-radius) 2px 2px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
+  flex-wrap: wrap;
 }

 .buttonGroup button {
@@ -59,7 +60,6 @@
   /* border-radius: 0.25rem; */

   display: block;
-  width: 100%;

   /* margin: 2px; */
   margin: var(--margin);

[uncenter]

What about this instead?

.buttonGroup {
  background: var(--openapi-card-background-color);
  color: var(--ifm-pre-color);
  font-family: var(--ifm-font-family-monospace);
  /* font-size: var(--ifm-code-font-size); */
  /* line-height: var(--ifm-pre-line-height); */
  /* margin-bottom: calc(var(--ifm-spacing-vertical) / 4); */
  margin-bottom: 1px;
  margin-top: 0;
  border-radius: var(--openapi-card-border-radius)
    var(--openapi-card-border-radius) 2px 2px;
  display: flex;
- justify-content: flex-end;
+ justify-content: flex-start;
+ overflow: scroll;
}

I know horizontal scrolling can be weird but I prefer it to how the wrapping looks with your suggested changes.

Scrolling:

Wrapping:

Though, the wrapping does provide the ability to see all tabs at once... I'm split on this one.

[chris48s]

I think I prefer the solution without horizontal scrolling, but also it kind of depends what solution the upstream maintainers prefer. Now tracking in

• https://github.com/cloud-annotations/docusaurus-openapi/issues/249
• https://github.com/cloud-annotations/docusaurus-openapi/pull/250

[uncenter]

I think I prefer the solution without horizontal scrolling, but also it kind of depends what solution the upstream maintainers prefer. Now tracking in

• Code examples tabs overflow in narrow browser windows cloud-annotations/docusaurus-openapi#249
• wrap code examples tabs in narrow browser windows cloud-annotations/docusaurus-openapi#250

Yeah on second thought the wrapping solution is probably better. Thank you for making the PR so quickly! Let's hope that gets merged soon.