Fix style and alignment of various frontend design and settings components

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 {

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;

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>