Design Engineering Tip If your modal scrolls like this,... you’re probably missing one CSS property: overscroll-behavior: contain; It prevents the page behind the modal from scrolling when users reach the top or bottom.show more

Design Engineering Tip: If your whole page shifts 15px... the moment a modal opens, it isn't the modal. It's the scrollbar disappearing, because the library sets overflow: hidden on the body to lock scrolling. Reserve the space before you ever need it: html { scrollbar-gutter: stable; }show more

your modal scrolls. your page scrolls too. that’s scroll... chaining. put 𝚘𝚟𝚎𝚛𝚜𝚌𝚛𝚘𝚕𝚕-𝚌𝚘𝚗𝚝𝚊𝚒𝚗 on the scrollable part of the modal and the background won't scroll with your modalshow more

Design Engineering Tip: One CSS property is responsible for... most ugly expand animations. It’s height: auto. Replace it with: grid-template-rows: 0fr → 1fr;show more

If you’re looking for a new design or engineering... role this is probably the best place to search. I’ll add the link in the threadshow more

This CSS unit is quietly ruining your website's mobile... experience. In mobile, "vh" doesn't account for the browser's address bar so the bottom of your page gets cut off. Even worse if you have a bottom right action button since users won't even know it's there. The "svh" unit fixes it: .page { min-height: 100svh; } If you found this one useful, follow for more! ❤️show more

Design Engineering Tip: Add friction at the end of... a scroll interaction. When users reach the edge of a scrollable area, the movement should not just stop instantly. A subtle resistance, bounce, or slowdown can make the interface feel more physical and less mechanical. It helps users understand that they reached a boundary without needing extra labels or visual indicators. Used carefully, this can make scrolling feel more natural and closer to how objects behave in the real world.show more

Design Engineering Tip Consider letting textareas grow with the... content instead of introducing nested scrolling. It often creates a smoother writing experience and keeps forms easier to scan. CSS: textarea { field-sizing: content; }show more

Design Engineering Tip: If your UI has a draggable... split view, don’t make users land on perfect proportions by hand. Add sensible snap points—25 / 50 / 75—and let the handle gently settle on release. Users get precision when they need it, and a calmer interface when they don’t.show more

Fixed this small bug in Linear’s app today which... I often see in other apps as well. Here’s a small before/after. The issue: When you open a popover inside a modal (think a custom select), clicking outside the popover to close it also closes the modal. The desired behavior is to close the select on click outside while keeping the modal open. This often happens because custom dropdowns or select components are rendered in a portal. The modal then treats the interaction as an outside click because, technically, the dropdown isn’t inside the modal in the DOM, it’s rendered elsewhere via a portal. The fix depends on your setup, whether it’s Radix/Base UI, fully custom etc. But since you now know the cause of it, you can ask your agent to fix it for you!show more

Future CSS Tip! 🤞 You could create an image... zoom/crop using the CSS object-view-box property 🔍 img { object-fit: cover; object-view-box: inset( var(--top) var(--right) var(--bottom) var(--left) ); } CodePen.IO link below! 👇show more

Simple & Sleek Pricing Modal design. Does this sleek... design approach work well?show more

Design Engineering Tip: If you’re using the same corner... radius across your entire UI, try scaling it with the component size: 12px → XS (buttons, tags) 16px → S (cards, inputs) 24px → M (modals, panels) As components get larger, increasing the radius can help preserve the same visual softness and balance.show more

Personalized AI assistant Modal design. How this simple minimal... design looks? Share thoughts 🤝show more

I think Campsite had some of the most elegant... UI on the web, especially for modal dialogs, but it was all React components rendering <div>s inside <div>s. So I stole their design and rebuilt it with semantic HTML and CSS. 😅show more

£0 to £342,308. 5 years. 364% total return. No... course. No signals. No bullshit. Just screenshots. If you’re scrolling UK fintwit and missing this account, you’re missing the only one actually showing the receipts. $NBIS $AMZN $RKLB $MU $MELI $FTC.L $ALKAL $NOW $RDDT $SIVEshow more

CSS tip: stop your layout from jumping sideways when... the scrollbar appears. html { scrollbar-gutter: stable; } The browser reserves space for the scrollbar ahead of time, so nothing shifts.show more

design engineering is the best seat in tech right... now. you design it and you ship it. if you're learning, start here: - a library on designing with care - UI patterns reference - the best essay on the craft - design skills your agent installs - the details most people miss - everything SVG, explained - design principles, applied I post stuff like this often. follow Imran.show more

If you guys like, garnish the yam from top... to bottom Or even prepare the best sauce to go with it I'll still insist that yam should be banned📌📌show more

I think the theory about men knowing you’re “the... one” from the start is so true. When you’re truly the one, they don’t play about you, your happiness, or your well-being. There are no mixed signals or confusion, only respect, boundaries and consistency.show more

Tailwind CSS Tip (24/30) ✨ You can create a... transparent text effect in Tailwind CSS using (•••••••••••) Guess the CSS Property. You can use this Play Link as a starter: Answer will be shared later today 😉show more