@jjlmoya/utils-home 1.36.0 → 1.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -26,6 +26,7 @@
26
26
  border: 1px solid var(--border-color);
27
27
  color: var(--text-main);
28
28
  position: relative;
29
+ min-width: 0;
29
30
  }
30
31
 
31
32
  @media (min-width: 768px) {
@@ -43,6 +44,7 @@
43
44
  display: flex;
44
45
  flex-direction: column;
45
46
  gap: 20px;
47
+ min-width: 0;
46
48
  }
47
49
 
48
50
  @media (min-width: 768px) {
@@ -63,6 +65,7 @@
63
65
  gap: 28px;
64
66
  padding: 40px 32px;
65
67
  min-height: 360px;
68
+ min-width: 0;
66
69
  }
67
70
 
68
71
  .tile-section-title {
@@ -77,6 +80,7 @@
77
80
  .tile-unit-toggle {
78
81
  display: flex;
79
82
  gap: 8px;
83
+ flex-wrap: wrap;
80
84
  }
81
85
 
82
86
  .tile-unit-btn {
@@ -89,6 +93,7 @@
89
93
  font-weight: 700;
90
94
  cursor: pointer;
91
95
  transition: all 0.2s;
96
+ min-width: 0;
92
97
  }
93
98
 
94
99
  .tile-unit-btn:hover {
@@ -120,11 +125,13 @@
120
125
  display: flex;
121
126
  align-items: baseline;
122
127
  gap: 8px;
128
+ min-width: 0;
123
129
  }
124
130
 
125
131
  .tile-number-input {
126
- width: 100px;
127
- font-size: 2.5rem;
132
+ width: min(100%, 120px);
133
+ min-width: 0;
134
+ font-size: clamp(1.8rem, 8vw, 2.5rem);
128
135
  font-weight: 900;
129
136
  color: var(--text-main);
130
137
  background: transparent;
@@ -140,8 +147,9 @@
140
147
  }
141
148
 
142
149
  .tile-price-input {
143
- width: 90px;
144
- font-size: 1.5rem;
150
+ width: min(100%, 120px);
151
+ min-width: 0;
152
+ font-size: clamp(1.25rem, 6vw, 1.5rem);
145
153
  font-weight: 900;
146
154
  color: var(--text-main);
147
155
  background: transparent;
@@ -159,6 +167,7 @@
159
167
  .tile-number-unit {
160
168
  font-size: 0.875rem;
161
169
  color: var(--text-muted);
170
+ overflow-wrap: anywhere;
162
171
  }
163
172
 
164
173
  .tile-slider {
@@ -186,6 +195,7 @@
186
195
  .tile-pattern-toggle {
187
196
  display: flex;
188
197
  gap: 8px;
198
+ flex-wrap: wrap;
189
199
  }
190
200
 
191
201
  .tile-pattern-btn {
@@ -198,6 +208,7 @@
198
208
  font-weight: 700;
199
209
  cursor: pointer;
200
210
  transition: all 0.2s;
211
+ min-width: 0;
201
212
  }
202
213
 
203
214
  .tile-pattern-btn:hover {
@@ -280,10 +291,12 @@
280
291
  width: 100%;
281
292
  max-width: 320px;
282
293
  justify-content: center;
294
+ min-width: 0;
283
295
  }
284
296
 
285
297
  .tile-stat {
286
298
  text-align: center;
299
+ min-width: 0;
287
300
  }
288
301
 
289
302
  .tile-stat-label {
@@ -300,6 +313,7 @@
300
313
  font-weight: 700;
301
314
  color: var(--text-main);
302
315
  margin: 0;
316
+ overflow-wrap: anywhere;
303
317
  }
304
318
 
305
319
  .tile-stat-divider {
@@ -328,6 +342,7 @@
328
342
  letter-spacing: 0.1em;
329
343
  color: var(--text-muted);
330
344
  margin: 0;
345
+ min-width: 0;
331
346
  }
332
347
 
333
348
  .tile-waste-value {
@@ -335,6 +350,76 @@
335
350
  font-weight: 900;
336
351
  color: var(--tile-p);
337
352
  margin: 0;
353
+ margin-left: auto;
354
+ overflow-wrap: anywhere;
355
+ }
356
+
357
+ @media (max-width: 520px) {
358
+ .tile-wrapper {
359
+ padding: 0.5rem 0;
360
+ }
361
+
362
+ .tile-card {
363
+ width: calc(100% - 16px);
364
+ border-radius: 20px;
365
+ }
366
+
367
+ .tile-left {
368
+ padding: 20px 16px;
369
+ gap: 16px;
370
+ }
371
+
372
+ .tile-right {
373
+ padding: 24px 16px;
374
+ gap: 20px;
375
+ min-height: 320px;
376
+ }
377
+
378
+ .tile-unit-btn,
379
+ .tile-pattern-btn {
380
+ flex: 1 1 auto;
381
+ padding: 8px 10px;
382
+ border-radius: 10px;
383
+ }
384
+
385
+ .tile-field {
386
+ gap: 8px;
387
+ }
388
+
389
+ .tile-svg-wrap {
390
+ max-width: 100%;
391
+ border-radius: 12px;
392
+ }
393
+
394
+ .tile-result-badge {
395
+ width: 100%;
396
+ text-align: center;
397
+ line-height: 1.35;
398
+ border-radius: 10px;
399
+ }
400
+
401
+ .tile-stats {
402
+ display: grid;
403
+ grid-template-columns: repeat(2, minmax(0, 1fr));
404
+ gap: 12px;
405
+ max-width: none;
406
+ }
407
+
408
+ .tile-stat {
409
+ padding: 10px;
410
+ border: 1px solid var(--border-color);
411
+ border-radius: 12px;
412
+ background: var(--bg-surface);
413
+ }
414
+
415
+ .tile-stat-divider {
416
+ display: none;
417
+ }
418
+
419
+ .tile-waste-row {
420
+ max-width: none;
421
+ align-items: flex-start;
422
+ }
338
423
  }
339
424
 
340
425
  @keyframes tile-pulse-success {
@@ -401,4 +486,4 @@
401
486
  transform: translate(var(--tx), var(--ty)) scale(0);
402
487
  opacity: 0;
403
488
  }
404
- }
489
+ }