How to reduce the gap between tiddlers in collapsed state

1

Here I am using a custom layout with collapsed tiddlers / cards.
When the storyriver has many tiddler, these collapsed tiddlers are closely packed.

image
image1872Ă—1074 266 KB

But when the tiddler number in the storyriver is less, the gap between tiddlers are more.

image
image1586Ă—895 47.1 KB

How can I fix this gap ? This occurs only when the storyriver is horizontally oriented instead of the default vertical orientation.

2

I’m not sure why, but the vertical writing mode css line seems to control both the tight padding around the text (which you do want) and the distributed spacing across the screen (which you don’t want). In my inspector, deselecting that writing-mode line solved the one problem at the expense of the other.

.arsheth-cards .tc-story-river {
    writing-mode: vertical-lr !important;
}
3

I am trying to fix it for last few days, no luck yet.

4

I don’t understand how to reproduce what you show in the image, in the actual wiki you link to. It would be better if you linked to a wiki that directly shows the problem.

5

There is filter button in the topbar to the left of the select widget. Click that button to change the tiddler count to a small number like 5…That would be sufficient to reproduce the problem…

6

image
image1920Ă—847 88.8 KB

7

Can you press alt+shift+Z and see

I am away from desktop… that’s why

8

Shift+L also is needed to change from vertical to horizontal orientation of storyriver

9

OK, that did fold the tiddlers but even setting the number to 2 does nothing.
But better take this when you’ at you desktop.

image
image1278Ă—255 27 KB

10

I have uploaded a new version with the issue described in OP in the home page. Can you take a look now. https://cards-ui-demo.tiddlyhost.com/

11

I have very limited experience with flexbox, but maybe this?

image
image1891Ă—827 129 KB

12

If I were to dabble with flexbox I’d first use the CSS-tricks writeup as a reference:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

13

This article helped. Thank you @twMat for sharing this.

.arsheth-cards .tc-story-river {
    writing-mode: vertical-lr!important;
    align-content: flex-start;
}

align-content: flex-start; solved the issue.

14

This vertical list story would be nice inside a single tiddler, in otherwise a way to list or equivalent to tabs.