From 0961812b56fcba42c6b28b8ca1039a9196c64533 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 15:12:48 +0100
Subject: [PATCH] Improve frontend settings and design panel scrolling and
 panel styling

---
 .../userInterface/ComponentPropertiesPanel.svelte          | 3 +++
 .../builder/src/components/userInterface/DesignView.svelte | 7 +++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index b9bcf2fa95..3187d6f9d4 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -127,6 +127,9 @@
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
+    margin-left: -20px;
+    margin-right: -20px;
+    padding: 0 20px;
   }
 
   .instance-name {
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 742d8baa3a..8664fd1f30 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -49,7 +49,7 @@
         {/each}
       {:else}
         <div class="no-design">
-          <span>This component does not have any design properties</span>
+          This component does not have any design properties.
         </div>
       {/if}
     </div>
@@ -78,9 +78,12 @@
     flex: 1;
     overflow-y: auto;
     min-height: 0;
+    margin: 0 -20px;
+    padding: 0 20px;
   }
 
   .no-design {
-    text-align: center;
+    font-size: var(--font-size-s);
+    color: var(--grey-6);
   }
 </style>