@jjlmoya/utils-diy 1.17.0 → 1.18.0

package/package.json

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

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

@@ -1,7 +1,8 @@
-.ec-root {
+  .ec-root {
     width: 100%;
     max-width: 72rem;
     margin: 0 auto;
+    overflow-x: clip;
   }
 
   .ec-grid {
@@ -34,6 +35,7 @@
     background: rgba(241, 245, 249, 0.5);
     padding: 0.375rem;
     border-radius: 1rem;
+    max-width: 100%;
   }
 
   .ec-tab-btn {
@@ -52,6 +54,7 @@
     justify-content: center;
     gap: 0.5rem;
     transition: all 0.2s;
+    overflow: hidden;
   }
 
   .ec-tab-btn[data-ec-active="true"] {
@@ -215,6 +218,7 @@
     display: flex;
     align-items: center;
     gap: 0.75rem;
+    min-width: 0;
   }
 
   .ec-waste-icon {
@@ -289,6 +293,7 @@
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
+    min-width: 0;
   }
 
   .ec-result-card {
@@ -572,28 +577,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 +629,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 +674,11 @@
       width: 5rem;
     }
   }
+
+  @media (max-width: 380px) {
+    .ec-tab-btn {
+      flex-direction: column;
+      gap: 0.25rem;
+      min-height: 3.15rem;
+    }
+  }

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

@@ -564,11 +564,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 +577,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 +596,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 +616,11 @@
 
   @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);
     }
   }

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

@@ -27,6 +27,8 @@
     margin: 1.5rem auto;
     padding: 0 1rem;
     color: var(--sc-neutral);
+    container-type: inline-size;
+    overflow-x: clip;
   }
 
   .sc-card {
@@ -34,9 +36,10 @@
     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 +49,7 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    min-width: 0;
   }
 
   .sc-section h3 {
@@ -63,6 +67,7 @@
     flex-direction: column;
     gap: 1.5rem;
     background: var(--sc-bg);
+    min-width: 0;
   }
 
   .sc-results-header {
@@ -135,6 +140,7 @@
 
   .sc-input-group {
     margin-bottom: 0.75rem;
+    min-width: 0;
   }
 
   .sc-input-group label {
@@ -211,6 +217,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 +252,7 @@
 
   .sc-optimize-btn {
     width: 100%;
+    box-sizing: border-box;
     padding: 0.75rem;
     background: var(--sc-primary-dark);
     color: white;
@@ -528,7 +536,7 @@
     }
 
     #sc-stair-svg {
-      min-width: 360px;
+      min-width: 0;
     }
 
     .sc-table-card,
@@ -547,3 +555,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%;
+    }
+  }