Fava: change and balance columns width / currency padding

[Mariano Draghi]

Hi there!

Is there anything I can do on my side of things, to fix this in Fava? (small example of the journal for an account)

As you can see at the topmost row, as soon as the amount is greater than 99,999.99, Fava starts to break the amount and symbol in two rows. That's a simple journal, but it gets *super* confusing to follow/compare amounts visually when the numbers are changing alignment all the time.

Is this a configuration problem or a bug? I did a quick search on the issue tracker on GitHub but couldn't find anything similar to this. It doesn't seem that my situation is that unusual, so I figured I'd ask before reporting it. To my mind, it should be already reported (as it would affect a lot of people (?)), or I have something missconfigured on my end.

Thanks!

[c79m...@gmail.com]

It doesn't look like Fava is doing any sort of conditional line breaks.  It appears to just be a styling issue from the CSS applied to the journal table.  

In 'frontend/css/journal-table.css', line 120 sets the width of the journal number cells to 9rem: '.journal p > .num { width: 9rem;}'.  Changing it to 10rem got everything on to 1 line for me, using '100,000.00 USD' as an example. 

You can directly modify the journal-table.css file wherever it's been installed by pip, but you would want to clone your own copy of the fava source if you want the change to survive upgrades.

- Cameron

[Mariano Draghi]

Thanks Cameron for the tip! All the CSS for the packaged version of Fava gets compiled into a one big app.css, but I was able to find the relevant class and adjust it.

I'm a developer myself... but let's say that CSS and I aren't very good friends, so your pointer was very welcome :)

Anyway, I feel like this is sort of a bug then. Mi local currency has been losing value by the minute for years now, but Argentinian politics aside, there are other currencies were large figures are common (like the Chilean peso, from the top of my head).

Maybe it also depends on the monitor DPI, the browser, and other conditions, but I feel like this should be more dynamic, somehow. I have no idea how though.

I'm still curious as to why this doesn't come up more frequently, but maybe it's just that we users outside USA/Canada/EU are a tiny minority.

For now I'll keep setting the width to my linking whenever Fava gets updated.

Thanks!

[Red S]

Nice - this issue has been a minor annoyance whenever I use my tinier laptop, but I just haven't gotten around to looking into it.

So thank you for posting this question! And please do share your diff here or in a gist? I suspect there's many users like me as you suggested too.

[Mariano Draghi]

> And please do share your diff here or in a gist? I suspect there's many users like me as you suggested too.

Yes, no problem! It's just changing the width from 9rem to something that suits you in line 1465 (for Fava 1.27.2). In my case I set it to 13rem, but YMMV.

Here's the diff:

--- fava/static/app.css 2024-03-07 08:56:33.814931088 -0300
+++ patched/static/app.css 2024-03-07 08:56:00.227112012 -0300
@@ -1462,7 +1462,7 @@
   cursor: pointer;
 }
 .journal p > .num {
-  width: 9rem;
+  width: 13rem;
   border-left: 1px solid var(--table-border);
 }
 .journal .datecell,

Cheers!

[Red S]

Excellent, worked like a charm -- thank you!