Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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.

gabriell_lab's profile picture

Gabriel

12,256 subscribers

30,109 görüntüleme • 3 ay önce •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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; }
0:12

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; }

Gabriel

31,433 görüntüleme • 2 ay önce

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 modal
0:15

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 modal

Manu Arora

14,474 görüntüleme • 5 ay önce

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;
0:10

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;

Gabriel

110,920 görüntüleme • 3 ay önce

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 thread
0:18

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 thread

Design Chief Priest

35,450 görüntüleme • 6 ay önce

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! ❤️
0:10

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! ❤️

Ali

11,841 görüntüleme • 5 ay önce

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.
0:12

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.

Gabriel

26,445 görüntüleme • 3 ay önce

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; }
0:14

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; }

Gabriel

87,629 görüntüleme • 4 ay önce

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.
0:14

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.

Gabriel

264,647 görüntüleme • 1 ay önce

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!
0:16

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!

Emil Kowalski

89,488 görüntüleme • 3 ay önce

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! 👇
0:14

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! 👇

jhey ʕ•ᴥ•ʔ

168,050 görüntüleme • 3 yıl önce

Simple & Sleek Pricing Modal design. Does this sleek design approach work well?
0:10

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

Basit A. Khan

50,802 görüntüleme • 1 yıl önce

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.
0:13

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.

Gabriel

28,199 görüntüleme • 4 ay önce

Personalized AI assistant Modal design. How this simple minimal design looks? Share thoughts 🤝
0:10

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

Basit A. Khan

33,653 görüntüleme • 1 yıl önce

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. 😅
0:14

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. 😅

Stephen Margheim

19,667 görüntüleme • 10 ay önce

£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 $SIVE
0:12

£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 $SIVE

Mariusz | Investing in the UK 🇬🇧

225,462 görüntüleme • 5 ay önce

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.
0:15

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.

Imran

52,330 görüntüleme • 1 ay önce

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📌📌
0:17

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📌📌

NaijaFarmer

48,424 görüntüleme • 3 ay önce

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 😉
0:12

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 😉

Surjith S M ✪

45,134 görüntüleme • 3 yıl önce

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.
0:17

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.

Sushi Tara Astro ✨

25,683 görüntüleme • 10 ay önce

Probably the worst thing that someone would say to you. Especially if it was from your love one.
0:17

Probably the worst thing that someone would say to you. Especially if it was from your love one.

🍾𝐸𝒹 🍷

46,537 görüntüleme • 1 yıl önce