sigstore
bug: overflow of text-container in `gitsign/usage`
Description
The markdown contents inside the Detailed Gitsign Usage page is overflowing outside of the container.
Screenshots 👇🏼
Inspectable at gitsign/usage
Additionally, I've tested it locally on both big screens and mobile devices, checks out that the issue is reproducible & valid for both. ⬇️
| Big-Screen 🖥️ | Small-Screen 📱 |
|---|---|
 |
 |
with the only exception being medium screen devices (iPad, Tablets etc.) 👇🏼
- [x] I am currently working on this but it's open to collaborators & as always, suggestions & feedback are always welcome! I'll keep posting updates & create a PR once resolved. cc: @ltagliaferri, @cpanato
OS : 
Ubuntu (22.04 LTS, x64) / 
Windows 10 Pro (x64)
Browser : 
Google Chrome — Version 111.0.5563.147 (Official Build) (64-bit)
Update:
@ltagliaferri I performed numerous permutations & combinations by modifying the content of the usage page [especially over here] & tried changing the format-type to html instead of markdown (which Nuxt supports), but all in vain :(
Furthermore, performed extensive research on @nuxt/content theme docs to figure out that because of usage of deprecated Tailwind classes (v1.x.x) it currently supports tables containing upto two columns in a single row & breaks the container if extended beyond it (for certain resolutions). It's currently deprecated, & has shifted to a new version, called Docus. The announcement can be explored here.
Yes, if I remove a single column in file-config table & tow columns from the Environment Variable table, it fixes the issue (for both big-screens & small-screens)
The current sigstore docs is built with Nuxt which internally comes with in-built Server Side Rendering (SSR) & all of the (lazy) hydration is performed on dynamic DOM directly on Netlify before sending resources to the client, making it a tad difficult to implement external script injection which might fix the issue with a compromise of lower SEO score.
The blog is being rendered from v0.10.1 of nuxt/content-theme-docs, where as the most recent release was v0.11.1. So, I even tried updating the version, but it didn't work out as expected.
So, is there any solution?
Yes, but idk if it's worth taking the shot or not. 😅
Instead of installing nuxt/content-theme-docs using yarn, we have to manually import the dependency package from a separate folder (which has to be kept outside of node modules) & inside that we have to head over to ..\content\nuxt-content.dev.vue (can be locally explored inside ..\.nuxt\content\nuxt-content.dev.vue) & have to update this CSS to update the overflow to disabled ⬇️
<style scoped>
.nuxt-content-container {
position: relative;
/* HERE IS THE CHANGE */
/* overflow: disabled; */
}
.nuxt-content-editor {
width: 100%;
padding: 8px;
}
</style>
That package has to be updated manually as it's enabled by default. This additionally will provide more options to perform custom customization. Besides, all this hassle is also the same reason why https://github.com/sigstore/docs/issues/96 can't be performed either, as to create changes, one has to directly perform it on the library files itself, which isn't possible without importing locally.
I'm still looking for other options. But as of now, I can suggest that the better way of fixing this, is to migrate the docs to a new revision of docs i.e. Docus (built on Nuxt 3) in near future.
Expected Improvements (awaited) : #2 , #10, #11, #12, #13 (related to sigstore-website)