GUI not responsive to smaller resolutions

[ErnWong]

Describe the bug
Various text becomes clipped and unreadable when web page size is reduced.

• Sidebar unnecessarily too small
• Split-bill dialog has inappropriate resizing strategy for it's textboxes. Should probably make better use of left margin space, and reflow the textfields to underneath the dialog header. Transaction title (is "title" a user friendly / domain friendly term here?) textbox gets imploded, while the Amount Paid textbox escapes outside the dialog.

To Reproduce
Steps to reproduce the behavior:

1. Explore the app with a reduced page size, e.g. emulate phone screen size or drag window borders.

Severity
Mark with an x.
[x]: Minor effect eg. graphical
[]: Functional error eg. App does not function correctly
[]: Severe eg. Crashing

Reproducibility
Mark with an x.
[x]: Consistent
[]: Occasional
[]: Cannot reproduce at the moment eg. unsure

Expected behavior
GUI should react appropriately to screen size changes to as small as 300px width, so that all text and interfaces are accessible.

Screenshots, Images and Traces.

Conditions
Should be platform agnostic

Issue Dependencies
Strategy for making side-bar responsive will affect #127
Should be done after #134, #155, and #133

Additional context
TODO