fix : Question section and Prev/Next Cards #764

Gagan202005 · 2026-01-27T14:39:23Z

Summary

This PR improves the UI near the footer on the Keploy docs website.
It removes visual clutter, adds clear separation, and makes the Prev/Next navigation more compact and readable.

Closes : keploy/keploy#3657

What was wrong

The “Questions?” card was too big and visually heavy
Emojis and long text made the support section noisy
Support links were hard to notice
Prev/Next navigation had too much whitespace
Navigation cards had no clear border
No divider between content, navigation, and footer

What’s changed

Support section

Converted into a slim support strip
Removed emojis and large heading
Added clear links for:
- Join Slack
- Book a demo
Removed shadows and reduced padding

Prev / Next navigation

Reduced padding and whitespace
Removed card-like look
Added clear borders
Wrapped paginator to avoid Docusaurus style overrides

Layout

Added dividers between:
- Content and support strip
- Support strip and Prev/Next navigation
- Navigation and footer
Used theme tokens for light and dark mode support

Result

Cleaner footer area
Better visual separation
Compact and clear navigation
Consistent look in light and dark modes
UI-only change (no functional impact)

How to test

Run the docs site locally.
Open any documentation page.
Scroll to the bottom.
Check:
- Support strip is small and clean
- Prev/Next navigation is compact and bordered
Toggle light/dark mode and verify consistency.

Screenshots

Checklist

Tested in light mode
Tested in dark mode
Docs UI only
Ready for review

Signed-off-by: Gagan202005 <gagansinghal2005@gmail.com>

Gagan202005 · 2026-02-02T14:03:02Z

hi @Achanandhi-M @nehagup
please review this pr when you get a chance
Thanks!

Copilot

Pull request overview

This PR improves the documentation footer UI by redesigning the support section and Prev/Next navigation. The changes focus on reducing visual clutter and creating clearer separation between page sections.

Changes:

Refactored the KeployCloud support section into a compact horizontal strip with direct links
Added horizontal dividers between content sections, support strip, navigation, and footer
Wrapped the DocPaginator in a custom class for styling overrides
Added CSS rules to create a more compact, bordered pagination design

Reviewed changes

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

File	Description
src/theme/DocItem/index.js	Added horizontal dividers and wrapped paginator with custom class for styling
src/components/KeployCloud.js	Converted large card-style support section to compact horizontal strip with links
src/css/custom.css	Added custom CSS rules for compact paginator styling with borders
src/theme/DocItem/styles.module.css	Added empty lines (no functional changes)

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

Copilot · 2026-02-02T14:06:09Z

src/theme/DocItem/styles.module.css

+
+
+


Unnecessary blank lines added at the end of the file. These don't add any functional value and should be removed to keep the file clean.

Suggested change

Copilot · 2026-02-02T14:06:09Z

src/css/custom.css

+.keploy-doc-paginator {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--ifm-color-emphasis-200);


The .keploy-doc-paginator class has a border-top style (line 2606 in custom.css), but there's already an hr element immediately before the paginator (line 252 in DocItem/index.js). This creates redundant visual separation. Consider removing either the hr element or the border-top style from the CSS to avoid double borders.

Suggested change

border-top: 1px solid var(--ifm-color-emphasis-200);

Copilot · 2026-02-02T14:06:09Z

src/theme/DocItem/index.js

+<KeployCloud />
+
+<hr className="my-8 border-[color:var(--ifm-toc-border-color)]" />
+
+<div className="keploy-doc-paginator">
+  <DocPaginator previous={metadata.previous} next={metadata.next} />
+</div>
+
+<hr className="my-6 border-[color:var(--ifm-color-emphasis-200)]" />
+


The JSX elements added here have inconsistent indentation. Lines 250-258 are not properly indented to match the surrounding code structure. They should be indented to align with the parent container's content (same level as the closing article tag on line 247). Proper indentation improves code readability and maintainability.

Suggested change

<KeployCloud />

<hr className="my-8 border-[color:var(--ifm-toc-border-color)]" />

<div className="keploy-doc-paginator">

<DocPaginator previous={metadata.previous} next={metadata.next} />

