@jjlmoya/utils-diy 1.18.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-diy",
-    "version": "1.18.0",
+    "version": "1.19.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/tool/epoxyCalculator/epoxy-resin-calculator.css

@@ -1,14 +1,23 @@
   .ec-root {
+    box-sizing: border-box;
     width: 100%;
     max-width: 72rem;
     margin: 0 auto;
+    container-type: inline-size;
     overflow-x: clip;
   }
 
+  .ec-root *,
+  .ec-root *::before,
+  .ec-root *::after {
+    box-sizing: border-box;
+  }
+
   .ec-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
+    min-width: 0;
   }
 
   @media (min-width: 1024px) {
@@ -18,6 +27,7 @@
   }
 
   .ec-panel-left {
+    min-width: 0;
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.4);
@@ -36,6 +46,7 @@
     padding: 0.375rem;
     border-radius: 1rem;
     max-width: 100%;
+    min-width: 0;
   }
 
   .ec-tab-btn {
@@ -682,3 +693,56 @@
       min-height: 3.15rem;
     }
   }
+
+  @container (max-width: 720px) {
+    .ec-grid {
+      gap: 1rem;
+    }
+
+    .ec-panel-left,
+    .ec-result-inner,
+    .ec-viz-card {
+      min-width: 0;
+      padding: 0.875rem;
+      border-radius: 1rem;
+    }
+
+    .ec-tabs {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 0.25rem;
+      overflow: hidden;
+    }
+
+    .ec-tab-btn {
+      min-width: 0;
+      padding: 0.55rem 0.35rem;
+      font-size: 0.75rem;
+      line-height: 1.15;
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
+    .ec-tab-icon {
+      flex-shrink: 0;
+      font-size: 1rem;
+    }
+
+    .ec-inputs-grid,
+    .ec-custom-grid,
+    .ec-parts-grid {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 1rem;
+    }
+
+    .ec-waste-row {
+      gap: 1rem;
+      align-items: flex-start;
+      padding: 0.875rem;
+      overflow: hidden;
+    }
+
+    .ec-waste-info {
+      align-items: flex-start;
+    }
+  }

package/src/tool/passepartoutCalculator/passepartout-calculator.css

@@ -1,7 +1,9 @@
   .pp-root {
+    box-sizing: border-box;
     width: 100%;
     max-width: 1100px;
     margin: 0 auto;
+    container-type: inline-size;
     background: #fff;
     border: 1px solid #e2e8f0;
     border-radius: 1.5rem;
@@ -9,6 +11,12 @@
     overflow: hidden;
   }
 
+  .pp-root *,
+  .pp-root *::before,
+  .pp-root *::after {
+    box-sizing: border-box;
+  }
+
   .theme-dark .pp-root {
     background: #1e1e2e;
     border-color: #2d2d3f;
@@ -18,6 +26,7 @@
   .pp-grid {
     display: grid;
     grid-template-columns: 1fr;
+    min-width: 0;
   }
 
   @media (min-width: 1024px) {
@@ -27,6 +36,7 @@
   }
 
   .pp-inputs {
+    min-width: 0;
     padding: 2rem;
     background: #f8fafc;
     display: flex;
@@ -624,3 +634,70 @@
       width: min(100%, 70vw);
     }
   }
+
+  @container (max-width: 720px) {
+    .pp-root {
+      border-radius: 0.875rem;
+    }
+
+    .pp-inputs {
+      padding: 1rem;
+      gap: 1.25rem;
+      border-right: 0;
+      border-bottom: 1px solid #e2e8f0;
+    }
+
+    .theme-dark .pp-inputs {
+      border-bottom-color: #2d2d3f;
+    }
+
+    .pp-row {
+      grid-template-columns: minmax(0, 1fr);
+      gap: 0.75rem;
+    }
+
+    .pp-toggle-label {
+      align-items: flex-start;
+    }
+
+    .pp-preview {
+      min-height: 360px;
+      padding: 3.25rem 1rem;
+      overflow: hidden;
+    }
+
+    .pp-frame-wrapper {
+      width: min(100%, 76%);
+      max-height: 320px;
+    }
+
+    .pp-border-left {
+      left: 0.35rem;
+      align-items: flex-start;
+      padding-right: 0;
+      transform: translateY(-50%);
+    }
+
+    .pp-border-right {
+      right: 0.35rem;
+      align-items: flex-end;
+      padding-left: 0;
+      transform: translateY(-50%);
+    }
+
+    .pp-border-val {
+      font-size: 0.95rem;
+    }
+
+    .pp-border-tag,
+    .pp-border-unit {
+      font-size: 0.55rem;
+    }
+
+    .pp-border-tag {
+      letter-spacing: 0.04em;
+      max-width: 2.75rem;
+      overflow-wrap: anywhere;
+      text-align: inherit;
+    }
+  }

package/src/tool/stairCalculator/stair-calculator.css

@@ -22,6 +22,7 @@
   }
 
   .sc-root {
+    box-sizing: border-box;
     width: 100%;
     max-width: 1100px;
     margin: 1.5rem auto;
@@ -31,7 +32,15 @@
     overflow-x: clip;
   }
 
+  .sc-root *,
+  .sc-root *::before,
+  .sc-root *::after {
+    box-sizing: border-box;
+  }
+
   .sc-card {
+    width: 100%;
+    max-width: 100%;
     background: var(--sc-bg);
     border-radius: 2rem;
     overflow: hidden;