Chore: Improve UI responsiveness, specifically for smaller screen sizes #426
Conversation
WalkthroughAdjusted layout and presentation across many documentation index pages: grid column definitions, gutters, padding, and some card column specs were changed; a few link labels and small wording tweaks were applied. Changes are presentational only; no behavioral code modifications. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🧰 Additional context used🧠 Learnings (5)📚 Learning: 2025-10-10T17:58:26.545ZApplied to files:
📚 Learning: 2025-09-25T19:31:54.320ZApplied to files:
📚 Learning: 2025-08-09T11:00:03.578ZApplied to files:
📚 Learning: 2025-05-18T13:25:11.786ZApplied to files:
📚 Learning: 2025-10-06T16:40:16.322ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
🔇 Additional comments (5)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (16)
docs/connect/index.md(3 hunks)docs/feature/ccr/index.md(1 hunks)docs/feature/cluster/index.md(1 hunks)docs/handbook/index.md(5 hunks)docs/index.md(8 hunks)docs/ingest/cdc/index.md(2 hunks)docs/ingest/index.md(1 hunks)docs/ingest/telemetry/index.md(1 hunks)docs/install/index.md(1 hunks)docs/solution/machine-learning/index.md(4 hunks)docs/start/application/index.md(2 hunks)docs/start/index.md(4 hunks)docs/start/query/ad-hoc.md(1 hunks)docs/start/query/aggregations.md(2 hunks)docs/start/query/ai-integration.md(2 hunks)docs/tutorial/index.md(1 hunks)
🧰 Additional context used
🧠 Learnings (5)
📚 Learning: 2025-05-18T13:25:11.786Z
Learnt from: amotl
PR: crate/cratedb-guide#204
File: docs/integrate/mcp/community.md:6-8
Timestamp: 2025-05-18T13:25:11.786Z
Learning: In the CrateDB Guide documentation, particularly for MCP-related pages, the author prefers a 1-column grid layout for multiple cards to stack them vertically rather than side by side, as this is an intentional design choice.
Applied to files:
docs/index.mddocs/connect/index.mddocs/feature/cluster/index.mddocs/start/query/ad-hoc.mddocs/feature/ccr/index.mddocs/start/query/aggregations.mddocs/start/index.mddocs/handbook/index.md
📚 Learning: 2025-10-06T16:40:16.322Z
Learnt from: amotl
PR: crate/cratedb-guide#0
File: :0-0
Timestamp: 2025-10-06T16:40:16.322Z
Learning: In the crate/cratedb-guide repository, documentation is organized by content type: files in `docs/feature/`, `docs/integrate/`, and `docs/ingest/` are reference material designed for quick access, while `docs/start/` contains learning path content. Reference material sections use top-right reference layouts for efficient navigation.
Applied to files:
docs/index.mddocs/handbook/index.md
📚 Learning: 2025-08-23T04:22:52.597Z
Learnt from: amotl
PR: crate/cratedb-guide#235
File: docs/start/going-further.md:20-38
Timestamp: 2025-08-23T04:22:52.597Z
Learning: In the CrateDB Guide repository, the prefix `crate-reference:` in documentation links (like `crate-reference:index`) is an intersphinx reference that points to external content in the CrateDB Reference Manual documentation. These references are intentionally not pointing to local files within the repository.
Applied to files:
docs/index.md
📚 Learning: 2025-09-22T22:05:05.734Z
Learnt from: amotl
PR: crate/cratedb-guide#279
File: docs/integrate/airflow/data-retention-hot-cold.md:14-14
Timestamp: 2025-09-22T22:05:05.734Z
Learning: When searching for labels in the CrateDB Guide documentation, remember that reStructuredText files (.rst) use the syntax `.. _label:` while MyST Markdown files (.md) use the syntax `(label)=`. Cross-references work between formats, so {ref}`label` in MyST can reference an RST label defined with `.. _label:`.
Applied to files:
docs/index.md
📚 Learning: 2025-09-25T19:31:54.320Z
Learnt from: bmunkholm
PR: crate/cratedb-guide#340
File: docs/home/index.md:84-97
Timestamp: 2025-09-25T19:31:54.320Z
Learning: In the CrateDB Guide docs (MyST), the CrateDB Cloud card on the homepage should link to `getting-started` using `:link-type: ref` instead of the previous `cloud:index` intersphinx target. This change was implemented in PR #340 to direct users to the getting started section rather than directly to the Cloud documentation.
Applied to files:
docs/index.md
🪛 markdownlint-cli2 (0.18.1)
docs/connect/index.md
153-153: Reference links and images should use a label that is defined
Missing link or image reference definition: "cratedb blobs"
(MD052, reference-links-images)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Build docs
🔇 Additional comments (23)
docs/solution/machine-learning/index.md (1)
31-32: Layout improvements for responsive design are consistent.Gutter reduction from 4 to 3 across all four grid sections improves spacing for smaller viewports while maintaining visual hierarchy. The changes maintain grid symmetry and are aligned with the PR's responsiveness objectives.
Also applies to: 77-78, 110-111, 162-163
docs/tutorial/index.md (1)
11-18: Minor spacing refinements for better section separation.The added blank line before the "Get started" section improves visual hierarchy, and the gutter reduction from 4 to 3 aligns with responsive design adjustments across the documentation.
docs/index.md (3)
119-135: Refactored grid spacing strategy with explicit card-level padding.The "Learn" section now uses
gutter: 0at grid level and applies:padding: 2to individual cards. This provides precise control over spacing and improves consistency. However, verify thatgutter: 0doesn't create undesired horizontal compression on small viewports—you may want to consider a small non-zero gutter (e.g., 1) for breathing room.
187-202: Grid padding centralization improves maintainability.Moving padding from grid level to individual cards (lines 194, 208) follows a consistent pattern with the "Learn" section and provides better control over spacing hierarchy. Layout restructuring supports responsive design well.
293-322: "Examples" section maintains responsive layout consistency.Grid and card-level padding changes align with adjustments in other sections. The
padding: 0at grid level andpadding: 2at card level are consistent with the emerging pattern in this file.docs/install/index.md (1)
39-42: Improved responsive grid distribution for installation methods.The grid layout change from
2 2 2 4to2 3 3 4optimizes screen utilization across breakpoints: 2-column mobile, 3-column tablet, and up to 4-column desktop. Withgutter: 3andpadding: 0, the card grid scales well for different viewport sizes.docs/start/query/ai-integration.md (1)
200-227: Mobile-first responsive column specifications.The "Further reading" section now uses explicit responsive column specs (
12 6 3 3and12 12 6 6), implementing mobile-first breakpoints where cards span full width on mobile, half-width on tablet, and are narrower on desktop. Withgutter: 2andpadding: 0, this provides excellent responsiveness and clean presentation across all screen sizes.docs/feature/ccr/index.md (1)
91-108: Grid layout optimizes mobile stacking with responsive design.The grid change from
2 2 2 2to1 2 2 2implements a mobile-first approach where cards stack vertically (1 column) on small screens, then shift to 2-column layout on tablets and desktops. This aligns with responsive design best practices and your documented preference for vertical stacking on mobile. Based on learningsdocs/feature/cluster/index.md (1)
134-153: Consistent mobile-first grid with enriched card content.The grid change to
1 2 2 2withgutter: 2matches the pattern indocs/feature/ccr/index.md, implementing mobile-friendly vertical stacking. The enriched card descriptions (with icons and expanded content blocks) improve information hierarchy and make the learning resources more discoverable.docs/connect/index.md (2)
22-23: Consistent gutter adjustments for responsive driver layout.Gutter changes to 3 in both "Get started" and "Drivers by language" sections provide moderate horizontal spacing. These adjustments align with the responsive design strategy across the documentation.
Also applies to: 48-49
138-164: Mobile-first responsive cards in "Further reading" section.The grid uses responsive column specs (
12 6 3 3and12 12 6 6) withgutter: 2andpadding: 0, implementing mobile-first design for information cards. The new referenceconnect-natural(line 161) extends the "Read more" section with additional connectivity guidance.docs/handbook/index.md (1)
10-12: Responsive grid patterns applied consistently.Grid directives across all sections follow a mobile-first approach with 2-column mobile layouts (patterns
2 2 4 4and2 2 3 3) that scale appropriately for tablets and desktop. Gutter spacing of 2 and zero padding on grid containers provide a cohesive, tightened visual rhythm throughout.Also applies to: 54-56, 110-112, 167-169
docs/ingest/cdc/index.md (1)
25-26: Mobile-first 1-2-2 grid pattern improves narrow-screen usability.Both sections now use
1 2 2 2grids, ensuring single-column stack on mobile devices while providing 2-column layouts for tablets and desktops. This pattern is particularly effective for integration/connector content where detailed descriptions are displayed. Gutter consistency is maintained across the file.Also applies to: 58-59
docs/start/application/index.md (1)
8-9: Responsive grid pattern with progressive expansion fits sample application browsing.The
1 2 2 3pattern scales from single column on mobile to three columns on large desktops, providing a progressive browsing experience. This differs from more constrained patterns (e.g., CDC's1 2 2 2) and is justified by the nature of application listings being more compact and scannable on larger screens.Also applies to: 34-35
docs/ingest/telemetry/index.md (1)
52-54: Explicit 1-column mobile layout replaces ambiguousautopattern.The grid change from
auto 3 3 3to1 2 3 3removes mobile layout ambiguity and ensures 1-column rendering on small screens. This is a clear responsiveness improvement; theautovalue left mobile rendering to browser defaults, which often resulted in poor narrow-screen layouts.docs/ingest/index.md (2)
8-11: Intentional grid pattern balances mobile-first design with content substance.The
1 1 2 2pattern keeps a single column through tablet screens, only expanding to 2 columns on small desktops. This conservative approach is well-suited to the three substantive data ingestion method categories, which benefit from the full width on smaller devices.
28-29: Content clarifications enhance user navigation.The added descriptive footers ("Data import methods supported by CrateDB natively," etc.) under each ingestion method category provide helpful context without cluttering the main card titles. This improves scannability and helps users quickly identify the right ingestion path for their use case.
Also applies to: 45-46, 64-65
docs/start/query/ad-hoc.md (1)
211-216: Responsive column specifications provide fine-grained mobile-to-desktop scaling.The use of explicit
:columns:values (e.g.,12 6 3 3) offers responsive control at the grid-item level, ensuring full-width on mobile, half-width on tablets, and quarter-width on desktops. The "Read more" section appropriately uses12 12 6 6to keep items larger. This approach differs from grid-pattern syntax but is equally valid for detailed responsive tuning.Also applies to: 222-223, 230-231
docs/start/query/aggregations.md (2)
187-198: Consistent responsive column pattern with ad-hoc.md enhances maintainability.The identical column specifications (
12 6 3 3and12 12 6 6) applied here create a predictable pattern across query-related documentation, improving maintainability. Mobile-to-desktop scaling remains consistent.Also applies to: 206-207
197-203: Integration list expansion (Superset, Tableau) enhances BI tool coverage.The added integrations for Superset and Tableau are valuable, well-known BI tools that legitimately belong in the aggregation/analytics documentation context. This content addition complements the responsive layout improvements.
docs/start/index.md (3)
13-14: 2-column mobile layout suits icon-based navigation cards.The
2 2 4 4grid pattern expands from 2 columns on mobile (suitable for these simple icon+title navigation cards) to 4 columns on large desktops. This is notably wider on mobile than other files in the PR, reflecting the intentional design that simple icon cards benefit from a 2-column mobile layout.
21-21: Consistent padding reduction tightens card spacing throughout.Applying
:padding: 2uniformly across all grid-item-cards creates tighter internal spacing, which pairs well with the2 2 4 4grid to create a compact, scannable index. This padding reduction is consistent with the gutter/padding adjustments across the PR.Also applies to: 34-34, 47-47, 60-60
25-25: Font size adjustments maintain visual hierarchy at tighter spacing.Adding
:class-title: sd-fs-6to these navigation cards ensures titles remain appropriately sized despite the tighter padding, preserving readability and visual balance.Also applies to: 38-38, 51-51, 64-64
amotl
added
reorganize
About
Sweepingly adjust grid attributes for better rendering on mobile or tablet devices.
Preview
https://cratedb-guide--426.org.readthedocs.build/ ff.