Rename css class to avoid confusion

src/components/media-loader.js

@@ -205,7 +205,7 @@ AFRAME.registerComponent("media-pager", {
       // if this is the first image we ever loaded, set up the UI
       if (this.toolbar == null) {
         const template = document.getElementById("paging-toolbar");
-        this.el.querySelector(".ui").appendChild(document.importNode(template.content, true));
+        this.el.querySelector(".interactable-ui").appendChild(document.importNode(template.content, true));
         this.toolbar = this.el.querySelector(".paging-toolbar");
         // we have to wait a tick for the attach callbacks to get fired for the elements in a template
         setTimeout(() => {

src/hub.html

@@ -151,9 +151,9 @@
                     set-yxz-order
                     pinnable
                 >
-                    <a-entity class="ui">
+                    <a-entity class="interactable-ui">
                         <a-entity class="freeze-menu" visible-while-frozen>
-                            <a-entity mixin="rounded-text-action-button" pin-networked-object-button="labelSelector:.pin-button-label; hideWhenPinnedSelector:.hide-when-pinned; uiSelector:.ui" position="0 0.125 0.01"> </a-entity>
+                            <a-entity mixin="rounded-text-action-button" pin-networked-object-button="labelSelector:.pin-button-label; hideWhenPinnedSelector:.hide-when-pinned; uiSelector:.interactable-ui" position="0 0.125 0.01"> </a-entity>
                             <a-entity class="pin-button-label" text=" value:pin; width:1.75; align:center;" text-raycast-hack position="0 0.125 0.02"></a-entity>
                             <a-entity mixin="rounded-text-button" class="hide-when-pinned" remove-networked-object-button position="0 -0.125 0.01"> </a-entity>
                             <a-entity text=" value:remove; width:1.75; align:center;" class="hide-when-pinned" text-raycast-hack position="0 -0.125 0.02"></a-entity>