From 63c14c11d62ea6cf9001954c7a8e465f86f3af3d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 12 Oct 2020 15:13:38 +0100
Subject: [PATCH] Improve style of ModelViewSelect and fix text wrapping

---
 .../userInterface/ModelViewSelect.svelte      | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ModelViewSelect.svelte b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
index d0f0c37f3b..25abc5bce9 100644
--- a/packages/builder/src/components/userInterface/ModelViewSelect.svelte
+++ b/packages/builder/src/components/userInterface/ModelViewSelect.svelte
@@ -49,11 +49,12 @@
     }))
 </script>
 
-<div class="dropdownbutton" bind:this={anchorRight}>
-  <Button secondary wide on:click={dropdownRight.show}>
-    <span>{value.label ? value.label : 'Model / View'}</span>
-    <Icon name="arrowdown" />
-  </Button>
+<div
+  class="dropdownbutton"
+  bind:this={anchorRight}
+  on:click={dropdownRight.show}>
+  <span>{value.label ? value.label : 'Model / View'}</span>
+  <Icon name="arrowdown" />
 </div>
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
@@ -100,8 +101,33 @@
 
 <style>
   .dropdownbutton {
-    width: 100%;
+    background-color: var(--grey-2);
+    border: var(--border-transparent);
+    padding: var(--spacing-m);
+    border-radius: var(--border-radius-m);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    overflow: hidden;
+    flex: 1 1 auto;
   }
+  .dropdownbutton:hover {
+    cursor: pointer;
+    background-color: var(--grey-3);
+  }
+  .dropdownbutton span {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    flex: 1 1 auto;
+    text-align: left;
+    font-size: var(--font-size-xs);
+  }
+  .dropdownbutton :global(svg) {
+    margin: -4px 0;
+  }
+
   .dropdown {
     padding: var(--spacing-m) 0;
     z-index: 99999999;