Made website responsive

[singhcoder694]

Description

1.) Navbar was overflowing due to it's structure. 2.) Footer had for thing completed,not started yet etc. which was not responsive for small screens. 3.) Forms had many things overlapping to each other so improved each form.

Fixes #3

Type of change

Please delete options that are not relevant.

• [x] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

How Has This Been Tested?

I have tested on Chrome browser using all kind of displays available to check responsiveness.

ScreenShots

Checklist:

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [x] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes
• [x] Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• New Features

  • Enhanced layout and spacing across various generator components for a more visually appealing interface.
  • Introduced responsive design elements to improve user experience on different screen sizes.

• Style

  • Updated styles for tooltips and grid items to ensure consistency and better readability.
  • Added new CSS classes to manage the visibility and arrangement of navigation elements.

• Bug Fixes

  • Corrected grid item sizes for a more uniform and structured layout across components.

• Documentation

  • No visible changes to end-users.

• Refactor

  • No visible changes to end-users.

• Tests

  • No visible changes to end-users.

• Chores

  • No visible changes to end-users.

• Revert

  • No visible changes to end-users.

[coderabbitai[bot]]

Walkthrough

The recent updates focus on enhancing the application's responsiveness across various devices and screen sizes. The modifications involve adjusting grid layouts, resizing components, and implementing responsive design features such as media queries and flexible images. These changes aim to improve user experience by ensuring the application adapts seamlessly to the display capabilities of desktops, tablets, and mobile phones.

Changes

File Path	Change Summary
.../array/arrayGenerator.js .../graph/graphGenerator.js .../integer/integerGenerator.js .../linkedList/linkedListGenerator.js .../matrixGenerator.js .../palindrome/palindromeGenerator.js .../string/stringGenerator.js	Adjusted grid item sizes and styles for better responsiveness.
.../style/index.js	Updated styling logic for cards, grids, and form controls.
pages/index.js	Implemented responsive navigation elements and state management for display.
styles/Home.module.css	Added responsive styles and media queries for various screen sizes.

Assessment against linked issues

Objective	Addressed	Explanation
Make application responsive for various devices and screen sizes (#3)	✅	The changes to grid item sizes, styles, and the introduction of media queries directly address the need for responsive design.

Poem

In the web's woven tapestry, 🌐🐇
A rabbit tweaked the threads with glee,
Now on screens both big and small,
The app dances, fitting all. 🎉

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on X ?

---

Tips

### Chat with CodeRabbit Bot (`@coderabbitai`) - You can reply to a review comment made by CodeRabbit. - You can tag CodeRabbit on specific lines of code or files in the PR by tagging `@coderabbitai` in a comment. - You can tag `@coderabbitai` in a PR comment and ask one-off questions about the PR and the codebase. Use quoted replies to pass the context for follow-up questions. ### CodeRabbit Commands (invoked as PR comments) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json`