From 01d504b51b16c78a3198962d46853d6bd41f0751 Mon Sep 17 00:00:00 2001
From: JPeer264 <jan.peer@sentry.io>
Date: Tue, 14 Oct 2025 11:44:46 +0200
Subject: [PATCH] fix(ui): adapt NoProjectMessage on mobile to add padding and
 change direction

---
 .../illustrations/NoProjectEmptyState.tsx     |  3 +-
 static/app/components/noProjectMessage.tsx    | 34 +++++++++++++------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/static/app/components/illustrations/NoProjectEmptyState.tsx b/static/app/components/illustrations/NoProjectEmptyState.tsx
index c9d2beffbcb6eb..8f3589423844c5 100644
--- a/static/app/components/illustrations/NoProjectEmptyState.tsx
+++ b/static/app/components/illustrations/NoProjectEmptyState.tsx
@@ -202,7 +202,7 @@ const Smoke = styled('g')`
   )}
 `;
 
-function NoProjectEmptyState() {
+function NoProjectEmptyState({className}: {className?: string}) {
   return (
     <svg
       width="683"
@@ -210,6 +210,7 @@ function NoProjectEmptyState() {
       viewBox="0 0 683 600"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <Background {...backgroundAnimationProps}>
         <path d="M425.89 15.49v118.33h128c.38 0 0-118 0-118l-128-.33z" fill="#E7E1EC" />
diff --git a/static/app/components/noProjectMessage.tsx b/static/app/components/noProjectMessage.tsx
index 913df205e911f2..f0fc189f028eaf 100644
--- a/static/app/components/noProjectMessage.tsx
+++ b/static/app/components/noProjectMessage.tsx
@@ -72,10 +72,24 @@ function NoProjectMessage({
   );
 
   return (
-    <Flex flex="1" align="center" justify="center">
-      <NoProjectEmptyState />
+    <Flex
+      flex="1"
+      align="center"
+      justify="center"
+      gap="3xl"
+      padding="lg"
+      direction={{xs: 'column', sm: 'row'}}
+    >
+      <Flex
+        align="center"
+        justify="center"
+        height="auto"
+        width={{xs: '300px', sm: 'auto'}}
+      >
+        <StyledNoProjectEmptyState />
+      </Flex>
 
-      <Content>
+      <Flex direction="column" justify="center">
         <Layout.Title>{t('Remain Calm')}</Layout.Title>
         <HelpMessage>{t('You need at least one project to use this view')}</HelpMessage>
         <Actions>
@@ -88,22 +102,20 @@ function NoProjectMessage({
             createProjectAction
           )}
         </Actions>
-      </Content>
+      </Flex>
     </Flex>
   );
 }
 
 export default NoProjectMessage;
 
-const HelpMessage = styled('div')`
-  margin-bottom: ${space(2)};
+const StyledNoProjectEmptyState = styled(NoProjectEmptyState)`
+  width: 100%;
+  height: auto;
 `;
 
-const Content = styled('div')`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-left: 40px;
+const HelpMessage = styled('div')`
+  margin-bottom: ${space(2)};
 `;
 
 const Actions = styled(ButtonBar)`