Skip to content

Fix docs mobile responsiveness: prevent horizontal overflow, wrap lon… #763

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
rahulharpal1603 merged 1 commit into from
Jan 25, 2026
Merged

Fix docs mobile responsiveness: prevent horizontal overflow, wrap lon… #763

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
25 changes: 24 additions & 1 deletion docs/stylesheets/extra.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,24 @@

/* Responsive tweaks: ensure header, images, tables and code blocks behave well on small screens */

/* Global text wrapping to prevent long words/URLs from overflowing */
.md-typeset,
.md-content {
overflow-wrap: anywhere;
word-break: break-word;
}

/* Headings should wrap on small screens instead of overflowing */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
overflow-wrap: anywhere;
word-break: break-word;
}

/* Make images scale down to container */
.md-typeset img,
.md-content img {
Expand All @@ -43,6 +61,12 @@
overflow-x: auto;
}

/* Inline code should also wrap to avoid pushing layout */
.md-typeset code:not(pre code) {
white-space: break-spaces;
word-break: break-word;
}
Comment on lines +64 to +68
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🌐 Web query:

CSS white-space: break-spaces browser support compatibility

💡 Result:

Short answer

  • white-space: break-spaces is supported in modern Chrome, Edge, Firefox and Safari (recent versions) but not in Internet Explorer or older browsers. [1][2]

Compatibility (high-level)

  • Supported: Chrome 76+ (full), Firefox 69+ (full), Safari 13.1+ / iOS Safari 13.4+, current Edge versions, most up‑to‑date mobile browsers. [1][2]
  • Not supported: Internet Explorer (all versions) and many older browser releases — use a fallback for broad compatibility. [2]

Recommended fallback
Use a fallback that preserves spaces but degrades gracefully (keeps spaces but may not allow break-after-every-space):

.example {
white-space: pre-wrap; /* fallback /
white-space: break-spaces; / modern browsers /
word-break: break-word; / optional: allow breaking if needed */
}

Notes

  • break-spaces differs from pre-wrap by allowing a break opportunity after every preserved whitespace and by preserving trailing spaces in layout — behavior matters for intrinsic sizing. See spec/details. [1]
    Sources
    [1] MDN — white-space (and white-space-collapse) documentation.
    [2] Can I Use — "white-space: break-spaces" compatibility table.

🏁 Script executed:

# Search for browser support documentation or requirements in the project
find . -type f \( -name "*.md" -o -name "*.txt" -o -name "*.json" \) | head -20 | xargs grep -l "browser" -i 2>/dev/null | head -10

Repository: AOSSIE-Org/PictoPy

Length of output: 79

🏁 Script executed:

# Check project configuration files for browser target information
git ls-files | grep -E "(package\.json|\.browserslistrc|browserslist|\.babelrc|\.eslintrc)" | head -10

Repository: AOSSIE-Org/PictoPy

Length of output: 146

🏁 Script executed:

# Look for any documentation about compatibility or browser support
git ls-files | grep -iE "(compatibility|support|browser)" | head -10

Repository: AOSSIE-Org/PictoPy

Length of output: 104

🏁 Script executed:

cat -n ./CONTRIBUTING.md | head -100

Repository: AOSSIE-Org/PictoPy

Length of output: 3181

🏁 Script executed:

cat -n ./frontend/src/components/BrowserWarning.tsx

Repository: AOSSIE-Org/PictoPy

Length of output: 2985

🏁 Script executed:

# Check if browserslist is defined in any package.json
rg "browserslist" --type json

Repository: AOSSIE-Org/PictoPy

Length of output: 2630

🏁 Script executed:

# Check the extra.css file for any fallbacks or browser-specific rules
cat -n docs/stylesheets/extra.css | head -80

Repository: AOSSIE-Org/PictoPy

Length of output: 2229

🏁 Script executed:

# Check if there's a .browserslistrc in the docs folder
fd ".browserslistrc" docs/

Repository: AOSSIE-Org/PictoPy

Length of output: 44

🏁 Script executed:

# Check mkdocs.yml for any browser/compatibility mentions
rg "browser|compatibility|support" docs/mkdocs.yml 2>/dev/null || cat docs/mkdocs.yml | head -50

Repository: AOSSIE-Org/PictoPy

Length of output: 109

🏁 Script executed:

# Check if Material theme documentation or config specifies browser support
rg -i "material|theme" mkdocs.yml | head -20

Repository: AOSSIE-Org/PictoPy

Length of output: 157

white-space: break-spaces lacks a fallback for older browser compatibility.

The CSS property is supported in Chrome 76+, Firefox 69+, Safari 13.1+, and modern Edge, but not in Internet Explorer or older browser versions. Consider adding white-space: pre-wrap as a fallback if broader browser support is needed:

.md-typeset code:not(pre code) {
  white-space: pre-wrap;      /* fallback for older browsers */
  white-space: break-spaces;  /* modern browsers */
  word-break: break-word;
}

If the documentation site intentionally targets modern browsers only, this change is optional.

🤖 Prompt for AI Agents 
In docs/stylesheets/extra.css around lines 64 to 68, the rule using white-space:
break-spaces lacks a fallback for older browsers; add white-space: pre-wrap
before white-space: break-spaces so older browsers use the fallback while modern
browsers get break-spaces, keeping the existing word-break: break-word line
unchanged.


/* General container/content spacing adjustments for smaller screens */
.md-main, .md-content {
padding-left: 1rem;
Expand Down Expand Up @@ -312,7 +336,6 @@
}
}

\
.md-footer-meta__inner.md-grid {
display: flex !important;
flex-direction: column !important;
Expand Down
14 changes: 0 additions & 14 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading