docs: fix MDX example
the3ash committed
Jul 12, 2025 at 09:32 UTC
64392264578e95d255f1894765d48b2b11c2db32
1 file changed
+32
-2
src/components/examples/Tag.astro
+32
-2
@@ -97,7 +97,7 @@
97
98
setTimeout(() => {
99
tagDisplay?.classList.add('active')
100
- if (tagText) tagText.textContent = tagValue
100
+ if (tagText) tagText.textContent = truncateText(tagValue)
101
}, 300)
102
}
103
@@ -128,11 +128,28 @@
128
}
129
}
130
131
+ // Truncate text to max 24 characters
132
+ function truncateText(text: string, maxLength: number = 24): string {
133
+ if (text.length <= maxLength) {
134
+ return text
135
+ }
136
+ return text.substring(0, maxLength) + '...'
137
+ }
138
+
139
addButton?.addEventListener('click', switchToInput)
140
141
tagInput?.addEventListener('input', (e) => {
142
const target = e.target as HTMLInputElement
135
- tagValue = target.value
143
+ const inputValue = target.value
144
+
145
+ // Limit input to 24 characters
146
+ if (inputValue.length > 24) {
147
+ target.value = inputValue.substring(0, 24)
148
+ tagValue = inputValue // Keep original value for display truncation
149
+ } else {
150
+ tagValue = inputValue
151
+ }
152
+
153
updateConfirmButton()
154
})
155
@@ -182,6 +199,7 @@
199
gap: 0.5rem;
200
position: relative;
201
width: 100%;
202
+ min-height: 40px;
203
}
204
205
.add-button {
@@ -205,6 +223,12 @@
223
z-index: 1;
224
opacity: 1;
225
visibility: visible;
226
+ overflow: visible;
227
+ will-change: transform;
228
+ -webkit-transform: translate(-50%, -50%) scale(1);
229
+ box-sizing: border-box;
230
+ padding: 0;
231
+ margin: 0;
232
}
233
234
.add-button.hidden {
@@ -224,10 +248,15 @@
248
fill: currentColor;
249
width: 1rem;
250
height: 1rem;
251
+ position: relative;
252
+ display: block;
253
+ transform: translateZ(0);
254
}
255
256
.add-button:hover {
257
opacity: 0.9;
258
+ transform: translate(-50%, -50%) scale(1);
259
+ -webkit-transform: translate(-50%, -50%) scale(1);
260
}
261
262
.input-state {
@@ -369,6 +398,7 @@
398
opacity: 0;
399
pointer-events: none;
400
transition: all 0.25s ease-out;
401
+ will-change: transform, opacity;
402
}
403
404
.tag-display > * {