[UI] Tweak Message Spacing For Greatly Improved Readablity #1564
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR changes padding on the top and bottom of all messages from 6px to 3px and adds a new 10px margin on top of messages with usernames
This drastically improves readability with a very minor code change (4 lines changing actual functionality) without affecting Dino's UI in any negative way.
This type of spacing helps to group messages from different people into readable chunks to drastically improve clarity.
Almost every modern chat program with this kind of layout does something similar, from Discord and Slack to Gajim, Element, and Cinny.
In many cases it even helps fit more messages on screen, while still being nicer to read!
It also helps better differentiate between a newline or line break inside of a message and the space between two separate messages.
New Dino or XMPP users will typically expect a UI like this as they are often coming from an app that already does something similar.
Because many of you already using Dino may have gotten used to the current message spacing, if you dislike it initially I recommend trying the new spacing out for a few days to get a feel for it (see below the comparison image).
Here is a side-by-side comparison (new spacing on the right):
To test it out without building, simply add this code to ~/.config/gtk-4.0/gtk.css or ~/.var/app/im.dino.Dino/config/gtk-4.0/gtk.css if you use the Flatpak:
Note that the padding-left line is already in Dino, it's just here because setting custom padding values in the gtk.css file overrides Dino's defaults so the default has to be applied in the gtk.css file as well.
Thank you for considering this relatively minor yet important improvement!