small ui improvements (#2196)

* ui: add slight gap in keyCombo display

* ui: show ellipsis when selected dropdown option is to long

apps/client/src/common/components/select/Select.module.scss

@@ -15,6 +15,14 @@
 
   padding-inline: 0.5rem;
   white-space: nowrap;
+}
+
+.valueText {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &:hover:not([data-disabled]) {
     background-color: $gray-1100;

apps/client/src/common/components/select/Select.tsx

@@ -22,7 +22,9 @@ export default function Select<T>({ options, fluid, size = 'medium', ...selectRo
   return (
     <BaseSelect.Root items={options} {...selectRootProps}>
       <BaseSelect.Trigger className={cx([styles.select, styles[size], fluid && styles.fluid])}>
-        <BaseSelect.Value />
+        <span className={styles.valueText}>
+          <BaseSelect.Value />
+        </span>
         <BaseSelect.Icon className={styles.selectIcon}>
           <LuChevronsUpDown />
         </BaseSelect.Icon>

apps/client/src/features/rundown/entry-editor/EventEditorEmpty.module.scss

@@ -64,7 +64,7 @@
   display: inline-flex;
   align-items: center;
   flex-wrap: nowrap;
-  gap: 0.25rem 0;
+  gap: 0.25rem 0.125rem;
 }
 
 .separator {