@darch@neotxt.dk I’m thinking we should do someyhing about the filters so that the screen real estate is not so used up?

– Like maybe hide them behind something so they don’t always take up the space? 🤔

@prologic@twtxt.net Yes I been thinking about the same. Epecially if when we are to have more filter.
I would go for putting the filters in an <aside>-menu and the make it collapsible on mobile. Maybe make a setting for pinning some filters like Mentions entions and then have the other hidden under a “More…”-label

@prologic@twtxt.net Maybe a horizontal scrolling container like on many mobile apps can be nice here.

@justamoment@twtxt.net yes that is also a solution I’ve been pondering and easier to implement for now

seem straight forward: https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

@darch@neotxt.dk Yeah, I’ve done it before with flexbox like this in my project:

.ScollingContainer {
    display: flex;
    padding: .5em 2em; /* to your liking*/
    gap: 1em; /* the gap between the elements */
    overflow: auto;  /* make it scrollable */
}

Keep in mind that this approach (or the one in the link you found) needs the container to be as wide as the screen if you want is to look nice and not crop on the sides.

The container should be outside any container with the content pushed inside by the same amount as the container, at least on the left.

@justamoment@twtxt.net good to know. And I think we can either pop out the .filer-nav element from <main> or use some absolute position to make it work. I also seen some implementations with a gradient fade to each side.

Ha! I've just noticed that code blocks already work this way and it got a nice border around it which we could render on mobile

@darch@neotxt.dk Cool, usually the gradient is good when you have a closed area but if you don’t want an extra padding, you need JS. A way to fix it is to have the gradient only on the right with more space to scroll until it’s not covering the items below.