Skip to content

Improve docs home mobile responsiveness - #3962

Open
kavix wants to merge 1 commit into
thunder-id:mainfrom
kavix:docs-responsive-home-layout
Open

Improve docs home mobile responsiveness#3962
kavix wants to merge 1 commit into
thunder-id:mainfrom
kavix:docs-responsive-home-layout

Conversation

@kavix

@kavix kavix commented Jul 13, 2026 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

Purpose

Make the docs home page and use-cases section responsive on mobile, removing the left-heavy layout and using the available width more effectively.

Approach

  • Expanded the docs home column on mobile so the landing page can use the full viewport width.
  • Stacked the browse-by-topic cards into a single column on small screens.
  • Kept the use-case cards responsive so the home and overview pages share the same mobile-friendly behavior.

Screenshots

Desktop Flow

Desktop application flow Desktop execution result

Mobile Flow

Mobile interface Mobile interface result

Related Issues

Related PRs

  • N/A

Checklist

  • Followed the contribution guidelines.
  • Manual test round performed and verified.
  • Documentation provided.
  • Ran Vale and fixed all errors and warnings
  • Unit Tests
  • Integration Tests
  • Breaking changes section filled.
  • breaking change label added.

Security checks

  • Followed secure coding standards in WSO2 Secure Coding Guidelines.
  • Confirmed that this PR does not commit any keys, passwords, tokens, usernames, or other secrets.

Summary by CodeRabbit

  • Style
    • Improved responsive layouts for the use-case overview, branch cards, and getting-started topics.
    • Use-case cards now fill available space in responsive one-, two-, or three-column grids.
    • Expanded documentation content width and enabled full-width home content on mobile devices.
    • Improved mobile presentation by hiding decorative overview connectors on smaller screens.
    • Reformatted overview content for improved consistency and readability.

@coderabbitai

coderabbitai Bot commented Jul 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 3a2317bf-03ec-46ee-b06d-f62a2d85f852

📥 Commits

Reviewing files that changed from the base of the PR and between f482ede and c719ce3.

📒 Files selected for processing (5)
  • docs/content/use-cases/overview.mdx
  • docs/src/components/DocsGetStarted.tsx
  • docs/src/components/UseCaseBranchCard.tsx
  • docs/src/components/UseCaseBranchCards.tsx
  • docs/src/css/custom.css
🚧 Files skipped from review as they are similar to previous changes (5)
  • docs/src/css/custom.css
  • docs/src/components/UseCaseBranchCards.tsx
  • docs/content/use-cases/overview.mdx
  • docs/src/components/UseCaseBranchCard.tsx
  • docs/src/components/DocsGetStarted.tsx
📝 Walkthrough

Walkthrough

Documentation use-case layouts now use responsive grids and fluid card sizing. Overview content width and the documentation home column adjust at smaller viewport sizes.

Changes

Documentation responsive layout

Layer / File(s) Summary
Use-case component layout
docs/content/use-cases/overview.mdx, docs/src/components/UseCaseBranchCard.tsx, docs/src/components/UseCaseBranchCards.tsx, docs/src/css/custom.css		 The connector hides on small viewports. Branch cards use fluid sizing. The cards container uses responsive one-, two-, and three-column grids. The overview content width increases to 1200px.
Getting-started responsive layout
docs/src/components/DocsGetStarted.tsx, docs/src/css/custom.css		 BrowseTopics uses one column by default, two columns at sm, and four columns at md. The docs home column uses full width up to 996px.

Estimated code review effort: 2 (Simple) | ~10 minutes

Mergeability Score: ⚪ Minimal · up to c719c

This PR changes documentation page layout for improved mobile responsiveness, with no actionable merge-blocking risk remaining after normal checks and review.

Suggested labels: skip-changelog

Suggested reviewers: brionmario

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main change: improving mobile responsiveness in the documentation home page.
Description check ✅ Passed The description includes the purpose, approach, screenshots, related issue, checklist, and security checks; incomplete test items are non-critical for this documentation change.
Linked Issues check ✅ Passed The changes address issue #3947 by improving whitespace use, responsive layouts, and providing desktop and mobile screenshots.
Out of Scope Changes check ✅ Passed All changed files support the documented responsiveness and layout objectives, with no unrelated code changes identified.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

docs/content/use-cases/overview.mdx

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

docs/src/components/DocsGetStarted.tsx

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

docs/src/components/UseCaseBranchCard.tsx

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

  • 2 others

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot added the skip-changelog Skip generating changelog for a particular PR label Jul 13, 2026
@codecov

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@brionmario brionmario mentioned this pull request Jul 14, 2026
Open
brionmario
brionmario reviewed Jul 14, 2026
View reviewed changes
Comment thread docs/src/css/custom.css
@kavix kavix closed this Jul 15, 2026
@kavix kavix reopened this Aug 1, 2026
@ThaminduDilshan

ThaminduDilshan commented Aug 6, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

@kavix let's squash and force push so that PR will only have a single commit. We follow a single commit per PR rule.

Also let's address existing code review comments

@kavix
kavix force-pushed the docs-responsive-home-layout branch from bf613cc to 54d819d Compare August 7, 2026 07:52
@coderabbitai

coderabbitai Bot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

1 similar comment
@coderabbitai

coderabbitai Bot commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@kavix
kavix force-pushed the docs-responsive-home-layout branch from 939c722 to 54d819d Compare August 7, 2026 08:13
@kavix
kavix requested a review from brionmario August 7, 2026 08:14
@kavix

kavix commented Aug 7, 2026

Copy link
Copy Markdown
Contributor Author

@kavix let's squash and force push so that PR will only have a single commit. We follow a single commit per PR rule.

Also let's address existing code review comments

done!

@kavix
kavix force-pushed the docs-responsive-home-layout branch from 54d819d to 4c2a204 Compare August 7, 2026 15:38
@coderabbitai

coderabbitai Bot commented Aug 13, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@kavix
kavix force-pushed the docs-responsive-home-layout branch from c719ce3 to ad0d0db Compare August 13, 2026 05:19
@kavix

kavix commented Aug 13, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Hi @brionmario @ThaminduDilshan, I’ve addressed the requested changes, removed the unrelated CSS changes, moved the component styling to MUI sx props, and squashed the PR into a single commit as requested.

Could you please take another look when you have a chance? Thanks!

brionmario
brionmario reviewed Sep 4, 2026
View reviewed changes
Comment thread docs/src/css/custom.css
max-width: none;
}

.docs-doc-id-use-cases\/overview .theme-doc-markdown.markdown {

@brionmario brionmario Sep 4, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@kavix Why did we had the CSS here?
Adding a max with like this would be a problem for larger screens.
Can we avoid this and go for a flex layout?

The implementation should work for 1, 2, 3 or any other number of usecase cards.
Use a <Grid> component if requrired.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@brionmario brionmario brionmario requested changes

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

skip-changelog Skip generating changelog for a particular PR

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Docs] Fix whitespace issues

3 participants

@kavix @ThaminduDilshan @brionmario