Rewrite docs site UI: fix mobile overflow, polish visual design - #19
Merged
Merged
Conversation
What: full rewrite of docs/index.html, docs/styles.css, docs/script.js.
Root cause fixed: the hero section's CSS Grid had no min-width: 0 on
its items, so its unwrapped <pre> code sample forced the whole grid
wider than the viewport on narrow screens - body's overflow-x: hidden
then clipped it instead of scrolling, cutting off text and buttons
("PostPy...", "PyPI Packa..."). Confirmed via headless-Chrome
screenshots at 375/768/1440px before and after: 375px was genuinely
broken (content clipped), everything below the hero already rendered
fine. Fixed by giving hero-content/hero-code min-width: 0 so the code
panel scrolls within itself; re-verified clean at all three widths
plus full-page mobile and desktop screenshots.
Visual rewrite: replaced the orange/navy gradient-heavy theme and
emoji-as-icon feature cards/comparison badges with a flatter,
single-accent dark theme (near-black surfaces, 1px borders instead of
glow/shadow) and inline SVG icons throughout, closer to Vercel/Linear-
style dev-tool docs.
Content refreshed to match PR #17/#18: API reference type table now
lists BYTEA and bool/int/float/text arrays; the quick-start "Advanced"
tab shows native datetime/uuid/Decimal/dict/array/bytes binding
instead of the old str()+::cast pattern.
script.js cleanup: removed dead placeholder code (empty theme-toggle/
analytics/service-worker stubs, deprecated performance.timing
logging) and the duplicate JS-injected search input (index.html now
has one static #doc-search wired directly) - kept every actually-used
behavior (mobile menu, scroll-spy nav, tabs, copy-to-clipboard,
API sidebar, scroll-to-top, basic text search).
Verified: served locally, screenshotted at 375/768/1440px (mobile,
tablet, desktop) via headless Chrome before and after, checked the
console log for JS errors on load (none from script.js/index.html).
|
Note Currently processing new changes in this PR. This may take a few minutes, please wait... ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (3)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
min-width: 0on its items, so its unwrapped<pre>code sample forced the whole grid wider than the viewport on phones -body { overflow-x: hidden }then clipped it instead of scrolling, cutting off text and buttons. Confirmed with headless-Chrome screenshots at 375/768/1440px before and after.docs/index.html+docs/styles.css: replaced the gradient-heavy orange/navy theme and emoji-as-icon cards/badges with a flatter, single-accent dark theme and inline SVG icons (Vercel/Linear-style dev-tool docs look).BYTEAand bool/int/float/text arrays; the quick-start "Advanced" tab shows nativedatetime/uuid/Decimal/dict/array/bytesbinding instead of the oldstr()+::castpattern.docs/script.jscleanup: removed dead placeholder code (empty theme-toggle/analytics/service-worker stubs, deprecatedperformance.timinglogging) and a duplicate JS-injected search input; kept every actually-used behavior (mobile menu, scroll-spy nav, tabs, copy-to-clipboard, API sidebar, scroll-to-top, basic text search).Test plan
docs/locally, screenshotted at 375px/768px/1440px via headless Chrome before and after the fix - 375px was genuinely broken before (clipped hero), clean afterscript.js/index.htmlSummary by CodeRabbit
Documentation
query_one, dates, UUIDs, decimals, JSON, bytes, arrays, and unsupported types.Style