From 3f73938e3152eb3005cd15d50fc11d1d5c399735 Mon Sep 17 00:00:00 2001
From: DHANUSH RAJA <155062318+DHANUSHRAJA22@users.noreply.github.com>
Date: Wed, 27 Aug 2025 19:27:16 +0530
Subject: [PATCH] fix: ensure last device and footer are visible in stacked
 preview mode on macOS (#1022)Update App.css

---
 desktop-app/src/renderer/App.css | 33 +++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/desktop-app/src/renderer/App.css b/desktop-app/src/renderer/App.css
index de03d7198..ffdab3a29 100644
--- a/desktop-app/src/renderer/App.css
+++ b/desktop-app/src/renderer/App.css
@@ -2,16 +2,43 @@
  * @NOTE: Prepend a `~` to css file paths that are in your node_modules
  *        See https://github.com/webpack-contrib/sass-loader#imports
  */
-
 @import '~@fontsource/lato/300.css';
 @import '~@fontsource/lato/400.css';
 @import '~@fontsource/lato/400-italic.css';
 @import '~@fontsource/lato/700.css';
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
 html {
   user-select: none;
 }
+
+/* Fix for macOS stacked preview mode - ensure last device and footer are visible */
+/* Target the flex container in stacked/column mode */
+.flex.flex-col .flex.flex-grow.overflow-hidden {
+  flex-direction: column;
+  overflow-y: auto;
+  min-height: 100%;
+}
+
+/* Ensure the devices container has proper scrolling in stacked mode */
+.flex.flex-col .w-full.flex-grow.overflow-y-auto {
+  flex-direction: column;
+  overflow-y: auto;
+  height: 100%;
+}
+
+/* Additional fix for stacked preview layout with flex-wrap */
+.flex.flex-col .flex.h-full.gap-4.overflow-auto.p-4.flex-wrap {
+  flex-direction: column;
+  overflow-y: auto;
+  min-height: 100%;
+  height: auto;
+}
+
+/* Ensure proper height for the main preview container in stacked mode */
+@media (prefers-reduced-motion: no-preference) {
+  .flex.flex-col {
+    min-height: 100vh;
+  }
+}