Skip to content

Conversation

Bhup-GitHUB
Copy link
Contributor

What has changed?

Fixed uneven spacing and padding issues in the Keploy Installation component (InstallReminder.js). The component now has consistent spacing between all elements, making it look neat and properly aligned across the page.

Key Changes:

  • Increased container padding from 1rem to 1.5rem for better visual balance
  • Implemented CSS Flexbox layout with consistent 1rem gaps between all elements
  • Removed individual margins and used flexbox gap for uniform spacing
  • Added alignSelf: "flex-start" to keep the button properly aligned
  • Replaced manual margin calculations with automatic flexbox spacing

This PR Resolves #2985

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

How Has This Been Tested?

Build Test: npm run build - Successfully compiled with no errors related to the InstallReminder component
Development Server: npm start - Component renders correctly with improved spacing
Visual Verification: Confirmed equal spacing between title, description, and button elements
Responsive Design: Tested on different screen sizes - flexbox layout adapts properly

Before vs After:

  • Before: Inconsistent margins (0.5rem, 1rem, 0.5rem) creating uneven visual spacing
  • After: Consistent 1rem gaps between all elements with clean, professional appearance

Checklist:

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

Build

image

Signed-off-by: Bhupesh Kumar <bkumar_be23@thapar.edu>
Signed-off-by: Bhupesh Kumar <bkumar_be23@thapar.edu>
Signed-off-by: Bhupesh Kumar <bkumar_be23@thapar.edu>
Signed-off-by: Bhupesh Kumar <bkumar_be23@thapar.edu>
Copy link
Contributor

@Achanandhi-M Achanandhi-M left a comment

Choose a reason for hiding this comment

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

Hey @Bhup-GitHUB,
I noticed there are quite a lot of changes in this PR. The Installation component doesn’t look good on mobile screens, and I also see modifications in the Quickstart file.

It’s best not to combine different changes in the same PR. Could you please separate them and also add a clear title and description? At the moment, it’s a bit difficult to understand what this PR is about.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants