From 46f3ec8c46aa0ea5ad4669e8519e9475143c4ff7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 11 Jul 2022 20:16:22 +0100
Subject: [PATCH] Improve automation test display layout and spacing

---
 .../AutomationBuilder/TestDisplay.svelte      | 32 ++++++++-----------
 .../overview/[application]/index.svelte       |  2 +-
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte b/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
index a2eb904c94..c6585b0bce 100644
--- a/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
+++ b/packages/builder/src/components/automation/AutomationBuilder/TestDisplay.svelte
@@ -67,27 +67,20 @@
           {/if}
 
           <div class="tabs">
-            <Tabs quiet noPadding selected="Input">
+            <Tabs noHorizPadding selected="Input">
               <Tab title="Input">
-                <div style="padding: 10px 10px 10px 10px;">
-                  <TextArea
-                    minHeight="80px"
-                    disabled
-                    value={textArea(filteredResults?.[idx]?.inputs, "No input")}
-                  />
-                </div></Tab
-              >
+                <TextArea
+                  minHeight="80px"
+                  disabled
+                  value={textArea(filteredResults?.[idx]?.inputs, "No input")}
+                />
+              </Tab>
               <Tab title="Output">
-                <div style="padding: 10px 10px 10px 10px;">
-                  <TextArea
-                    minHeight="100px"
-                    disabled
-                    value={textArea(
-                      filteredResults?.[idx]?.outputs,
-                      "No output"
-                    )}
-                  />
-                </div>
+                <TextArea
+                  minHeight="100px"
+                  disabled
+                  value={textArea(filteredResults?.[idx]?.outputs, "No output")}
+                />
               </Tab>
             </Tabs>
           </div>
@@ -113,6 +106,7 @@
     align-items: stretch;
     position: relative;
     flex: 1 1 auto;
+    padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
   }
 
   .block {
diff --git a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
index 5ff22f11c6..293f19ebe4 100644
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@@ -395,7 +395,7 @@
     line-height: 1em;
     margin-bottom: var(--spacing-s);
   }
-  .tab-wrap :global(.spectrum-Tabs) {
+  .tab-wrap :global(> .spectrum-Tabs) {
     padding-left: var(--spectrum-alias-grid-gutter-large);
     padding-right: var(--spectrum-alias-grid-gutter-large);
   }