</div>

<hr className="my-6 border-[color:var(--ifm-color-emphasis-200)]" />

<KeployCloud />

<hr className="my-8 border-[color:var(--ifm-toc-border-color)]" />

<div className="keploy-doc-paginator">

<DocPaginator previous={metadata.previous} next={metadata.next} />

</div>

<hr className="my-6 border-[color:var(--ifm-color-emphasis-200)]" />

Copilot · 2026-02-02T14:06:10Z

src/components/KeployCloud.js

+          className="font-medium text-orange-500 hover:underline"
+        >
+          Join Slack
+        </a>
+        <a
+          href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"
+          className="font-medium text-orange-500 hover:underline"


External links should include rel="noopener noreferrer" for security. Without these attributes, the linked page can access the window.opener object, which is a security risk. Other external links in the codebase (e.g., src/components/Community.js:80, src/components/WhatIsKeploy.js:176) properly include these attributes.

Suggested change

className="font-medium text-orange-500 hover:underline"

>

Join Slack

</a>

<a

href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"

className="font-medium text-orange-500 hover:underline"

className="font-medium text-orange-500 hover:underline"

rel="noopener noreferrer"

>

Join Slack

</a>

<a

href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"

className="font-medium text-orange-500 hover:underline"

rel="noopener noreferrer"

Copilot · 2026-02-02T14:06:10Z

src/components/KeployCloud.js

+          className="font-medium text-orange-500 hover:underline"
+        >
+          Join Slack
+        </a>
+        <a
+          href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"
+          className="font-medium text-orange-500 hover:underline"


External links should include rel="noopener noreferrer" for security. Without these attributes, the linked page can access the window.opener object, which is a security risk. Other external links in the codebase (e.g., src/components/Community.js:80, src/components/WhatIsKeploy.js:176) properly include these attributes.

Suggested change

className="font-medium text-orange-500 hover:underline"

>

Join Slack

</a>

<a

href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"

className="font-medium text-orange-500 hover:underline"

className="font-medium text-orange-500 hover:underline"

rel="noopener noreferrer"

>

Join Slack

</a>

<a

href="https://calendar.app.google/cXVaj6hbMUjvmrnt9"

className="font-medium text-orange-500 hover:underline"

rel="noopener noreferrer"

Copilot · 2026-02-02T14:06:10Z

src/theme/DocItem/index.js

+</div>
+
+<hr className="my-6 border-[color:var(--ifm-color-emphasis-200)]" />
+


This line contains trailing whitespace. Remove the trailing spaces to maintain clean code formatting.

Suggested change

fix questions section

a8f5588

Signed-off-by: Gagan202005 <gagansinghal2005@gmail.com>

Gagan202005 mentioned this pull request Jan 27, 2026

[docs]: Redesign Questions card, Prev/Next cards keploy/keploy#3657

Open

1 task

Gagan202005 added 3 commits January 27, 2026 23:10

Merge branch 'main' into fix-Questions-section

22721ea

Merge branch 'main' into fix-Questions-section

565135f

Merge branch 'main' into fix-Questions-section

824c1cb

Copilot AI review requested due to automatic review settings February 2, 2026 14:02

Copilot started reviewing on behalf of Gagan202005 February 2, 2026 14:02 View session

Copilot AI reviewed Feb 2, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix : Question section and Prev/Next Cards #764

fix : Question section and Prev/Next Cards #764

Gagan202005 commented Jan 27, 2026 •

edited

Loading

Uh oh!

Gagan202005 commented Feb 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		</div>

		<hr className="my-6 border-[color:var(--ifm-color-emphasis-200)]" />

Uh oh!

fix : Question section and Prev/Next Cards #764

Are you sure you want to change the base?

fix : Question section and Prev/Next Cards #764

Conversation

Gagan202005 commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Closes : keploy/keploy#3657

What was wrong

What’s changed

Support section

Prev / Next navigation

Layout

Result

How to test

Screenshots

Checklist

Uh oh!

Gagan202005 commented Feb 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Gagan202005 commented Jan 27, 2026 •

edited

Loading