bug(changelog version): vertical line overlap timeline and title
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.9k
- Forks
- 1.1k
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 57
Description
Environment
| Operating system | Windows 10.0.26200 |
| CPU | 12th Gen Intel(R) Core(TM) i5-12490F (12 cores) |
| Node.js version | v24.18.0 |
| nuxt/cli version | 3.37.0 |
| Package manager | pnpm@11.11.0 |
| Nuxt version | 4.5.2 |
| Nitro version | 2.13.4 |
| Builder | vite@8.2.1 |
| Config | app, compatibilityDate, content, css, devtools, image, modules, ogImage, routeRules, site, sitemap |
| Modules | @nuxt/eslint@1.12.1, @nuxt/ui@4.6.1, @nuxt/content@3.11.0, @nuxt/image@2.0.0, @nuxt/hints@1.0.0-alpha.5, @nuxtjs/seo@5.1.0 |
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
v4.6.1
Reproduction
Description
The vertical indicator line of UChangelogVersion overlap the veresion and title on lg screen when the component's available width is below ~928px. (e.g., inside a document layout with sidebars)
Indicator has absolute w-32, and the container is mx-auto max-w-2xl, which not reserved left space.
As a result, when the available space isn't enough, the vertical line will overlap the container.
BTW, I intend submit a PR for this issue this weekend , thanks!
Additional context
#5180 had mentioned this issue, but it was closed by github bot.
Logs
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the UChangelogVersion component and the linked reproduction, then inspect the absolute w-32 indicator and mx-auto max-w-2xl container described in the issue. Verify the layout at lg widths below about 928px, including a document layout with sidebars. Done means the vertical indicator no longer overlaps the version or title in the constrained layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, tailwindcss, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100