@jjlmoya/utils-diy 1.17.0 → 1.19.0

package/package.json

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

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

@@ -1,13 +1,23 @@
-.ec-root {
+  .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) {
@@ -17,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);
@@ -34,6 +45,8 @@
     background: rgba(241, 245, 249, 0.5);
     padding: 0.375rem;
     border-radius: 1rem;
+    max-width: 100%;
+    min-width: 0;
   }
 
   .ec-tab-btn {
@@ -52,6 +65,7 @@
     justify-content: center;
     gap: 0.5rem;
     transition: all 0.2s;
+    overflow: hidden;
   }
 
   .ec-tab-btn[data-ec-active="true"] {
@@ -215,6 +229,7 @@
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    min-width: 0;
   }
 
   .ec-waste-icon {
@@ -289,6 +304,7 @@
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
+    min-width: 0;
   }
 
   .ec-result-card {
@@ -572,28 +588,42 @@
   }
 
   @media (max-width: 640px) {
+    .ec-root {
+      max-width: 100%;
+    }
+
     .ec-grid {
       gap: 1rem;
+      min-width: 0;
     }
 
     .ec-panel-left,
     .ec-result-inner,
     .ec-viz-card {
-      padding: 1rem;
+      padding: 0.875rem;
       border-radius: 1rem;
+      min-width: 0;
     }
 
     .ec-tabs {
-      overflow-x: auto;
-      scroll-snap-type: x mandatory;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 0.25rem;
+      overflow: hidden;
     }
 
     .ec-tab-btn {
-      flex: 0 0 auto;
-      min-width: 7.5rem;
-      padding: 0.625rem 0.75rem;
-      scroll-snap-align: start;
-      white-space: nowrap;
+      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,
@@ -610,6 +640,14 @@
 
     .ec-waste-row {
       gap: 1rem;
+      padding: 0.875rem;
+      overflow: hidden;
+    }
+
+    .ec-waste-title,
+    .ec-waste-desc,
+    .ec-custom-check-row span {
+      overflow-wrap: anywhere;
     }
 
     .ec-result-inner {
@@ -647,3 +685,64 @@
       width: 5rem;
     }
   }
+
+  @media (max-width: 380px) {
+    .ec-tab-btn {
+      flex-direction: column;
+      gap: 0.25rem;
+      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;
@@ -564,11 +574,11 @@
 
     .pp-preview {
       min-height: 360px;
-      padding: 3.25rem 2rem;
+      padding: 3.25rem 1rem;
     }
 
     .pp-frame-wrapper {
-      width: min(100%, 74vw);
+      width: min(100%, 76vw);
       max-height: 320px;
     }
 
@@ -577,11 +587,17 @@
     }
 
     .pp-border-left {
-      padding-right: 0.5rem;
+      left: 0.35rem;
+      align-items: flex-start;
+      padding-right: 0;
+      transform: translateY(-50%);
     }
 
     .pp-border-right {
-      padding-left: 0.5rem;
+      right: 0.35rem;
+      align-items: flex-end;
+      padding-left: 0;
+      transform: translateY(-50%);
     }
 
     .pp-border-val {
@@ -590,6 +606,14 @@
 
     .pp-border-tag {
       font-size: 0.55rem;
+      letter-spacing: 0.04em;
+      max-width: 2.75rem;
+      overflow-wrap: anywhere;
+      text-align: inherit;
+    }
+
+    .pp-border-unit {
+      font-size: 0.55rem;
     }
 
     .pp-art-placeholder {
@@ -602,11 +626,78 @@
 
   @media (max-width: 380px) {
     .pp-preview {
-      padding-right: 1.5rem;
-      padding-left: 1.5rem;
+      padding-right: 0.75rem;
+      padding-left: 0.75rem;
     }
 
     .pp-frame-wrapper {
-      width: min(100%, 68vw);
+      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,21 +22,33 @@
   }
 
   .sc-root {
+    box-sizing: border-box;
     width: 100%;
     max-width: 1100px;
     margin: 1.5rem auto;
     padding: 0 1rem;
     color: var(--sc-neutral);
+    container-type: inline-size;
+    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;
     display: grid;
-    grid-template-columns: 350px 1fr;
+    grid-template-columns: minmax(0, 350px) minmax(0, 1fr);
     box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
     border: 1px solid var(--sc-border);
+    min-width: 0;
   }
 
   .sc-sidebar {
@@ -46,6 +58,7 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    min-width: 0;
   }
 
   .sc-section h3 {
@@ -63,6 +76,7 @@
     flex-direction: column;
     gap: 1.5rem;
     background: var(--sc-bg);
+    min-width: 0;
   }
 
   .sc-results-header {
@@ -135,6 +149,7 @@
 
   .sc-input-group {
     margin-bottom: 0.75rem;
+    min-width: 0;
   }
 
   .sc-input-group label {
@@ -211,6 +226,7 @@
 
   .sc-select {
     width: 100%;
+    box-sizing: border-box;
     padding: 0.8rem 2.8rem 0.8rem 1rem;
     border-radius: 1rem;
     border: 2px solid var(--sc-border);
@@ -245,6 +261,7 @@
 
   .sc-optimize-btn {
     width: 100%;
+    box-sizing: border-box;
     padding: 0.75rem;
     background: var(--sc-primary-dark);
     color: white;
@@ -528,7 +545,7 @@
     }
 
     #sc-stair-svg {
-      min-width: 360px;
+      min-width: 0;
     }
 
     .sc-table-card,
@@ -547,3 +564,58 @@
       font-size: 1rem;
     }
   }
+
+  @container (max-width: 720px) {
+    .sc-root {
+      padding: 0;
+    }
+
+    .sc-card {
+      grid-template-columns: minmax(0, 1fr);
+      border-radius: 1rem;
+      max-width: 100%;
+    }
+
+    .sc-sidebar {
+      border-right: 0;
+      border-bottom: 1px solid var(--sc-border);
+      padding: 1rem;
+    }
+
+    .sc-main {
+      padding: 1rem;
+    }
+
+    .sc-results-header,
+    .sc-bottom-grid,
+    .sc-input-grid {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .sc-stepper,
+    .sc-select,
+    .sc-optimize-btn {
+      max-width: 100%;
+    }
+
+    .sc-step-btn {
+      width: 38px;
+      height: 38px;
+    }
+
+    .sc-stepper input {
+      height: 38px;
+      font-size: 1rem;
+    }
+
+    .sc-visualizer-container {
+      min-height: 210px;
+      padding: 0.5rem;
+      border-radius: 1rem;
+    }
+
+    #sc-stair-svg {
+      min-width: 0;
+      max-width: 100%;
+    }
+  }