Fix:

- Hand and finger select options is aligned with the main select element even on different screen size;
- Hand and finger select chosen option can reduce and have extra '...' at the end if it's too long;
- Heatmap legend, Finger context and Reset view button align perfectly on mobile;
- Hand and finger select arrow is now 'locked' and cannot be dragged anymore;
- the cursor will be pointing when it passes over hand or finger select.

Author: RIGAT-Pierre-andre-2326090par

_includes/heatmap.html

@@ -24,7 +24,7 @@
     <div class="select active" id="hand-select" role="select">
         <input class="select-checkbox" id="hand-select-checkbox" type="checkbox">
         <!-- the select content, the checkbox allow the switch for the display of the options -->
-        <label for="hand-select-checkbox" style="display: flex; justify-content:  space-between">
+        <label for="hand-select-checkbox">
             <span id="hand-selected">{{ e.total }}</span>
             <img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
         </label>
@@ -40,7 +40,7 @@
     <div class="select" id="finger-select" role="select">
         <input class="select-checkbox" id="finger-select-checkbox" type="checkbox">
         <!-- the select content, the checkbox allow the switch for the display of the options -->
-        <label for="finger-select-checkbox" style="display: flex; justify-content: space-between">
+        <label for="finger-select-checkbox">
             <span id="finger-selected">{{ e.all_button }}</span>
             <img alt="arrow_down" src="/assets/img/arrow_down.png" style="aspect-ratio: 1 / 1; height: 1.6em;">
         </label>

assets/css/heatmap.css

@@ -64,21 +64,40 @@
 }
 
 .select {
+    border: 1px solid #e8e8e8;
+    border-radius: .5em;
+    background-color: white;
     flex-direction: row;
+    width: 15em;
+
+    position: relative;
 
     opacity: 50%;
     pointer-events: none;
 }
 
 label[for='hand-select-checkbox'], label[for='finger-select-checkbox'] {
-    border: 1px solid #e8e8e8;
-    border-radius: .5em;
     padding: .5em;
-    background-color: white;
-    width: 13em;
+    cursor: pointer;
 
     display: flex;
     align-items: center;
+    justify-content:  space-between;
+
+    width: 100%;
+    box-sizing: border-box;
+
+}
+
+label span {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 0;
+}
+
+label img {
+    pointer-events: none;
 }
 
 .select.active {
@@ -95,7 +114,10 @@ label[for='hand-select-checkbox'], label[for='finger-select-checkbox'] {
     transform: translateY(-.5em);
 
     position: absolute;
-    width: 13em;
+    top: 100%;
+    left: -1px;
+    width: 101%;
+    box-sizing: border-box;
     padding: .5em;
     border-left: 1px solid #e8e8e8;
     border-right: 1px solid #e8e8e8;
@@ -106,6 +128,7 @@ label[for='hand-select-checkbox'], label[for='finger-select-checkbox'] {
 
 .select-option {
     margin-top: 0.4em;
+    cursor: pointer;
 }
 
 .select-checkbox ~ .select-options {
@@ -144,7 +167,6 @@ label[for='hand-select-checkbox'], label[for='finger-select-checkbox'] {
 
     padding: 14px 20px;
     pointer-events: none;
-    flex-wrap: wrap;
 }
 
 .heatmap-legend {

assets/js/model-viewer.js

@@ -73,7 +73,7 @@ export class Keycube {
 
         // Autorotation settings (integrated with OrbitControls)
         this.controls.autoRotate = true;
-        this.controls.autoRotateSpeed = 0.5;  // Slower idle rotation
+        this.controls.autoRotateSpeed = 0.5;  // Slower speed rotation
         this.autoRotateStoppedByUser = false;
 
         this.renderer.domElement.addEventListener('touchmove', this.captureViewerGesture, {passive: false});