Skip to content

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

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

Open
divyansh-cyber wants to merge 3 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c916eb7
fix: improve mobile responsiveness across documentation site
divyansh-cyber Dec 17, 2025
50af529
fix: improve mobile responsiveness across documentation site
divyansh-cyber Dec 17, 2025
d073214
Merge branch 'main' of https://github.com/divyansh-cyber/docs123
divyansh-cyber Dec 17, 2025
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
26 changes: 13 additions & 13 deletions src/components/Community.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const Community = () => {
Are you curious, 🤔 or do you have questions burning in your mind? 🔥
Look no further! Join our lively Community Forum where you can:
</p>
<ul className="grid list-none gap-6 sm:grid-cols-2 xl:gap-8">
<ul className="grid list-none gap-4 sm:grid-cols-2 sm:gap-6 xl:gap-8">
{/*<li>*/}
{/* <a*/}
{/* href="https://community.keploy.io/"*/}
Expand Down Expand Up @@ -42,12 +42,12 @@ export const Community = () => {
<li>
<a
href="https://www.youtube.com/channel/UC6OTg7F4o0WkmNtSoob34lg"
className="flex items-start space-x-4"
className="flex items-start space-x-3 sm:space-x-4"
>
<svg
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"
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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

Copilot uses AI. Check for mistakes.
viewBox="0 0 48 48"
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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 uses AI. Check for mistakes.
>
<rect width="48" height="48" rx="12" />
Expand All @@ -66,14 +66,14 @@ export const Community = () => {
<li>
<a
href="https://testgpt.substack.com/"
className="flex items-start space-x-4"
className="flex items-start space-x-3 sm:space-x-4"
target="_blank"
rel="noopener noreferrer"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
className="h-12 w-12 flex-none"
className="h-10 w-10 sm:h-12 sm:w-12 flex-none"
>
<rect width="512" height="512" fill="white" />
<rect x="96" y="128" width="320" height="42.7" fill="#FF6719" />
Expand All @@ -94,12 +94,12 @@ export const Community = () => {
<li>
<a
href="https://github.com/keploy"
className="flex items-start space-x-4"
className="flex items-start space-x-3 sm:space-x-4"
>
<svg
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"
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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

Copilot uses AI. Check for mistakes.
viewBox="0 0 48 48"
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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 uses AI. Check for mistakes.
>
<rect width="48" height="48" rx="12" />
Expand All @@ -118,11 +118,11 @@ export const Community = () => {
<li>
<a
href="https://twitter.com/keployio"
className="flex items-start space-x-4"
className="flex items-start space-x-3 sm:space-x-4"
>
<svg
fill="currentColor"
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 512 509.64"
>
<rect width="509.64" height="512" rx="120" />
Expand All @@ -144,10 +144,10 @@ export const Community = () => {
<li>
<a
href="https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg"
className="flex items-start space-x-4"
className="flex items-start space-x-3 sm:space-x-4"
>
<svg
className="h-12 w-12 flex-none text-blue-400 "
className="h-10 w-10 sm:h-12 sm:w-12 flex-none text-blue-400"
viewBox="0 0 1610 1610"
>
<title>slack-logo-icon</title>
Expand Down Expand Up @@ -205,10 +205,10 @@ export const Community = () => {
<li>
<a
href="https://keploy.io/blog"
className="flex items-start space-x-4"
className="flex items-start space-x-3 sm:space-x-4"
>
<svg
class="h-12 w-12 flex-none "
class="h-10 w-10 sm:h-12 sm:w-12 flex-none"
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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 uses AI. Check for mistakes.
width="48"
height="48"
viewBox="0 0 48 48"
Expand Down
4 changes: 2 additions & 2 deletions src/components/Product.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
function UTG() {
return (
<div className="rounded-lg">
<ul className="grid auto-cols-[300px] grid-flow-col gap-3 lg:gap-5">
<ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
<li className="mt-5 flex flex-col space-y-3 text-lg">
<Link
className="text-foreground-light flex-grow text-sm"
Expand Down Expand Up @@ -247,7 +247,7 @@ export const Products = () => {
workflow:
</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">
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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 uses AI. Check for mistakes.
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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 uses AI. Check for mistakes.
<UTG />
</div>
</section>
Expand Down
2 changes: 1 addition & 1 deletion src/components/UtgMethods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ function UTGMethods() {
integration to one-click IDE generation:
</p>

<ul className="grid auto-cols-[300px] grid-flow-col gap-3 lg:gap-5">
<ul className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
<li className="mt-5 flex flex-col space-y-3 text-lg">
<Link
className="text-foreground-light flex-grow text-sm"
Expand Down
206 changes: 206 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -873,4 +873,210 @@ textarea {
background-color: #e67643 !important;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
/* Mobile-specific font size adjustments */
:root {
font-size: 16px;
}

/* Ensure proper text wrapping on mobile */
h1 {
font-size: 1.75rem !important;
line-height: 1.2;
word-wrap: break-word;
}

h2 {
font-size: 1.5rem !important;
line-height: 1.3;
word-wrap: break-word;
}

h3 {
font-size: 1.25rem !important;
line-height: 1.4;
}

/* Mobile padding and margin adjustments */
.main {
padding: 0.5rem !important;
}

main {
padding: 1rem !important;
}

/* Improve navbar spacing on mobile */
.navbar__inner {
padding: 0.5rem 1rem !important;
}

.navbar__items--right {
gap: 8px;
}

.navbar__items--right > :last-child {
padding-right: 0;
}

/* Fix sidebar width on mobile */
.docs-wrapper aside {
width: 100% !important;
}

/* Ensure images are responsive */
img {
max-width: 100%;
height: auto;
Comment on lines +929 to +931
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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.

Copilot uses AI. Check for mistakes.
}

/* Fix table overflow on mobile */
table {
display: block;
overflow-x: auto;
white-space: nowrap;
}

/* Improve code block readability on mobile */
pre {
font-size: 0.85rem;
overflow-x: auto;
}

/* Fix pagination on mobile */
.pagination-nav {
flex-direction: column;
gap: 1rem;
}

.pagination-nav__item {
width: 100%;
}

/* Ensure cards stack properly on mobile */
.card {
margin-bottom: 1rem;
}

/* Fix button sizing on mobile */
.button {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}

/* Improve footer spacing on mobile */
footer {
padding: 1rem;
}

.footer__links {
flex-direction: column;
align-items: flex-start;
}

/* Fix search button on mobile */
.DocSearch-Button {
padding: 0.5rem !important;
font-size: 0.9rem !important;
}

/* Improve TOC on mobile */
.table-of-contents {
padding-top: 1rem;
font-size: 0.9rem;
}

/* Fix announcement bar on mobile */
div[class^="announcementBar_"] {
font-size: 0.85rem;
padding: 0.5rem;
}

/* Ensure prose content is readable on mobile */
.prose {
font-size: 1rem;
}

.prose p {
margin-bottom: 1rem;
}

/* Fix community links spacing on mobile */
section ul {
padding-left: 0;
}

section li {
Comment on lines +1006 to +1010
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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 uses AI. Check for mistakes.
margin-bottom: 1rem;
}
}

/* Tablet-specific adjustments */
@media screen and (min-width: 769px) and (max-width: 996px) {
:root {
font-size: 17px;
}

.navbar__inner {
padding: 0.75rem 2rem;
}

main {
padding: 1.5rem !important;
}

h1 {
font-size: 2rem;
}

h2 {
font-size: 1.75rem;
}
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
:root {
font-size: 14px;
}

h1 {
font-size: 1.5rem !important;
}

h2 {
font-size: 1.25rem !important;
}

h3 {
font-size: 1.1rem !important;
}

/* Tighter spacing for small screens */
main {
padding: 0.75rem !important;
}

.navbar__inner {
padding: 0.5rem !important;
}

/* Smaller buttons on small screens */
.button {
padding: 0.4rem 0.8rem;
font-size: 0.85rem;
}

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

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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 uses AI. Check for mistakes.
padding: 0.75rem !important;
}

/* Fix icon sizing on small screens */
svg {
Comment on lines +1077 to +1078
Copy link

Copilot AI Dec 17, 2025

Choose a reason for hiding this comment

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

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 uses AI. Check for mistakes.
max-width: 100%;
height: auto;
}
}
Loading