Okay, let's work on the single Idea page, but before we do that, let's fix a few issues on the index page here. So the first issue is if this text is not long and doesn't span the entire width. So let's look for that first card here, and let's just delete the text here, and you'll see the issue. This is not correct. So let's try to fix this in DevTools first. So select the item, and let's see if you can just put a width full on this div, and see if that fixes it. width full.

So if I click this, you'll see that the div is the entire height, but now when you click on it, it won't go to that link. Okay, so that's it. And I had to make those fixes because this layout looks pretty much the same as the layout we're about to do, so the Idea page. So the only difference is the votes section gets moved down here to the bottom right, and we add the User's name here. So let's go ahead and do that. Let's go to our routes file and add a new route. So we can do route get, or we can also do route view.

Let's go to our routes file and add a new route. So we can do route get, or we can also do route view. It doesn't matter because we're going to change this later anyways when we make it dynamic, but let's say show for now. And that's going to go to a, actually it's named Idea. Now we'll go to a view named show. So let's make that layout, or that new view I mean. So we can just duplicate this, let's call it show.blade.php, and let's just remove everything here. Okay, let's start with the link here.

here. Okay, let's start with the link here. So the link that goes back. So let's make it a div, and that should be a link, and it's going to be flex because there's an icon, so flex items center, semi-bold, and let's make it hover underlined, okay. And let's add the SVG in a second, let's just do ml-2, and we have all ideas, okay. And let's grab, actually let's go to the show page, so Idea, and let's grab that chevron-left icon. So let's look for that in the icon set I'm using here. ChevronLeft, copy SVG, let's paste that in, and we don't need this.

and let's see how that looks, looks good. Okay now let's work on the buttons, so we have buttons here, so let's be a flex container as well, justify-between first flex item, second flex item, so let's go ahead and do that. So that would be underneath the Idea container, so after this, let's add a buttons container, and let's end that. So flex, like I said, items-center, justify-between, and let's give it a margin. So the first flex item would have these two buttons here, reply and setStatus, so let's grab the blue one from the submit button, so that would be in app.blade.php, submit, and it's this one right here, let's grab this, let's paste it in, and it's not a submit button,

grab the blue one from the submit button, so that would be in app, blade.php, submit, and it's this one right here, let's grab this, let's paste it in, and it's not a submit button, so let's change that, let's change the button, and I don't want this width here, so let's get rid of that, and let's see how that looks, what's it called, it's called reply, okay, and let's see, I have it set to width 32, so let's add that, and let's see how that looks, okay, hover on it, it is, cool, now let's add the setStatus button, which is similar to the attach button, so we can grab that as well, so again, back to our app, let's grab this button up here, and paste it after here, and this is a button as well, it's called setStatus, the svg should be after, so let's move that down, let's re-indent that, and the margin should go on, or we can make this one margin-right, and obviously we have to

and there's no status, so we can just copy that, so let's make a container for all of the comments first, because we have to work on this section as well, with the line, okay, so that's after the buttons container, let's make a new one called comments container, and let's make it space-y-6, margin-left of 22 is what I have, because there is a margin here, and let's just give some margin on the top and the bottom, my-8, and let's end that out, so let's just grab the idea container, and see if we can work with that, so that would be up here, where is it, idea container, let's grab this, and let's paste it in here, and see what we get, let's re-indent that, let's change it to a comment container, oops, comment,

and let's paste it in here, and see what we get, let's re-indent that, let's change it to a comment container, oops, comment, and let's close the comment container, and let's see what we get here, okay, why is it not indenting on the left? Oh, I think it's because 22 is not defined, let's check the intellisense, yeah, there's no 22, so let's make it 24, and let's see if that works, yeah, so actually, let me make it 22, and we'll add that in our Tailwind config, so 22, divided by 22, is 5.5, 5.5 rems, and it's npm run, oops, wrong one, npm run dev, okay, let's try that again with 22, did I add that? Yeah, it's 22 now, let's see if there's a margin, and there is, cool, okay, what don't we need here? We don't need category, comments,

there's probably a plugin, but I'm just going to do it the old-fashioned way, and use our css file in here, let's paste that in, actually, we have to use our comments container, and b4, and then we can paste it in, so I have a few tweaks here, I'm just moving it over to the left a bit more, so 40 pixels, and let me just change the background to black, so you can see it, and then we'll put it back to this color later on, which is the color I ended up using, okay, and we have to, I'm gonna run my watcher here, so I don't have to keep running npm run dev, so I don't have to keep running npm run dev, okay, and let's see if that did anything, and it didn't, what's wrong? So I think the problem here is we have to make our parent div relative, so I believe the comments container has to be relative, so let's scroll up,

so I'll stick with that, so yeah, I'm pretty happy with everything here, let's go ahead and stop this, make a commit, what episode is this, five, git add, git commit, episode five, say design, single, Idea, page.