updates sample-zone

packages/app/studio/src/ui/devices/ScriptDeviceEditor.sass

@@ -28,50 +28,37 @@ component
       color: orange
       cursor: default
 
-  div.sample-drop
+  .sample-drop
+    margin-top: 1px
+    scale: 0.8
     border-radius: 50%
     color: var(--color-shadow)
     display: flex
-    flex-direction: column
     align-items: center
     justify-content: center
     outline: 1px dashed rgba(white, 0.1)
-    margin: 0.5em
-    position: relative
+    aspect-ratio: 1
     cursor: pointer
     pointer-events: all
 
     > svg
-      width: 1em
-      height: 1em
-      pointer-events: none
-
-    > span
-      text-align: center
-      width: 75%
-      overflow: hidden
-      text-overflow: ellipsis
-      font-size: 0.5em
+      width: 1.5em
+      height: 1.5em
       pointer-events: none
 
     &[sample]
       color: var(--color-blue)
-
-      &:after
-        content: attr(sample)
-        font-size: 0.5em
-        white-space: nowrap
-        text-overflow: ellipsis
-        overflow: hidden
-        position: absolute
-        bottom: -1em
-        width: 100%
-        text-align: center
-        padding: 1px 2px
-        border-radius: 3px
-        color: black
-        background-color: var(--color-blue)
+      outline-color: var(--color-blue)
 
     &.accept
       color: var(--color-black)
-      background-color: var(--color-blue)
+      background-color: var(--color-blue)
+
+  .sample-name
+    width: 100%
+    font-size: 0.5em
+    text-align: center
+    white-space: nowrap
+    text-overflow: ellipsis
+    overflow: hidden
+    color: var(--color-gray)

packages/app/studio/src/ui/devices/ScriptDeviceEditor.tsx

@@ -192,10 +192,10 @@ export const ScriptDeviceEditor = ({lifecycle, service, adapter, deviceHost, con
                 const sample = asInstanceOf(sampleBox, WerkstattSampleBox)
                 const label = sample.label.getValue()
                 const terminator = new Terminator()
+                const fileNameLabel: HTMLSpanElement = (<span className="sample-name"/>)
                 const dropZone: HTMLElement = (
                     <div className="sample-drop">
                         <Icon symbol={IconSymbol.Waveform}/>
-                        <span>{label}</span>
                     </div>
                 )
                 const sampleSelector = new SampleSelector(service, {
@@ -211,18 +211,31 @@ export const ScriptDeviceEditor = ({lifecycle, service, adapter, deviceHost, con
                 })
                 terminator.ownAll(
                     sample.file.catchupAndSubscribe(pointer => pointer.targetVertex.match({
-                        none: () => dropZone.removeAttribute("sample"),
-                        some: ({box: fileBox}) =>
-                            dropZone.setAttribute("sample", asInstanceOf(fileBox, AudioFileBox).fileName.getValue())
+                        none: () => {
+                            dropZone.removeAttribute("sample")
+                            fileNameLabel.textContent = ""
+                        },
+                        some: ({box: fileBox}) => {
+                            const name = asInstanceOf(fileBox, AudioFileBox).fileName.getValue()
+                            dropZone.setAttribute("sample", name)
+                            fileNameLabel.textContent = name
+                        }
                     })),
                     sampleSelector.configureBrowseClick(dropZone),
                     sampleSelector.configureContextMenu(dropZone),
                     sampleSelector.configureDrop(dropZone)
                 )
-                dropZone.style.order = String(sample.index.getValue())
+                const element: HTMLElement = (
+                    <Column ems={LKR} color={Colors.cream}>
+                        <h5>{label}</h5>
+                        {dropZone}
+                        {fileNameLabel}
+                    </Column>
+                )
+                element.style.order = String(sample.index.getValue())
                 terminator.own(sample.index.catchupAndSubscribe(owner =>
-                    dropZone.style.order = String(owner.getValue())))
-                controls.appendChild(dropZone)
+                    element.style.order = String(owner.getValue())))
+                controls.appendChild(element)
                 set.add({uuid: sampleBox.address.uuid, lifecycle: terminator})
                 terminator.own({terminate: () => dropZone.remove()})
             },