Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: overflow of text-container in gitsign/usage #107

Open
1 task done
Neilblaze opened this issue Apr 1, 2023 · 1 comment
Open
1 task done

bug: overflow of text-container in gitsign/usage #107

Neilblaze opened this issue Apr 1, 2023 · 1 comment
Labels
bug Something isn't working

Comments

@Neilblaze
Copy link
Contributor

Neilblaze commented Apr 1, 2023

Description

The markdown contents inside the Detailed Gitsign Usage page is overflowing outside of the container.

Screenshots 👇🏼

image

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 📱
big-screen-local small-screen-local

with the only exception being medium screen devices (iPad, Tablets etc.) 👇🏼

bug2

  • 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)

@Neilblaze Neilblaze added the bug Something isn't working label Apr 1, 2023
@Neilblaze
Copy link
Contributor Author

Neilblaze commented Apr 1, 2023

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 #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)

nikhilkalburgi added a commit to nikhilkalburgi/docs that referenced this issue Dec 25, 2023
Change the font-size of tables to avoid overflow of text in tables

Resolves: sigstore#107

Signed-off-by: nikhilkalburgi <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant