Standardize Mobile Screen Width

Description

Currently we have a different screen mobile width (width when we switch to a mobile view) for the charging page, graph screen, and landing page. Use the graph screen mobile width across all pages.

Also part of this ticket is adjusting current UI so that it will work for smaller widths when on a desktop view.

Should use this: https://www.npmjs.com/package/ngx-device-detector

Acceptance Criteria

Mobile widths are standardized... and screen shots of normal looking UI are provided of:

1. All pages when they are squeezed to a pixel away from the mobile screen width (smallest desktop view)
2. All pages look normal in a iphone mobile view

Proposed Solution

This will involve creating a service that abstracts the logic we already have and can be used by all pages, here is an article that explains how to do something likes this: https://betterprogramming.pub/creating-angular-webapp-for-multiple-views-and-screen-sizes-50fe8a83c433
Plus adjust components in each page to make the UI looks NICE, squeezed desktop views, and mobile views
If you have any questions just ask in software_argos on Slack.

Start by locating the existing mobile-width logic in the charging, graph, and landing pages, then review how ngx-device-detector could support a shared service. Done means all pages use the graph screen width, remain usable at the smallest desktop width and in an iPhone view, and have the requested screenshots.