fix: product visuals and footer layout on mobile viewport

[AbhiVarde]

What does this PR do?

Problem

The assets page had two layout issues on mobile viewports:

• Product visuals displayed in 2 columns, making buttons hard to tap
• Footer lacked horizontal padding, causing content to appear cut off

Solution

Product visuals: Changed grid from grid-cols-2 to grid-cols-1 sm:grid-cols-2 for responsive layout.

Footer: Wrapped footer components in a div and added padding via CSS media query to match other pages.

Changes Made

File: src/routes/assets/+page.svelte

1. Line 293: Updated product visuals grid

   <!-- Before -->
   <div class="mt-5 grid grid-cols-2 gap-8">
   
   <!-- After -->
   <div class="mt-5 grid grid-cols-1 gap-8 sm:grid-cols-2">

2. Line 426: Wrapped footer in div with class

   <!-- Before -->
   <FooterNav />
   <MainFooter />
   
   <!-- After -->
   <div class="footer-wrapper">
       <FooterNav />
       <MainFooter />
   </div>

3. Styles: Added footer padding for mobile

   @media (max-width: 768px) {
       .container {
           padding-left: 0;
           padding-right: 0;
       }
   
       header,
       main,
       .footer-wrapper {
           padding-left: var(--spacing-5, 1.25rem);
           padding-right: var(--spacing-5, 1.25rem);
       }
   }

Test Plan

• ✅ Mobile simulation and iPhone 15 (physical device)
• ✅ Tablet and desktop viewports
• ✅ Footer padding, buttons, and layout consistency

Screenshots

Product Visuals (Before ):

Product Visuals (After ):

Footer (Before ):

Footer (After ):

Related PRs and Issues

Fixes #2580

Have you read the Contributing Guidelines on issues?

Yes, I have read and followed the contributing guidelines.

Summary by CodeRabbit

• Style
  • Updated product grid layout to single-column display with responsive two-column on small screens.
  • Adjusted footer spacing for improved layout consistency across different screen sizes.

[coderabbitai]

Walkthrough

This change modifies the layout of a single Svelte page component. The product visuals grid was reconfigured to display as single-column on all viewports, with responsive two-column layout on small screens. Additionally, the footer elements (FooterNav and MainFooter) were grouped within a new wrapper div. The styling was updated to include responsive padding for the new footer wrapper element within the media query rules.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Area of attention: Verify responsive grid behavior across viewports (desktop, tablet, mobile) to ensure the grid-cols-1 and sm:grid-cols-2 classes produce the intended layout
• Area of attention: Confirm the footer wrapper div does not introduce layout shifts or unintended styling side effects
• Area of attention: Validate that the padding rule applied to .footer-wrapper aligns correctly with the main content area at narrow widths

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main changes: fixing product visuals grid layout and footer padding for mobile viewports, matching the primary objectives.
Linked Issues check	✅ Passed	All coding requirements from issue #2580 are met: product visuals changed to single-column on mobile with responsive two-column, footer wrapped and given horizontal padding via media query.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to issue #2580: grid layout fix for product visuals and footer padding on mobile viewports in src/routes/assets/+page.svelte.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ce72079 and 0555b53.

📒 Files selected for processing (1)

• src/routes/assets/+page.svelte (3 hunks)

🔇 Additional comments (2)

src/routes/assets/+page.svelte (2)

363-363: LGTM! Mobile-responsive grid correctly implemented.

The change from grid-cols-2 to grid-cols-1 sm:grid-cols-2 properly addresses the mobile layout issue. The grid now displays as single column on narrow viewports (improving button accessibility) and restores two columns at the sm breakpoint (640px+).

---

545-548: Verify PR scope and footer pattern consistency across pages.

The footer-wrapper pattern with media query padding is implemented on the assets page, but verification shows that the company and pricing pages do NOT use a similar footer-wrapper approach. Please clarify:

1. Is this PR intended to update only the assets page, or should the same footer-wrapper pattern be applied to company and pricing pages as mentioned in the PR description?
2. If the pattern should be consistent across pages, the company and pricing pages need the same footer-wrapper and media query padding treatment.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sara-k-48]

@AbhiVarde thanks! :) @HarshMN2345 could you review this?

[AbhiVarde]

Thank you, @sara-k-48 ma’am! 🙏