Skip to content

Fix horizontal overflow on iPad Pro 11 and improve responsive design #8288

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.

Sign up for GitHub

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

Merged
pelikhan merged 2 commits into from
Dec 31, 2025
Merged

Fix horizontal overflow on iPad Pro 11 and improve responsive design #8288

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f7f5b4
Initial plan
Copilot Dec 31, 2025
37afa61
Fix horizontal overflow and improve responsive design for docs site
Copilot Dec 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/content/docs/labs.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ These are experimental agentic workflows used by the GitHub Next team to learn,
| [CI Optimization Coach](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/ci-coach.md) | copilot | [![CI Optimization Coach](https://github.com/githubnext/gh-aw/actions/workflows/ci-coach.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/ci-coach.lock.yml) | `0 13 * * 1-5` | - |
| [CLI Consistency Checker](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/cli-consistency-checker.md) | copilot | [![CLI Consistency Checker](https://github.com/githubnext/gh-aw/actions/workflows/cli-consistency-checker.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/cli-consistency-checker.lock.yml) | `0 13 * * 1-5` | - |
| [CLI Version Checker](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/cli-version-checker.md) | claude | [![CLI Version Checker](https://github.com/githubnext/gh-aw/actions/workflows/cli-version-checker.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/cli-version-checker.lock.yml) | - | - |
| [Close Outdated Discussions](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/close-old-discussions.md) | codex | [![Close Outdated Discussions](https://github.com/githubnext/gh-aw/actions/workflows/close-old-discussions.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/close-old-discussions.lock.yml) | `0 14 * * 1-5` | - |
| [Commit Changes Analyzer](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/commit-changes-analyzer.md) | claude | [![Commit Changes Analyzer](https://github.com/githubnext/gh-aw/actions/workflows/commit-changes-analyzer.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/commit-changes-analyzer.lock.yml) | - | - |
| [Copilot Agent PR Analysis](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/copilot-agent-analysis.md) | claude | [![Copilot Agent PR Analysis](https://github.com/githubnext/gh-aw/actions/workflows/copilot-agent-analysis.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/copilot-agent-analysis.lock.yml) | - | - |
| [Copilot Agent Prompt Clustering Analysis](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/prompt-clustering-analysis.md) | claude | [![Copilot Agent Prompt Clustering Analysis](https://github.com/githubnext/gh-aw/actions/workflows/prompt-clustering-analysis.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/prompt-clustering-analysis.lock.yml) | - | - |
Expand Down Expand Up @@ -62,6 +61,7 @@ These are experimental agentic workflows used by the GitHub Next team to learn,
| [Documentation Noob Tester](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/docs-noob-tester.md) | copilot | [![Documentation Noob Tester](https://github.com/githubnext/gh-aw/actions/workflows/docs-noob-tester.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/docs-noob-tester.lock.yml) | - | - |
| [Documentation Unbloat](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/unbloat-docs.md) | claude | [![Documentation Unbloat](https://github.com/githubnext/gh-aw/actions/workflows/unbloat-docs.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/unbloat-docs.lock.yml) | - | - |
| [Duplicate Code Detector](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/duplicate-code-detector.md) | codex | [![Duplicate Code Detector](https://github.com/githubnext/gh-aw/actions/workflows/duplicate-code-detector.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/duplicate-code-detector.lock.yml) | - | - |
| [Example: Custom Error Patterns](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/example-custom-error-patterns.md) | copilot | [![Example: Custom Error Patterns](https://github.com/githubnext/gh-aw/actions/workflows/example-custom-error-patterns.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/example-custom-error-patterns.lock.yml) | - | - |
| [Example: Properly Provisioned Permissions](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/example-permissions-warning.md) | copilot | [![Example: Properly Provisioned Permissions](https://github.com/githubnext/gh-aw/actions/workflows/example-permissions-warning.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/example-permissions-warning.lock.yml) | - | - |
| [Firewall Test Agent](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/firewall.md) | copilot | [![Firewall Test Agent](https://github.com/githubnext/gh-aw/actions/workflows/firewall.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/firewall.lock.yml) | - | - |
| [GitHub MCP Remote Server Tools Report Generator](https://github.com/githubnext/gh-aw/blob/main/.github/workflows/github-mcp-tools-report.md) | claude | [![GitHub MCP Remote Server Tools Report Generator](https://github.com/githubnext/gh-aw/actions/workflows/github-mcp-tools-report.lock.yml/badge.svg)](https://github.com/githubnext/gh-aw/actions/workflows/github-mcp-tools-report.lock.yml) | - | - |
Expand Down
103 changes: 101 additions & 2 deletions docs/src/styles/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,25 +192,35 @@
:root[data-theme='light'] .sl-markdown-content pre {
background-color: #f6f8fa;
border: 1px solid #d0d7de;
overflow-x: auto;
max-width: 100%;
}

:root[data-theme='light'] .sl-markdown-content code {
background-color: rgba(175, 184, 193, 0.2);
overflow-wrap: break-word;
word-wrap: break-word;
}

:root[data-theme='light'] .sl-markdown-content table {
width: 100%;
table-layout: fixed;
max-width: 100%;
table-layout: auto;
border: 1px solid #d0d7de;
overflow: hidden;
}

:root[data-theme='light'] .sl-markdown-content th {
background-color: #f6f8fa;
border-bottom: 1px solid #d0d7de;
word-wrap: break-word;
overflow-wrap: break-word;
}

:root[data-theme='light'] .sl-markdown-content td {
border-bottom: 1px solid #d0d7de;
word-wrap: break-word;
overflow-wrap: break-word;
}

:root[data-theme='light'] .sl-markdown-content blockquote {
Expand Down Expand Up @@ -466,6 +476,10 @@ header::after {
.sl-markdown-content {
color: #f0f6fc;
font-family: var(--sl-font) !important;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
max-width: 100%;
}

.sl-markdown-content p {
Expand Down Expand Up @@ -537,40 +551,62 @@ header::after {
background-color: #161b22;
border: 1px solid #30363d;
border-radius: 6px;
overflow-x: auto;
max-width: 100%;
}

.sl-markdown-content code {
background-color: rgba(110, 118, 129, 0.4);
border-radius: 4px;
font-size: 85%;
font-family: var(--sl-font-mono);
overflow-wrap: break-word;
word-wrap: break-word;
}

.sl-markdown-content pre code {
background-color: transparent;
border-radius: 0;
font-size: 0.875rem;
line-height: 1.6;
white-space: pre;
overflow-wrap: normal;
word-wrap: normal;
}

/* Tables */
.sl-markdown-content table {
width: 100%;
table-layout: fixed;
max-width: 100%;
table-layout: auto;
border: 1px solid #30363d;
border-radius: 6px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}

/* Responsive table wrapper for mobile/tablet */
@media (max-width: 900px) {
.sl-markdown-content table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}

.sl-markdown-content th {
background-color: #161b22;
border-bottom: 1px solid #30363d;
font-weight: 600;
word-wrap: break-word;
overflow-wrap: break-word;
}

.sl-markdown-content td {
border-bottom: 1px solid #21262d;
word-wrap: break-word;
overflow-wrap: break-word;
}

.sl-markdown-content tr:last-child td {
Expand Down Expand Up @@ -1122,3 +1158,66 @@ a:hover {
color: #c9d1d9;
font-weight: 400;
}

/* Responsive improvements to prevent horizontal overflow */
* {
box-sizing: border-box;
}

/* Ensure body and main containers don't overflow */
body, html {
overflow-x: hidden;
max-width: 100vw;
}

.page,
.main-frame,
main,
.content-panel {
max-width: 100%;
overflow-x: hidden;
}

/* Ensure all content respects container width */
.sl-markdown-content > * {
max-width: 100%;
}

/* Specific fixes for common overflow culprits */
.sl-markdown-content img,
.sl-markdown-content video,
.sl-markdown-content iframe {
max-width: 100%;
height: auto;
}

/* Mermaid diagrams responsive */
.sl-markdown-content .mermaid {
max-width: 100%;
overflow-x: auto;
}

/* Code examples with wrap attribute */
.sl-markdown-content pre[class*="language-"] {
overflow-x: auto;
max-width: 100%;
}

/* Additional tablet-specific fixes (iPad Pro 11 at 834px) */
@media (min-width: 768px) and (max-width: 900px) {
/* Ensure header doesn't overflow on tablets */
.custom-header-links {
gap: 0.5rem !important;
}

.header-link {
font-size: 0.8125rem !important;
padding: 0.25rem 0.5rem !important;
}

/* Ensure content has proper padding on tablets */
.sl-markdown-content {
padding-left: 1rem;
padding-right: 1rem;
}
}