@jjlmoya/utils-tabletop 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.15.0",
+    "version": "1.17.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/decision-wheel/decision-wheel.css

@@ -17,6 +17,13 @@
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 
+.wheel-dashboard,
+.wheel-dashboard *,
+.wheel-dashboard *::before,
+.wheel-dashboard *::after {
+  box-sizing: border-box;
+}
+
 .wheel-layout {
   display: grid;
   grid-template-columns: 1.15fr 0.85fr;
@@ -671,10 +678,13 @@
   }
 
   .wheel-dashboard {
+    width: 100%;
     padding: 1rem;
     gap: 1.5rem;
     border-radius: 1rem;
     min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
   }
 
   .wheel-layout,
@@ -688,16 +698,34 @@
 
   .canvas-card,
   .tab-container {
-    padding: 1rem;
+    width: 100%;
+    max-width: 100%;
+    padding: 0.75rem;
     border-radius: 1rem;
+    overflow: hidden;
+  }
+
+  .wheel-canvas-section {
+    align-items: stretch;
+    gap: 1rem;
+  }
+
+  .wheel-canvas-container {
+    width: 100%;
+    max-width: 100%;
   }
 
   .wheel-canvas {
-    width: min(320px, calc(100vw - 6rem));
-    height: min(320px, calc(100vw - 6rem));
+    width: min(220px, 100%);
+    height: auto;
+    aspect-ratio: 1;
+    margin: 0 auto;
   }
 
   .spin-button {
+    align-self: stretch;
+    width: 100%;
+    max-width: 100%;
     min-height: 3.5rem;
     height: auto;
     padding: 0.85rem;
@@ -705,6 +733,18 @@
     white-space: normal;
   }
 
+  .mute-btn {
+    top: 0.75rem;
+    right: 0.75rem;
+    width: 2.35rem;
+    height: 2.35rem;
+  }
+
+  .result-placeholder {
+    padding: 0.75rem 0.5rem;
+    font-size: 0.85rem;
+  }
+
   .tab-headers,
   .preset-group {
     flex-wrap: wrap;