1 00:00:01,090 --> 00:00:06,280 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 2 00:00:06,280 --> 00:00:07,510 back over to Mike's file. 3 00:00:08,109 --> 00:00:13,630 I'll find the ad sell selector, and inside there, I'll add in a new rule of margin and picks on the 4 00:00:13,630 --> 00:00:16,329 top and bottom and then zero on the left and right. 5 00:00:16,770 --> 00:00:19,060 I'll then save that Bulbeck over. 6 00:00:19,420 --> 00:00:23,090 And now we've got a reasonable amount of spacing that looks pretty good right there. 7 00:00:23,410 --> 00:00:28,090 However, you might notice that whenever we show an ad sell component directly underneath a code editor, 8 00:00:28,310 --> 00:00:29,400 it doesn't look quite right. 9 00:00:29,920 --> 00:00:34,990 So this kind of comes down to some of the counts that we applied to our code editor and really the entire 10 00:00:34,990 --> 00:00:36,310 code cell component itself. 11 00:00:37,180 --> 00:00:43,180 The whole problem here is that ADL is kind of butting up directly against our little sidebar to figure 12 00:00:43,180 --> 00:00:47,050 out why this is, let's go back over to our code cell component file. 13 00:00:48,140 --> 00:00:50,090 I'm going to find Code Cell ESX. 14 00:00:51,270 --> 00:00:52,590 I'll then scroll down a little bit. 15 00:00:55,220 --> 00:01:00,890 So remember, we had set up a vertical riser and then inside there we had said place a div that has 16 00:01:00,890 --> 00:01:03,380 a height of specifically one hundred percent. 17 00:01:04,030 --> 00:01:07,790 That height right there of one hundred percent means that we want to allocate one hundred percent of 18 00:01:07,790 --> 00:01:13,580 all this height to the code editor in the preview window when we then tried to also display a Cizre 19 00:01:13,590 --> 00:01:14,510 immediately after it. 20 00:01:14,660 --> 00:01:18,530 The resize are kind of gets bumped out of the entire wrist, sizable component. 21 00:01:18,530 --> 00:01:23,710 So we can kind of see this in action if we do a quick inspect on the resize bar. 22 00:01:24,350 --> 00:01:26,210 So there's a span for the resize bar. 23 00:01:26,870 --> 00:01:32,590 Then scroll up a little bit and find the closest parent called cell list item. 24 00:01:32,600 --> 00:01:35,210 So there's Div with class cell list item right there. 25 00:01:35,690 --> 00:01:40,490 You'll notice that even though that resize bar is a child of that element, the resize bar is doesn't 26 00:01:40,490 --> 00:01:42,320 really appear to be inside of it, per say. 27 00:01:42,470 --> 00:01:49,520 When I look at what gets highlighted right now, this is because our own cell component is kind of squishing 28 00:01:49,520 --> 00:01:50,810 out that size bar. 29 00:01:50,930 --> 00:01:52,070 And it's all because. 30 00:01:53,230 --> 00:01:56,590 The debate we have right here has a height of one hundred percent. 31 00:01:57,700 --> 00:02:02,530 So to fix this up, we can just adjust this height property right here a little bit, we could change 32 00:02:02,530 --> 00:02:04,180 it to a calculation. 33 00:02:04,180 --> 00:02:07,900 So Calc one 1/2 percent, minus 10 pixels. 34 00:02:08,530 --> 00:02:09,490 So that 10 pixels. 35 00:02:09,490 --> 00:02:09,639 Right. 36 00:02:09,639 --> 00:02:12,430 There is some space being allocated to the resize bar. 37 00:02:13,030 --> 00:02:15,580 Now, if I say this, flip back over. 38 00:02:17,190 --> 00:02:23,400 And mouseover my ad subcomponent, yep, there's definitely ample space inside there, and if I also 39 00:02:23,400 --> 00:02:29,520 now mouseover sell list item, you'll notice that the sidebar is actually encapsulated truly inside 40 00:02:29,520 --> 00:02:31,080 of the cell list item itself now. 41 00:02:32,010 --> 00:02:33,290 OK, so that's a pretty good solution. 42 00:02:34,050 --> 00:02:37,740 Now, if you don't really like the sizing of this right now, if you think there's too much spacing, 43 00:02:37,890 --> 00:02:39,900 no problem, you can always adjust the spacing. 44 00:02:40,680 --> 00:02:43,370 You probably see something like this at one hundred percent zoom right now. 45 00:02:43,530 --> 00:02:47,550 So if you think that's too much vertical space between cells, again, totally fine. 46 00:02:47,760 --> 00:02:52,380 You can reduce that margin just a little bit back inside of the add Celsius file. 47 00:02:52,800 --> 00:02:55,080 So we might try taking this down to, say, eight pixels. 48 00:02:56,590 --> 00:03:01,660 And yeah, I'd say that's just like a little bit closer together, just a little bit better like that, 49 00:03:02,260 --> 00:03:04,810 but again, totally up to you and whatever you want to do. 50 00:03:06,030 --> 00:03:09,990 OK, now, last thing we really need to take care of here, remember I showed you a bug just a moment 51 00:03:09,990 --> 00:03:10,310 ago. 52 00:03:10,980 --> 00:03:16,500 At present, if I go down to just two tech cells and then click on plus text or really plus code, either 53 00:03:16,500 --> 00:03:21,120 one of them, we see kind of a fade out the next one and it fades in. 54 00:03:21,120 --> 00:03:22,950 And it's just kind of weird what's going on. 55 00:03:22,950 --> 00:03:23,850 They're kind of confusing. 56 00:03:23,850 --> 00:03:28,110 So we need to figure out what's happening here, why we see something's fadeout, something's kind of 57 00:03:28,110 --> 00:03:28,770 moved down. 58 00:03:29,220 --> 00:03:30,630 We just need to figure out what's going on. 59 00:03:30,810 --> 00:03:33,740 So let's try to tackle that last problem in just a moment.