From c52d3e49d41e8165ba58e91ac8e19a4ca4e1d2e7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 1 Feb 2023 08:32:10 +0000
Subject: [PATCH] Update deploy navigation component to work without data-cy

---
 .../components/deploy/DeployNavigation.svelte | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)
diff --git a/packages/builder/src/components/deploy/DeployNavigation.svelte b/packages/builder/src/components/deploy/DeployNavigation.svelte
index 41148a11fc..d3a428fed2 100644
--- a/packages/builder/src/components/deploy/DeployNavigation.svelte
+++ b/packages/builder/src/components/deploy/DeployNavigation.svelte
@@ -125,33 +125,36 @@
         align="right"
         disabled={!isPublished}
         anchor={publishPopoverAnchor}
+        offset={10}
       >
-        <Layout gap="M">
-          <Heading size="XS">Your published app</Heading>
-          <Body size="S">
-            <span class="publish-popover-message">
-              {processStringSync(
-                "Last published {{ duration time 'millisecond' }} ago",
-                {
-                  time:
-                    new Date().getTime() -
-                    new Date(latestDeployments[0].updatedAt).getTime(),
-                }
-              )}
-            </span>
-          </Body>
-          <div class="publish-popover-actions">
-            <Button
-              warning={true}
-              icon="GlobeStrike"
-              disabled={!isPublished}
-              on:click={unpublishApp}
-            >
-              Unpublish
-            </Button>
-            <Button cta on:click={viewApp}>View app</Button>
-          </div>
-        </Layout>
+        <div class="popover-content">
+          <Layout noPadding gap="M">
+            <Heading size="XS">Your published app</Heading>
+            <Body size="S">
+              <span class="publish-popover-message">
+                {processStringSync(
+                  "Last published {{ duration time 'millisecond' }} ago",
+                  {
+                    time:
+                      new Date().getTime() -
+                      new Date(latestDeployments[0].updatedAt).getTime(),
+                  }
+                )}
+              </span>
+            </Body>
+            <div class="buttons">
+              <Button
+                warning={true}
+                icon="GlobeStrike"
+                disabled={!isPublished}
+                on:click={unpublishApp}
+              >
+                Unpublish
+              </Button>
+              <Button cta on:click={viewApp}>View app</Button>
+            </div>
+          </Layout>
+        </div>
       </Popover>
     </div>
   {/if}
@@ -180,6 +183,9 @@
 </div>
 
 <style>
+  .popover-content {
+    padding: var(--spacing-xl);
+  }
   .buttons {
     display: flex;
     flex-direction: row;
