fix: footer mobile layout alignment and FAB overlap

[Varshinigurram]

Description

This PR resolves multiple footer responsiveness and layout issues observed on smaller screen sizes (approximately 428px width).

Problem

On mobile devices, the footer experienced several UI inconsistencies:

• Quick Links were not properly aligned, with items such as AI Assistant appearing visually inconsistent.
• Social media icons stacked vertically instead of maintaining a clean horizontal layout.
• Excessive spacing and alignment issues reduced overall visual consistency.
• Floating Action Buttons (Scroll-to-Top and Chat Assistant) overlapped footer content, affecting readability and accessibility.

These issues originated from broad mobile CSS rules in responsive.css that unintentionally affected footer flex containers and button elements.

Solution

To address these issues, the footer styling was scoped and optimized specifically for mobile responsiveness.

Implemented changes include:

• Added dedicated footer-specific CSS classes in Footer.jsx.
• Introduced mobile-specific footer overrides within responsive.css.
• Prevented footer navigation buttons from inheriting global mobile button styling.
• Added sufficient bottom spacing to prevent overlap with floating action buttons.
• Fine-tuned floating action button positioning and sizing for smaller screens.

Files Modified

• frontend/nyaysetu-frontend/src/components/landing/Footer.jsx
• frontend/nyaysetu-frontend/src/styles/responsive.css
• frontend/nyaysetu-frontend/src/styles/global.css

Closes #999

---

Screenshots

Before

After

---

Verification

The changes were verified across mobile and desktop layouts to ensure:

• Footer navigation links remain consistently aligned.
• Social media icons display correctly in a horizontal layout on mobile devices.
• Footer content remains fully visible without obstruction from floating action buttons.
• Footer appearance remains consistent across landing and informational pages.
• Desktop layouts remain unaffected by the responsive adjustments.

---

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

---

Checklist

• My code follows the project's coding standards.
• I have self-reviewed my changes.
• The changes are scoped and do not introduce unintended side effects.
• No new warnings or errors were introduced.
• Existing functionality remains unaffected.
• The responsive layout has been verified on relevant screen sizes.

[vercel]

@Varshinigurram is attempting to deploy a commit to the CodeBlooded's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Hi @Varshinigurram, thanks for contributing to Nyay Setu! 🎉

I have automatically:

• 👤 Assigned this PR to you.
• 🏷️ Applied the gssoc:approved label.

Our workflows will now analyze your changes to classify:

• 📈 PR Difficulty: level:*
• 🧩 PR Type: type:*
• 🌟 PR Quality: quality:*

Tip

Ensure your PR description references the issue it resolves (e.g. Closes #123). This allows the bot to inherit any additional labels from that issue!

Happy coding! 🚀