UI inconsistency: Width of cards

There is an interesting UI inconsistency:

image

The first card is short because it does not contain a lot of text.
The second card is wide despite the fact that there is a lot of free space.
The third card contains the same text as the second card but with a new line inserted after “in”.

Expected behavior: The second card should look like the third card.

PS: Ideally, there could be something like 3 different widths for cards and one could switch between them :).

1 Like

The card width is dynamic based on the text inside until it reaches the max width.

The second card here is reaching the max width, but “hypothes.is” is wrapping to the second line because it is too long to fit on the first line vs never reaching the max width on the third card due to the preemptive return.

2 Likes

Exactly. And I think that is the problem and the result is not nice.

1 Like

is there a different result you’d like to propose?

1 Like

Hmm, I think that if the gap is too large then the card should shrink. It does not have to shrink all the tame but here it is really like half of the card. image

If the gap is smaller, I would let the card have its maximal size.

Alternatively, you could consider allowing the user to resize the card. The resizing would not have to be necessarily unlimited, something like three four sizes would do fine (S M L X ?). But maybe that would add too much complexity?

2 Likes

i considered making all cards resizable when i did the image cards, but irl it’s just too many controls on screen, goes past the threshold of looking too clluttered imo

3 Likes

Yeah, I get it. Therefore I thought that maybe something like S, M, L, X sizes could be less intrusive? Or just one button that would cycle through sizes?
But I let it on you :). It is just brainstorming.

2 Likes

I found that that having wider cards would help tremendously when working through pasted paragraphs of text (that I have to read through and that I didn’t create on my own). Looking at narrow cards of text that someone else wrote just kills my comprehension.

1 Like

I’ve brought up increasing card width before: Suggestions: image/gif resizing, font italics/bold/underline. There are some points there to consider.

You can hack this for now by adding an image background to the card because that allows you to resize a card.

:slight_smile:
Ben

3 Likes

Per Discord: Discord

and in the vein of @Ben Tsai’s “glue” thread, some glue type things i want are:

  • ability to resize height and width of any card

Resize any card :articulated_lorry: https://twitter.com/KinopioClub/status/1583515578681028608

3 Likes