fix: improve mobile responsiveness across documentation site (#2998) #734

divyansh-cyber · 2025-12-17T18:50:04Z

Description:

What has changed?

Fixed mobile layout issues where components were not properly aligned and caused horizontal scrolling on small screens. Added comprehensive responsive styles to ensure the documentation site looks great on all devices.

This PR Resolves #2998

Type of change

Bug fix (non-breaking change which fixes an issue).
New feature (non-breaking change which adds functionality).
Breaking change (fix or feature that would cause existing functionality to not work as expected).
Documentation update (if none of the other choices apply).

Changes Made

Components: Fixed horizontal scrolling in Product and UtgMethods components by replacing grid-flow-col with responsive grid layouts (grid-cols-1 sm:grid-cols-2 lg:grid-cols-3)
Mobile Breakpoints: Added comprehensive media queries for mobile (@768px, @480px) and tablet (@769px-996px) in custom.css
Typography: Implemented responsive font sizing that scales appropriately across devices
Spacing: Optimized padding, margins, and gaps for mobile-friendly touch interactions
Community Icons: Made social media icons responsive (10x10 on mobile, 12x12 on desktop)
Overflow Handling: Fixed table and code block overflow on small screens
Navigation: Improved navbar, pagination, footer, and button layouts for mobile

How Has This Been Tested?

Ran npm run build successfully
Ran npm run serve and verified changes
Tested on mobile viewport (< 480px) - iPhone SE (375 x 667px)
Tested on tablet viewport (768px - 996px) - iPad Pro (1024 x 1366px)
Tested on desktop viewport (> 996px) - Desktop (1200px)
Verified no horizontal scrolling on any screen size

Screenshots

Mobile View (iPhone SE - 375px):

Content stacks vertically
No horizontal scrolling
Proper mobile navigation with hamburger menu

Tablet View (iPad Pro - 1024px):

Optimized layout for medium screens
Full navbar displayed
Cards arranged appropriately

Desktop View (1200px):

Complete desktop layout
All navigation elements visible
Optimal spacing and typography

Checklist:

My code follows the style guidelines of this project.
I have performed a self-review of my own code.

Links & References

Closes: #2998
keploy/keploy#2998

Enhanced mobile experience by fixing layout issues and adding comprehensive responsive styles for various screen sizes. Changes: - Fixed horizontal scrolling in Product and UtgMethods components by replacing grid-flow-col with responsive grid layouts that stack on mobile - Added comprehensive mobile breakpoints (@768px, @480px) to custom.css - Implemented responsive typography with scaled font sizes for mobile devices - Optimized navbar, pagination, and footer spacing for touch-friendly interaction - Made community icons and spacing responsive (smaller on mobile, larger on desktop) - Fixed table and code block overflow handling on small screens - Added tablet-specific styles (769px-996px) for mid-range devices - Improved button, card, and form layouts for mobile screens All sections now properly align and display consistently across mobile, tablet, and desktop viewports without horizontal scrolling or broken layouts. Signed-off-by: Divyansh Rai <raidivyansh899@gmail.com>

github-actions

Thank you and congratulations 🎉 for opening your very first pull request in keploy

Copilot

Pull request overview

This PR addresses mobile responsiveness issues across the documentation site by fixing horizontal scrolling problems and implementing comprehensive responsive design patterns for various screen sizes.

Key Changes:

Replaced fixed-width grid layouts with responsive Tailwind grid classes to prevent horizontal scrolling
Added comprehensive media queries for mobile (≤768px), tablet (769px-996px), and small mobile (≤480px) devices
Implemented responsive typography, spacing, and icon sizing throughout the site

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
src/components/UtgMethods.js	Changed grid layout from `grid-flow-col` to responsive classes for proper mobile stacking
src/components/Product.js	Updated grid layouts to use responsive column classes instead of fixed-width layouts
src/components/Community.js	Adjusted icon sizes and spacing to be responsive (smaller on mobile, larger on desktop)
src/css/custom.css	Added comprehensive mobile-first responsive styles including typography scaling, spacing adjustments, and component-specific fixes
src/pages/styles.module.css	Added mobile-specific styling for hero banner, features, buttons, and other page components with multiple breakpoint support

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-17T18:53:44Z

src/components/Community.js

              fill="currentColor"
              // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
-              className="h-12 w-12 flex-none text-black "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-black"


Trailing whitespace should be removed at the end of the className for consistency and cleaner code.

Copilot · 2025-12-17T18:53:44Z

src/css/custom.css

+  /* Fix icon sizing on small screens */
+  svg {


This rule applies to all SVG elements globally on small screens, which could unintentionally affect icons that need specific dimensions to maintain proper aspect ratios or visual alignment. Consider using a more specific selector like '.card svg' or a utility class to target only content images rather than all SVG elements including icons in navigation or UI components.

Suggested change

/* Fix icon sizing on small screens */

svg {

/* Fix SVG sizing for content images on small screens */

.card svg,

div[class*="rounded-lg"] svg {

Copilot · 2025-12-17T18:53:44Z

src/components/Community.js

          >
            <svg
-              class="h-12 w-12 flex-none "
+              class="h-10 w-10 sm:h-12 sm:w-12 flex-none"


The attribute should use "className" instead of "class" in JSX. While this change was made to improve responsive sizing, the original attribute name should be corrected for proper React/JSX syntax.

Suggested change

class="h-10 w-10 sm:h-12 sm:w-12 flex-none"

className="h-10 w-10 sm:h-12 sm:w-12 flex-none"

Copilot · 2025-12-17T18:53:45Z

src/components/Product.js

      </p>

-      <div className="grid gap-4  sm:grid-cols-3 xl:gap-6">
+      <div className="grid gap-4 grid-cols-1 sm:grid-cols-3 xl:gap-6">


There's an extra space between "gap-4" and "grid-cols-1" that should be removed for consistency with other class declarations in the codebase.

Copilot · 2025-12-17T18:53:45Z

src/components/Community.js

              fill="currentColor"
              // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
-              className="h-12 w-12 flex-none text-red-500 "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-red-500"


Trailing whitespace should be removed at the end of the className for consistency and cleaner code.

Copilot · 2025-12-17T18:53:45Z

src/css/custom.css

+  img {
+    max-width: 100%;
+    height: auto;


This rule applies to all img elements globally on mobile, which could cause unintended side effects for images that require fixed dimensions (like logos, icons, or decorative elements). Consider using a more specific selector like '.markdown img' or 'article img' to target only content images rather than all images across the site.

Enhanced mobile experience by fixing layout issues and adding comprehensive responsive styles for various screen sizes. Changes: - Fixed horizontal scrolling in Product and UtgMethods components by replacing grid-flow-col with responsive grid layouts that stack on mobile - Added comprehensive mobile breakpoints (@768px, @480px) to custom.css - Implemented responsive typography with scaled font sizes for mobile devices - Optimized navbar, pagination, and footer spacing for touch-friendly interaction - Made community icons and spacing responsive (smaller on mobile, larger on desktop) - Fixed table and code block overflow handling on small screens - Added tablet-specific styles (769px-996px) for mid-range devices - Improved button, card, and form layouts for mobile screens All sections now properly align and display consistently across mobile, tablet, and desktop viewports without horizontal scrolling or broken layouts. Signed-off-by: Divyansh Rai <140232173+divyansh-cyber@users.noreply.github.com>

divyansh-cyber · 2025-12-17T19:10:06Z

Hi @Achanandhi-M 👋
I’ve opened a PR that improves the mobile responsiveness of the Keploy docs (layout, spacing, typography, and overflow fixes).

This addresses the issues described in #2998.
Would really appreciate your review when you get a chance. Thanks!

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-17T19:21:26Z

src/css/custom.css

+  section ul {
+    padding-left: 0;
+  }
+
+  section li {


The selector "section ul" is very broad and will affect all unordered lists within any section element on mobile. This could unintentionally override padding for lists that need left padding (like documentation content with nested lists). Consider using a more specific selector or scoping this to the specific component that needs it.

Suggested change

section ul {

padding-left: 0;

}

section li {

section > ul {

padding-left: 0;

}

section > ul > li {

Copilot · 2025-12-17T19:21:27Z

src/css/custom.css

+
+  /* Adjust card padding on small screens */
+  .card,
+  div[class*="rounded-lg"] {


The selector div[class*="rounded-lg"] is very broad and will match any div with "rounded-lg" anywhere in its class string, potentially affecting many unintended elements across the site. This could override padding for elements that need different spacing. Consider using a more specific selector or a dedicated class.

Suggested change

div[class*="rounded-lg"] {

.rounded-lg {

Copilot · 2025-12-17T19:21:27Z

src/components/Community.js

              // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
-              className="h-12 w-12 flex-none text-red-500 "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-red-500"
              viewBox="0 0  48 48"


The viewBox attribute contains extra spaces ("0 0 48 48" should be "0 0 48 48"). While this may not cause issues, it's inconsistent with standard SVG formatting and could be confusing.

Suggested change

viewBox="0 0 48 48"

viewBox="0 0 48 48"

Copilot · 2025-12-17T19:21:27Z

src/components/Community.js

              // Hotfix: add viewBox to prevent icon from being cut off after tailwind preflight disabled
-              className="h-12 w-12 flex-none text-black "
+              className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-black"
              viewBox="0 0  48 48"


The viewBox attribute contains extra spaces ("0 0 48 48" should be "0 0 48 48"). While this may not cause issues, it's inconsistent with standard SVG formatting and could be confusing.

Suggested change

viewBox="0 0 48 48"

viewBox="0 0 48 48"

Copilot · 2025-12-17T19:21:28Z

src/components/Product.js

      </p>

-      <div className="grid gap-4  sm:grid-cols-3 xl:gap-6">
+      <div className="grid gap-4 grid-cols-1 sm:grid-cols-3 xl:gap-6">


There are two spaces between "gap-4" and "grid-cols-1". While this doesn't affect functionality, it's inconsistent with the single-space separation used elsewhere and could be cleaned up for consistency.

Copilot AI review requested due to automatic review settings December 17, 2025 18:50

Copilot started reviewing on behalf of divyansh-cyber December 17, 2025 18:50 View session

github-actions bot reviewed Dec 17, 2025

View reviewed changes

Copilot AI reviewed Dec 17, 2025

View reviewed changes

divyansh-cyber added 2 commits December 18, 2025 00:25

Merge branch 'main' of https://github.com/divyansh-cyber/docs123

d073214

divyansh-cyber requested a review from Copilot December 17, 2025 19:15

Copilot started reviewing on behalf of divyansh-cyber December 17, 2025 19:15 View session

Copilot AI reviewed Dec 17, 2025

View reviewed changes

-  /* Fix icon sizing on small screens */
-  svg {
+  /* Fix SVG sizing for content images on small screens */
+  .card svg,
+  div[class*="rounded-lg"] svg {

	class="h-10 w-10 sm:h-12 sm:w-12 flex-none"
	className="h-10 w-10 sm:h-12 sm:w-12 flex-none"

fix: improve mobile responsiveness across documentation site (#2998) #734

Are you sure you want to change the base?

fix: improve mobile responsiveness across documentation site (#2998) #734

Uh oh!

Conversation

divyansh-cyber commented Dec 17, 2025

What has changed?

Type of change

Changes Made

How Has This Been Tested?

Screenshots

Checklist:

Links & References

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

divyansh-cyber commented Dec 17, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant