OSC updates and video resolution fixes

ui/src/components/LayerStack.jsx

@@ -1,5 +1,6 @@
 import { postJson } from "../api/controlApi";
 import { LayerCard } from "./LayerCard";
+import { ShaderPicker } from "./ShaderPicker";
 
 function moveItem(array, fromIndex, toIndex) {
   if (fromIndex < 0 || fromIndex >= array.length || toIndex < 0 || toIndex >= array.length) {
@@ -131,18 +132,12 @@ export function LayerStack({
           </div>
           <div className="layer-card__body">
             <div className="layer-card__field">
-              <label htmlFor="add-layer-select">Shader</label>
-              <select
-                id="add-layer-select"
+              <ShaderPicker
+                id="add-layer"
+                shaders={shaders}
                 value={pendingShaderId}
-                onChange={(event) => setPendingShaderId(event.target.value)}
-              >
-                {shaders.map((shader) => (
-                  <option key={shader.id} value={shader.id}>
-                    {shader.name}
-                  </option>
-                ))}
-              </select>
+                onChange={setPendingShaderId}
+              />
             </div>
           </div>
         </div>