Let's fix up this little issue where we never we tried to resize the very bottom code, so it appears
that the scrolling kind of really starts to go crazy.
So to fix this up, I want to give you just a very quick reminder.
If you find your element, Inspector, and find the body element, remember that whenever we start to
resize one of these elements, that body element gets a class name of react dragonball transparent selection.
So with that in mind, let's go back over to our Ed, still inside of our sell list.
TXT file.
We're going to add in a new selecter here, we're going to take a look for the body element having that
react.
Dragonball Transparent selection class.
And then we'll find inside their our cell list, so whenever someone is dragging this thing, we're
going to add on to the cell list component, some margin on the very bottom.
That extra margin is going to make sure that the window does not kind of snapshot or snap open, which
is what is causing those really abrupt transitions in the height of a sizable element.
It's going to add in a margin bottom of one hundred.
This pretty much means add in a full screen height where the margin to the very bottom of our cell list.
So now if I save this and flip back over.
Now, I can start to expand this thing and contract it, and I no longer get that really weird behavior,
if I scroll down towards the very bottom, I can still get it to kind of open up more, but not in such
a way that it just kind of snaps open or snapped shut.
Now with it at the full expansion height, I can start to close it up a little bit.
And again, it works as expected.
You will notice that when we let go, the entire view snaps a little bit.
So like that right there, that's really just our current margin, bottom of zero pixels coming into
effect because we're removing the margin bottom of one hundred.
So if you don't really like that and if in general you want to allow a user to scroll past the bottom
anyways, we could go back over and update the margin on our cell list itself.
We could say that we want this thing to have maybe 50 percent height or 50.
So now a user will be able to scroll past the bottom a little bit like so and just get some extra space
down here.
And now when we start to expand and contract by Lego, it does not suddenly snap anymore.
OK, let's say that this is once again pretty good solution, you can definitely play around with a
50 right here if you do not want to allow this much of space empty space at the very bottom of the screen.
So if you want to use a different value, they're totally fine, totally up to you.
All right, well, I would say that we are at a really good spot as many times as I've said that around
the application and kind of a stand alone state.
But remember, one of the original contents of this entire app was to allow a user to write in some
amount of code, some amount of text, and eventually save that.
They should then be able to refresh the page and still see the same content on the screen.
So we need to add in some kind of data persistance here.
Let's start to tackle that in just a moment.