add `𝚜𝚎𝚕𝚎𝚌𝚝－𝚗𝚘𝚗𝚎` to your buttons to accidentally select the text inside while clicking
153,084 просмотров
`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.
83,551 просмотров
text always has weird extra space above capitals and below the baseline. one-line CSS fix: `text-box: trim-both cap alphabetic;` Perfectly trims the text box to the actual glyph bounds. No more padding hacks.
73,955 просмотров
If your UI jumps instead of morphs, you skipped the hard part. inspired by Tom Bekkers
58,707 просмотров
sonner by Emil Kowalski is already one of the most used toast libs in the React ecosystem. and it actually has this problem as well. a while back I wrote about preventing duplicate toasts by giving them an id. same action, same id → update the existing toast. no stacking. no spam. just clean feedback. tiny API detail. huge UX upgrade.
47,507 просмотров
If this feels overengineered, your UI is underdesigned. inspired by rauno
34,218 просмотров
Animations shouldn’t be decoration. They should explain consequences. inspired by Jakub Krehel
17,666 просмотров
long text in cards or lists needs truncation — JS slicing works but requires state + recalc on resize. `line-clamp` (or `-webkit-line-clamp;`) does it natively in pure CSS. One class, no code. Cleaner for responsive UIs.
![`autofill` on inputs is ugly by default the background bleed ruins the clean design systems, especially in dark mode. fixed it with a pure CSS inset shadow hack: autofill:shadow-[inset_0_0_0px_1000px_var(--color-background)] to force the background color and kill the native blue.](https://image.24vids.com/tw-2028837053899669928/amplify_video_thumb/2028834615772016640/img/vplBg-PAeWzjC1AA.jpg)
