From 372ac6921f3a22f94248001e9424a460ed8bb645 Mon Sep 17 00:00:00 2001
From: SATYA SB <107645008+satya07sb@users.noreply.github.com>
Date: Wed, 4 Jun 2025 10:29:45 +0530
Subject: [PATCH] fix: Enhance splash screen layout with responsive design for
 stack elements (#2159)

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>
---
 src/Explorer/SplashScreen/SplashScreen.less | 15 +++++++++++++++
 src/Explorer/SplashScreen/SplashScreen.tsx  | 10 +++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/Explorer/SplashScreen/SplashScreen.less b/src/Explorer/SplashScreen/SplashScreen.less
index a8aa3b58d..d146c4fd6 100644
--- a/src/Explorer/SplashScreen/SplashScreen.less
+++ b/src/Explorer/SplashScreen/SplashScreen.less
@@ -30,6 +30,21 @@
       margin: 0px auto;
       text-align: center;
     }
+    .splashStackContainer {
+      .splashStackRow {
+        display: flex;
+        gap: 0 16px;
+
+        @media (max-width: 768px) {
+          flex-direction: column;
+          gap: 16px 0;
+        }
+      }
+
+      @media (max-width: 768px) {
+        width: 85% !important;
+      }
+    }
 
     .mainButtonsContainer {
       .flex-display();
diff --git a/src/Explorer/SplashScreen/SplashScreen.tsx b/src/Explorer/SplashScreen/SplashScreen.tsx
index a922a647a..c0ac6d46c 100644
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -126,8 +126,12 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
       useDatabases.getState().sampleDataResourceTokenCollection
     ) {
       return (
-        <Stack style={{ width: "66%", cursor: "pointer", margin: "40px auto" }} tokens={{ childrenGap: 16 }}>
-          <Stack horizontal tokens={{ childrenGap: 16 }}>
+        <Stack
+          className="splashStackContainer"
+          style={{ width: "66%", cursor: "pointer", margin: "40px auto" }}
+          tokens={{ childrenGap: 16 }}
+        >
+          <Stack className="splashStackRow" horizontal>
             <SplashScreenButton
               imgSrc={QuickStartIcon}
               title={"Launch quick start"}
@@ -147,7 +151,7 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               }}
             />
           </Stack>
-          <Stack horizontal tokens={{ childrenGap: 16 }}>
+          <Stack className="splashStackRow" horizontal>
             {useQueryCopilot.getState().copilotEnabled && (
               <SplashScreenButton
                 imgSrc={CopilotIcon}