Understanding the problem – the Notes app isn't mobile-friendly

Let's start by quantifying the problem. We need to explore how well (or not) the application behaves on a mobile device. This is simple to do:

1. Start the Notes application. Determine the IP address of the host system.
2. Using your mobile device, connect to the service using the IP address, and browse around the Notes application, putting it through its paces and noting any difficulties.

Another way to approach this is to use your desktop browser, resizing it to be very narrow. The Chrome DevTools also includes a mobile device emulator. Either way, you can mimic the small screen size of a smartphone on your desktop.

To see a real UI problem on a mobile screen, edit views/noteedit.hbs and make this change:

<br/><textarea rows=5 cols=80 name='body' 
    >{{#if note }}{{note.body}}{{/if}}</textarea>  

What's changed is that we've added the cols=80 parameter to set its width...