There's a few ways to control whitespace in Tailwind. We want this always to be on a single line. The text here is wrapping in order to try to squeeze into the space that we have, but we don't want that. We also want a little bit of margin on this. This description is text-small, font-medium, and its text-gray-200. Here we see our description is rendering. Because we have these two siblings, let's go ahead and wrap them in a fragment. Now that little divider line matches up nicely, Let's use another div for the scription. Then the background opacity here is actually. We'll also give it a little bit of margin. If we throw background white on it, then we should see it show up. This has a height of 24 pixels, which is h-6. We'll just make a div with a width of one pixel. Let's start with this little vertical line here, right there. We'll conditionally render here based on the channel's description. Let's come down here below the hashtag and channel title. If we do, we have this little divider here and then we have the text. We can see here, if it doesn't have a description, we don't actually render that little vertical line and the description text. For the interesting part is we want this description. Then we just wrap each one of these icons in a button and give it a little hover treatment similar to what we see on Discord. We're wrapping all these buttons in a div and using margin left auto, which is going to create all of this margin here and push these far over to the right, which again works because we are in a flex container right here. We've got the hashtag icon with the fixed width and height. All these elements line up nicely, vertically. Again, this is pretty standard stuff at this point. It looks like these things are lining up with the exception of the search box and the description. Let's change this px-3 on the wrapper to px-2.

Looks like we have a little bit of extra padding here. Right inside this div, I'll paste in all this code. We're going to focus on the interesting part, which is this description. I'm going to paste in all of these buttons and this text. At this point, we've built a lot of UI that looks a lot like this.

When we click around, we'll see that that title updates.

We can come back down here to where we were hardcoding this in and change it with channel.label. This channel variable right here is going to have a label property. That will give us a blob of JSON that looks like this. Then we're going to get all of the categories channels, flatten them, and then find the channel that matches the CID from the router. We're going to go ahead and use the router queries server ID to get the server again, which is just a blob of JSON here for the current server. This should look pretty familiar to what we've seen before. We want to use the channel ID in the URL in order to get that. We'll see that each channel has a label and a description. To actually get the title, we're going to again poke into our data.js file right here. Right now, we're rendering this static text right here in line 66. Let's start with getting the title to be dynamic. The title updates, the description updates, and then we have these elements right here. Of course, as we navigate, they all change.

If we come over to Discord, we'll see a lot of elements here. Sam Selikoff: Now that we have our channel nav working over here, we can actually make this channel header dynamic.

Flexbox text overflow ellipsis