Footer alignment for ‘Questions?’ section in docs website #667

kartikeyg0104 · 2025-09-15T15:36:55Z

What has changed?

The CSS styling in the Product.js file has been updated to improve spacing, alignment, and responsiveness. Specifically:

Adjusted margins for better spacing between sections (mb-4 to mb-6, mt-12 to mt-14).
Updated grid layout for better responsiveness (sm:grid-cols-3 changed to sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-3).
Enhanced text readability by adding leading-relaxed to paragraphs.

Type of change

Please delete options that are not relevant.

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).

Screenshots

How Has This Been Tested?

The changes have been tested by running the following commands:

npm run build - Ensured the project builds successfully without errors.
npm run serve - Verified that the changes are reflected correctly in the development server.

Screenshots of the output of both commands and the rendered Products section in the browser have been included.

Checklist:

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

Copilot

Pull Request Overview

This PR updates CSS styling in the KeployCloud component to improve the layout and alignment of the "Questions?" section in the docs website. The changes focus on enhancing spacing, positioning, and visual appearance.

Improved spacing and positioning with adjusted margins and padding
Enhanced visual styling with shadow effects and refined text alignment
Better responsive layout adjustments for the questions section

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-15T15:37:30Z

src/components/KeployCloud.js

    <section
      id="cloud"
-      className="mb-8 mt-12 flex max-w-7xl items-center space-x-5 rounded-lg bg-[color:var(--ifm-card-background-color)] p-5"
+      className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 shadow-md -ml-2"


The negative margin -ml-2 at the container level may cause layout issues or content to extend beyond its intended boundaries. Consider using proper padding or container adjustments instead of negative margins for positioning.

Suggested change

className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 shadow-md -ml-2"

className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 shadow-md"

Copilot · 2025-09-15T15:37:30Z

src/components/KeployCloud.js

+      className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 shadow-md -ml-2"
    >
-      <div className="prose prose-orange mx-auto max-w-3xl">
-        <h1> Question? 🤔💭</h1>
-        <p className="my-3 block">
+      <div className="prose prose-orange ml-0 max-w-3xl text-left">
+        <h1 className="text-left -ml-2"> Question? 🤔💭</h1>
+        <p className="my-3 block text-left -ml-0.5">


Multiple negative margins (-ml-2, -ml-0.5) and redundant text-left classes suggest inconsistent spacing approach. Consider using a consistent spacing system and removing redundant alignment classes since text-left is already applied to the parent div.

- Remove negative margins (-ml-2, -ml-0.5) causing misalignment - Increase padding from p-4 to p-6 for better spacing - Fix typo: Question? -> Questions? - Remove unnecessary ml-0 class - Enhance visual consistency and proper alignment Signed-off-by: Kartikey Gupta <kartikeyf12@gmail.com>

Achanandhi-M

Hey @kartikeyg0104 , the changes look really amazing! Just one small issue — it’s currently aligned fully to the left. Maybe you can add some spacing to make it look better.

I’ve provided a reference that you can follow. Could you please make this change?

kartikeyg0104 · 2025-09-16T13:38:28Z

Okay, I am doing right away

Signed-off-by: Kartikey Gupta <kartikeyf12@gmail.com>

kartikeyg0104 · 2025-09-16T13:49:59Z

Sir, I have changed it, you can review once.

Achanandhi-M

LGTM

* fix: improve footer alignment for Questions section - Remove negative margins (-ml-2, -ml-0.5) causing misalignment - Increase padding from p-4 to p-6 for better spacing - Fix typo: Question? -> Questions? - Remove unnecessary ml-0 class - Enhance visual consistency and proper alignment Signed-off-by: Kartikey Gupta <kartikeyf12@gmail.com> * fix: correct Questions section alignment by removing negative margins Signed-off-by: Kartikey Gupta <kartikeyf12@gmail.com> --------- Signed-off-by: Kartikey Gupta <kartikeyf12@gmail.com> Signed-off-by: Akella Srinivas <alsrinivas.346@gmail.com>

* fix: improve footer alignment for Questions section - Remove negative margins (-ml-2, -ml-0.5) causing misalignment - Increase padding from p-4 to p-6 for better spacing - Fix typo: Question? -> Questions? - Remove unnecessary ml-0 class - Enhance visual consistency and proper alignment Signed-off-by: Kartikey Gupta <kartikeyf12@gmail.com> * fix: correct Questions section alignment by removing negative margins Signed-off-by: Kartikey Gupta <kartikeyf12@gmail.com> --------- Signed-off-by: Kartikey Gupta <kartikeyf12@gmail.com>

Copilot AI review requested due to automatic review settings September 15, 2025 15:36

Copilot AI reviewed Sep 15, 2025

View reviewed changes

kartikeyg0104 force-pushed the new branch from e2009fb to 53698b4 Compare September 15, 2025 15:43

kartikeyg0104 mentioned this pull request Sep 15, 2025

[fix]: footer alignment for ‘Questions?’ section in docs website keploy/keploy#2994

Closed

Achanandhi-M requested changes Sep 16, 2025

View reviewed changes

fix: correct Questions section alignment by removing negative margins

f5d50b9

Signed-off-by: Kartikey Gupta <kartikeyf12@gmail.com>

kartikeyg0104 requested a review from Achanandhi-M September 16, 2025 13:51

Merge branch 'main' into new

40f5702

Achanandhi-M approved these changes Sep 18, 2025

View reviewed changes

Achanandhi-M merged commit 7bb233c into keploy:main Sep 18, 2025
4 of 6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Footer alignment for ‘Questions?’ section in docs website #667

Footer alignment for ‘Questions?’ section in docs website #667

Uh oh!

kartikeyg0104 commented Sep 15, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 15, 2025

Uh oh!

Copilot AI Sep 15, 2025

Uh oh!

Achanandhi-M left a comment

Uh oh!

kartikeyg0104 commented Sep 16, 2025

Uh oh!

kartikeyg0104 commented Sep 16, 2025

Uh oh!

Achanandhi-M left a comment

Uh oh!

Uh oh!

Uh oh!

	className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 shadow-md -ml-2"
	className="mb-8 mt-12 flex max-w-7xl items-center space-x-6 rounded-lg bg-[color:var(--ifm-card-background-color)] p-4 shadow-md"

Footer alignment for ‘Questions?’ section in docs website #667

Footer alignment for ‘Questions?’ section in docs website #667

Uh oh!

Conversation

kartikeyg0104 commented Sep 15, 2025

What has changed?

Type of change

Screenshots

How Has This Been Tested?

Checklist:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 15, 2025

Choose a reason for hiding this comment

Uh oh!

Achanandhi-M left a comment

Choose a reason for hiding this comment

Uh oh!

kartikeyg0104 commented Sep 16, 2025

Uh oh!

kartikeyg0104 commented Sep 16, 2025

Uh oh!

Achanandhi-M left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!