fix: ensure last device and footer are visible in stacked preview mode on macOS (Fixes #1022)fix: ensure last device and footer are visible in stacked preview mode on macOS (Fixes #1022)fix: ensure last device and footer are visible in stacked preview mod…

[DHANUSHRAJA22]

🐛 Bug Description

In the Responsively App on macOS, when using the stacked preview mode (vertical device layout), the last device and footer elements are being cut off and not visible. This occurs because the flex containers don't properly handle scrolling in the stacked/column layout, causing content to extend beyond the viewport without scrollable access.

🔧 CSS Fix Applied

This pull request implements targeted CSS fixes to ensure proper scrolling behavior in stacked preview mode:

Changes Made:

1. Fixed flex container overflow: Added overflow-y: auto and min-height: 100% to .flex.flex-col .flex.flex-grow.overflow-hidden to enable proper vertical scrolling
2. Enhanced device container scrolling: Updated .flex.flex-col .w-full.flex-grow.overflow-y-auto with height: 100% to ensure the devices container has proper dimensions
3. Improved stacked layout handling: Added fixes for .flex.flex-col .flex.h-full.gap-4.overflow-auto.p-4.flex-wrap to handle flex-wrap scenarios properly
4. Added responsive height management: Included media query for prefers-reduced-motion to ensure proper minimum height for the main container

📋 Before/After Explanation

Before (Issue):

• In stacked preview mode, devices were arranged vertically but the container didn't scroll
• Last devices and footer were cut off and inaccessible to users
• Users had to resize the window or switch layout modes to access hidden content
• Poor user experience when testing multiple device sizes simultaneously

After (Fixed):

• Proper vertical scrolling is enabled for the stacked layout
• All devices and footer are now accessible via scrolling
• Maintains the visual integrity of the stacked layout
• Seamless user experience across all device combinations

🧪 Testing

Tested on macOS with multiple device configurations in stacked preview mode to ensure:

• All devices remain visible and accessible
• Scrolling behavior works smoothly
• Footer is always reachable
• No regression in other layout modes

Fixes #1022…e on macOS (#1022)Update App.css

✨ Pull Request

📓 Referenced Issue

ℹ️ About the PR

🖼️ Testing Scenarios / Screenshots

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}