fix(ui,stage-web): mobile range not draggable

apps/stage-web/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <title>AIRI</title>
     <meta name="description" content="Open source attempt to create cyber companion">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <meta name="theme-color" content="rgb(18,18,18)" id="themeColor" />

apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue

@@ -116,7 +116,7 @@ onMounted(() => {
       </Transition>
     </KeepAlive>
     <div relative w-full self-end>
-      <div fixed top="50%" translate-y="[-50%]" px-2>
+      <div top="50%" translate-y="[-50%]" fixed z-15 px-2>
         <ViewControlInputs ref="viewControlsInputs" :mode="viewControlsActiveMode" />
       </div>
       <div translate-y="[-100%]" absolute right-0 w-full px-2 pb-2 font-sans>

apps/stage-web/src/styles/main.css

@@ -7,6 +7,16 @@
   --bg-color: var(--bg-color-light);
 }
 
+/**
+  Disable double-tap "zoom" option in browser on touch devices
+
+  https://stackoverflow.com/a/54207844
+  https://stackoverflow.com/questions/10614481/disable-double-tap-zoom-option-in-browser-on-touch-devices
+ */
+* {
+  touch-action: manipulation;
+}
+
 html,
 body,
 #app {

packages/ui/src/components/Form/Range/RoundRange.vue

@@ -74,11 +74,11 @@ https://toughengineer.github.io/demo/slider-styler*/
   transition: background-color 0.2s ease;
 
   --thumb-width: var(--height);
-  --thumb-height: 0px;
+  --thumb-height: var(--height);
   --thumb-box-shadow: none;
   --thumb-border: none;
   --thumb-border-radius: 0px;
-  --thumb-background: rgb(255, 255, 255);
+  --thumb-background: transparent;
 
   --track-height: calc(var(--height) - var(--track-value-padding) * 2);
   --track-box-shadow: 0 0 12px -2px rgb(0 0 0 / 22%);