fix(toc): remove horizontal overflow due Table of Contents (#23052) (#23068)

<!--Delete sections as needed -->

## Description

<!-- Tell us what you did and why -->
This PR fixes the horizontal overflow issue in the Docker Docs Website
due to overflow Table of Contents section, as described in
[#23052](https://github.com/docker/docs/issues/23052).

### Changes made:
Updated layout structure and/or styles in:
- layouts/partials/aside.html
- layouts/partials/content-default.html

The fix prevents excessive width in the ToC container, which was
previously causing the entire page to become horizontally scrollable on
certain pages.

## Update:


https://github.com/user-attachments/assets/cdc3898c-ba21-468a-9add-0785abf0e76f


## Related issues or tickets
Closes #23052 

<!-- Related issues, pull requests, or Jira tickets -->

## Reviews

<!-- Notes for reviewers here -->
<!-- List applicable reviews (optionally @tag reviewers) -->

- [ ] Technical review
- [ ] Editorial review
- [ ] Product review

### Notes for reviewers:
- Let me know if you’d prefer a purely CSS-based solution, or if
structural changes are acceptable.
- Happy to tweak styles, breakpoints, or layout as needed!
This commit is contained in:
Mohit5Upadhyay 2025-07-23 18:22:16 +05:30 committed by GitHub
parent d657aea79c
commit 650936a46a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 3 additions and 3 deletions

View File

@ -2,12 +2,12 @@
class="sticky top-16 h-[calc(100vh-64px)] min-w-52 space-y-4 overflow-y-auto py-4 w-full"
>
{{ partial "github-links.html" . }}
<div id="TableOfContents">
<div id="TableOfContents" class="overflow-x-auto">
{{ partialCached "pagemeta.html" . . }}
</div>
{{- if ne .Type "guides" }}
{{ with .GetTerms "tags" }}
<div class="not-prose mt-8 px-4">
<div class="not-prose mt-8 px-4 overflow-x-auto">
{{- partial "tags.html" . }}
</div>
{{- end }}

View File

@ -13,7 +13,7 @@
</div>
{{ .Content }}
</article>
<div class="-mt-8 -mr-20 hidden min-w-48 flex-1 lg:block">
<div class="-mt-8 hidden min-w-48 flex-1 lg:block">
{{ partial "aside.html" . }}
</div>
</div>