Design system request for feedback: Dropdown gap updates 🧐

Hey, Christina, Rajiv and anyone else on the team checking this out. So, I know we've been talking about this little design detail in Lens where we add a little top padding and bottom padding to the that live based basically above the top most row and the bottom most row.

And I felt like it would just benefit from just looking at it together and making a call. So whip this up really fast.

So this is what we have currently, where we're just adding that little bit of padding up here and down here.

And I think what it does successfully when you're not hovering is it just optically makes all the rows feel even, where if you actually just remove the padding, which I've done here.

So now all the rows are actually the same height. It now makes the bottommost and topmost rows feel actually like they're smaller and tighter just because of their placement and the rounding up top.

And I think the issue with the current approach is that you kind of see the gap when you hover over the topmost row or the bottommost row.

So, not recommending we do this, and I know no one is where we just remove the top most padding and bottom most padding because it just feels too tight.

This is what it feels like when you adjust the row height of all of them. I think what's interesting is it just kind of is the same problem with more padding, where what I mean by that is it's the same problem as this one, where the topmost row and the bottom most row feel optically just different than what's here.

And it also creates more space in between the items, which doesn't help things either. The hover date version of this doesn't feel as bad.

And then this is one that I think intuitively or how do I say this?. Logically seems like it wouldn't make sense.

But I think optically it does. Where what we could do is. If we want to achieve this effect.. But we want to maybe.

. Get rid of this issue. Where when you hover over it.. You see the gap is we could basically make the topmost row and the bottommost row.

. Higher or taller. Rather than the.. Inner rows. So we could basically encode target the first row of a menu in the bottom row of a menu and make those taller.

So, for example these rows are 40 high, and this row and this row are 48 high. And I think what that does is it basically achieves this without the gap.

So it looks nice, everything looks even, and then when you hover over it, it also looks nice and even. It doesn't have a gap here.

It's a little tighter here compared to this one, because basically because it's a little taller, but I actually think it's not a big deal.

So my preference is, after doing this quick little exercise, to do this one. So if we can update the menus to basically target the topmost row and the bottom most row and just make those taller, I think that's like, a nice refinement.

So thanks, Christina, for pushing on this. And that's really curious what other folks think. I know it's a little detail.

It's one that I thought we could solve just by chatting, but I think doing these exercises once in a while is good.