Review "Total retirement fund ..." element and spacing

[riccardoporreca]

The text showing "Total retirement fund as of XX-XX-XXXX is YY k, which is Z.ZZ times the last salary" does not dynamically wrap as the width of its container box shrinks, showing instead an horizontal scroll-bar.

We could also consider a more compact "Total retirement fund as of XX-XX-XXXX: YY k (Z.ZZ times the last salary)"

This missing wrap is due to the usage of verbatimTextOutput (which is a <pre/>), which is great for avoiding and empty placeholder box when the app loads but does not wrap by default. This can be fixed via CSS for the #Totals element (see e.g. here). As part of this, we should have explicit padding / border CSS for #Totals. The same can be achieved with a normally-wrapping textOutput (i.e. a <div/> instead of a <pre/>) with borders / background, making sure we only set the border and background using CSS when the element is not empty: #Totals:not(:empty).

Moreover we should use the same width properties as the plots instead using relative % margin. This will make the box always centered with the plots.

Overall, there is also a big benefit in having no margin at all (besides perhaps margin-bottom), and define instead the top-left spacing as padding at the tab level, applying to both Plots and Table (the table is squeezed at the very top-left in the current version of the app).

[gabrielfoix]

Ok with the suggested updates, shorter and more compact text.