From 1f7ddbfa656af79a7483e7fcf451de4f1d737151 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 15:14:34 +0100
Subject: [PATCH] Fix style and alignment of various frontend design and
 settings components

---
 .../userInterface/OptionSelect.svelte         |  3 ++-
 .../userInterface/PropertyControl.svelte      |  7 +++---
 .../userInterface/ScreenSelect.svelte         | 25 ++++++++++++++-----
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index 5cb92a0e2c..aac5c44c07 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -164,10 +164,10 @@
 
   .bb-select-container {
     outline: none;
-    width: 160px;
     height: 36px;
     cursor: pointer;
     font-size: 14px;
+    overflow: hidden;
   }
 
   .bb-select-anchor {
@@ -237,6 +237,7 @@
     padding: 5px 0px;
     cursor: pointer;
     padding-left: 10px;
+    font-size: var(--font-size-s);
   }
 
   li:hover {
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 59cdbd868b..c20ab0f4bf 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -118,8 +118,7 @@
     position: relative;
     display: flex;
     flex-flow: row;
-    min-width: 260px;
-    margin: 8px 0px;
+    margin: 8px 0;
     align-items: center;
   }
 
@@ -128,7 +127,7 @@
     align-items: center;
     font-size: 12px;
     font-weight: 400;
-    width: 100px;
+    flex: 0 0 100px;
     text-align: left;
     color: var(--ink);
     margin-right: auto;
@@ -139,7 +138,7 @@
     flex: 1;
     display: flex;
     padding-left: 2px;
-    max-width: 164px;
+    overflow: hidden;
   }
   button {
     position: absolute;
diff --git a/packages/builder/src/components/userInterface/ScreenSelect.svelte b/packages/builder/src/components/userInterface/ScreenSelect.svelte
index 412f0719fc..b31c81d4c5 100644
--- a/packages/builder/src/components/userInterface/ScreenSelect.svelte
+++ b/packages/builder/src/components/userInterface/ScreenSelect.svelte
@@ -10,9 +10,22 @@
   const handleBlur = () => dispatch("change", value)
 </script>
 
-<DataList editable secondary on:blur={handleBlur} on:change bind:value>
-  <option value="" />
-  {#each $store.allScreens as screen}
-    <option value={screen.route}>{screen.props._instanceName}</option>
-  {/each}
-</DataList>
+<div>
+  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+    <option value="" />
+    {#each $store.allScreens as screen}
+      <option value={screen.route}>{screen.props._instanceName}</option>
+    {/each}
+  </DataList>
+</div>
+
+<style>
+  div {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: row;
+  }
+  div :global(> div) {
+    flex: 1 1 auto;
+  }
+</style>