From cf02e88885f92f480a20ced243e1a83c041cc38e Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Dec 2022 15:13:12 +0000
Subject: [PATCH] Fix issue with extremely long select values!

---
 packages/bbui/src/Form/Core/Picker.svelte                  | 3 +++
 .../design/[screenId]/_components/AppPanel.svelte          | 7 +++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/bbui/src/Form/Core/Picker.svelte b/packages/bbui/src/Form/Core/Picker.svelte
index 16d13ef2cc..97bd1394b4 100644
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/packages/bbui/src/Form/Core/Picker.svelte
@@ -205,7 +205,10 @@
     width: 100%;
   }
   .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
+    max-width: 400px;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   .spectrum-Picker {
     width: 100%;
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
index c4b80dcc3a..e97e3ee15c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
@@ -61,6 +61,13 @@
     align-items: center;
     gap: var(--spacing-l);
   }
+  .header-left {
+    flex: 1 1 auto;
+    width: 0;
+  }
+  .header-left :global(> *) {
+    max-width: 100%;
+  }
   .header-left :global(.spectrum-Picker) {
     font-weight: 600;
     color: var(--spectrum-global-color-gray-900);