multi-select styling fixes

packages/fakeyou.com/src/components/common/TempSelect/TempSelect.scss

@@ -9,8 +9,29 @@
   }
 
   .select__value-container--is-multi {
-    gap: .25rem;
+    height: min-content;
+    // background: red;
+    display: inline-block;
+    white-space: nowrap;
+    overflow-x: scroll;
+    border-radius: .5rem;
+    // flex-wrap: 
+    // gap: .25rem;
     padding: 0;
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+
+  .select__input-container {
+    min-width: 10rem;
+    // background: red;
+    padding: 0 0 0 .5rem;
+    margin: 0;}
   }
 
   [class^="select__multi-value"] {
@@ -18,10 +39,14 @@
   }
 
   .select__multi-value {
+    display: inline-flex;
     border-radius: .5rem;
     overflow: hidden;
     padding: 0 0 0 .125rem;
-    background: $secondary-lighter
+    background: $secondary-lighter;
+    margin-bottom: 0;
+    margin-top: 0;
+    width: fit-content;
   }
 
   .select__multi-value__remove {

packages/fakeyou.com/src/v2/view/pages/dev_upload/DevEntityInput.scss

@@ -0,0 +1,13 @@
+.fy-basic-grid {
+	 header {
+      margin-bottom: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+    }
+    
+	>:not(.fy-input-label) {
+		margin-bottom: 1rem;
+	}
+}

packages/fakeyou.com/src/v2/view/pages/dev_upload/DevMediaInput.tsx

@@ -4,6 +4,7 @@ import { EntityFilterOptions, EntityInputMode, EntityModeProp, ListEntityFilters
 import { useModal, useSession } from "hooks";
 import { InferenceJobsModal } from "components/modals";
 import { Button, SegmentButtons, TempInput, TempSelect } from "components/common";
+import "./DevEntityInput.scss";
 
 interface Props {
   value?: any;
@@ -40,10 +41,10 @@ export default function DevMediaInput({ value }: Props) {
 
   const openModal = () => open({ component: InferenceJobsModal });
 
-  return studioAccessCheck(<div {...{ className: "fy-engine-compositor"}}>
-    <div {...{ className: "panel engine-compositor-container" }}>
+  return studioAccessCheck(<div {...{ className: "fy-engine-compositor p-3"}}>
+    <h2>{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }</h2>
+    <div {...{ className: "panel p-3 fy-basic-grid" }}>
       <header>
-        <h2>{ [526,187].map((num = 0) => String.fromCodePoint(128000 + num)) }</h2>
         <SegmentButtons {...{ onChange: ({ target }: { target: any }) => modeSet(target.value), options, value: mode }}/>
         <TempInput {...{ value: owner, onChange: ({ target }: { target: any }) => ownerSet(target.value), placeholder: "User" }}/>
       </header>
@@ -55,14 +56,14 @@ export default function DevMediaInput({ value }: Props) {
      <EntityInput {...{
         accept: ["bvh","glb","gltf"],
         aspectRatio: "landscape",
-        label: "not now",
+        label: "Choose entity",
         // label: `Choose ${ ["","media file","weight"][entityType] }`,
         onChange,
         owner,
         search: "Dream",
         type: "media"
       }}/>
-      <Button {...{ className: "mt-3", label: "Open modal", onClick: openModal, variant: "primary" }}/>
+      <Button {...{ label: "Open modal", onClick: openModal, variant: "primary" }}/>
      <div>
       { mediaToken }
      </div>