Let's add in a little bit of spacing above and below our ad sell bar, so to do so, I'm going to go
back over to Mike's file.
I'll find the ad sell selector, and inside there, I'll add in a new rule of margin and picks on the
top and bottom and then zero on the left and right.
I'll then save that Bulbeck over.
And now we've got a reasonable amount of spacing that looks pretty good right there.
However, you might notice that whenever we show an ad sell component directly underneath a code editor,
it doesn't look quite right.
So this kind of comes down to some of the counts that we applied to our code editor and really the entire
code cell component itself.
The whole problem here is that ADL is kind of butting up directly against our little sidebar to figure
out why this is, let's go back over to our code cell component file.
I'm going to find Code Cell ESX.
I'll then scroll down a little bit.
So remember, we had set up a vertical riser and then inside there we had said place a div that has
a height of specifically one hundred percent.
That height right there of one hundred percent means that we want to allocate one hundred percent of
all this height to the code editor in the preview window when we then tried to also display a Cizre
immediately after it.
The resize are kind of gets bumped out of the entire wrist, sizable component.
So we can kind of see this in action if we do a quick inspect on the resize bar.
So there's a span for the resize bar.
Then scroll up a little bit and find the closest parent called cell list item.
So there's Div with class cell list item right there.
You'll notice that even though that resize bar is a child of that element, the resize bar is doesn't
really appear to be inside of it, per say.
When I look at what gets highlighted right now, this is because our own cell component is kind of squishing
out that size bar.
And it's all because.
The debate we have right here has a height of one hundred percent.
So to fix this up, we can just adjust this height property right here a little bit, we could change
it to a calculation.
So Calc one 1/2 percent, minus 10 pixels.
So that 10 pixels.
Right.
There is some space being allocated to the resize bar.
Now, if I say this, flip back over.
And mouseover my ad subcomponent, yep, there's definitely ample space inside there, and if I also
now mouseover sell list item, you'll notice that the sidebar is actually encapsulated truly inside
of the cell list item itself now.
OK, so that's a pretty good solution.
Now, if you don't really like the sizing of this right now, if you think there's too much spacing,
no problem, you can always adjust the spacing.
You probably see something like this at one hundred percent zoom right now.
So if you think that's too much vertical space between cells, again, totally fine.
You can reduce that margin just a little bit back inside of the add Celsius file.
So we might try taking this down to, say, eight pixels.
And yeah, I'd say that's just like a little bit closer together, just a little bit better like that,
but again, totally up to you and whatever you want to do.
OK, now, last thing we really need to take care of here, remember I showed you a bug just a moment
ago.
At present, if I go down to just two tech cells and then click on plus text or really plus code, either
one of them, we see kind of a fade out the next one and it fades in.
And it's just kind of weird what's going on.
They're kind of confusing.
So we need to figure out what's happening here, why we see something's fadeout, something's kind of
moved down.
We just need to figure out what's going on.
So let's try to tackle that last problem in just a moment.