Update Address overview to fit on mobile

As a user, I want the address overview to be responsive, so that I can view it on my mobile.

# Replication steps

1. In mobile view, click ‘Explore’ > ‘Transaction’

2. Then click an address link in the `From` or To `column`

The address overview page has images overlapping with text and poor formatting. Please update it, to make it match the attached design.

# Prerequisites

You will need to know basic Javascript (jQuery) and css (scss) to do this task. The knowledge of nunjucks will be helpful.

# Guidelines & Hints

For the Transactions section at the end of the page, we always want to show the scrollbar, so the user knows in advance that there is more data to be seen.

You can check the code used in the Menu -> Transactions page.

The address overview page is located at: views/pages/address-detail.njk.

The current scrollbar is implemented on views/pages/tx-list.njk (look for className scroll-bar-wrapper).

The code to handle the scrollbar is located at: src/assets/js/mobile/scroll-bar.js (you should not have to change this).

Add any other necessary mobile css to _mobile.scss to match the design.

Please make sure your code doesn’t affect the desktop version.

We do not want to change the HTML structure.

We also recommend putting all mobile related styling code to the `_mobile.scss` file.

# Resources

## Repository link

https://github.com/cennznet/explorer/tree/master

This ‘explorer’ repository contains several projects.

The project you need to work on is in the ‘portal’ folder.

## Design:

Please refer to the InVision prototype here: [UNcover Bounty Tasks](https://invis.io/7TUN9MQY259)

You will need to request access permission to access inspect mode on the InVision prototype.

Screenshot of intended design also attached.

*Please note there may be some inconsistencies with the InVision prototype and the live CSS. If this occurs, please use the styles defined by the exisiting CSS.

## Get Up & Running

Please check the README and CONTRIBUTING files:

https://github.com/cennznet/explorer/blob/master/portal/README.md https://github.com/cennznet/explorer/blob/master/portal/CONTRIBUTING.md

# Test & Verify Your Changes

## Mobile Devices

Ensure your changes work on:

- The latest Android and iPhones phones.
- Chrome, Safari and FireFox responsive views.

Ensure your changes work as expected and look exactly like the attached design.

Also ensure that the changes do not introduce bugs or break the desktop version.

## Expected Outcome

**Given** user navigates to address overview page using mobile device

**When** user navigates to address section

**Then** user should see QR code with address

**And** user should see full address

**And** user should see copy symbol

**Given** user navigates to address overview page using mobile device

**When** user navigates to address section

**And** user clicks the copy symbol

**Then** user should have address copied to the clipboard and a tooltip appears

**Given** user navigates to address overview page using mobile device

**When** user navigates to assets section

**Then** user should see all assets stored in that address

**Given** user navigates to address overview page using mobile device

**When** user navigates to assets section

**And** user clicks the buttons on the left top side of the assets section

**Then** user should see the assets displaying style changes

**Given** user navigates to address overview page using mobile device

**When** user navigates to transactions section

**Then** user should see time

**And** user should see address

**And** user should see incoming

**And** user should see outgoing

**And** user should see type

**And** user should see status

**And** user should see balance

**Given** user navigates to address overview page using mobile device

**When** user navigates to transactions section

**And** user clicks on arrow sign at the end of the line

**Then** user should see expanded section

**And** user should see block

**And** user should see transaction

**And** user should see size

**And** user should see fee

**Given** user navigates to address overview page using mobile device

**When** user navigates to transactions section

**Then** user should see transaction type selection dropdown

**Given** user navigates to address overview page using mobile device

**When** user navigates to transactions section

**Then** user should see transaction flow selection dropdown

**Given** user navigates to address overview page using mobile device

**When** user navigates to transactions section

**Then** user should see start date selection dropdown

**Given** user navigates to address overview page using mobile device

**When** user navigates to transactions section

**Then** user should see end date selection dropdown

## If you have any questions, please don’t hesitate to contact our team on [Slack](https://join.slack.com/t/centralitydev/shared_invite/enQtNjk5NjE1MDI5NjgzLWJlOTM2NjMxNTMyZDY0OGM0MjY2YjQ1YjJkNTk2ZTIzNTFmYmM3OTIwZWE3NzNhMzE4Mjg4MmY1YzBiZDk0ZDE).

# Current Screenshots



–––––––––––––––––––––––––––––––––––––––––––

# Designed Screen (how your design should look)

Start in portal/views/pages/address-detail.njk and compare its mobile layout with views/pages/tx-list.njk, especially the scroll-bar-wrapper pattern. Read the existing mobile styles in _mobile.scss and the behavior in src/assets/js/mobile/scroll-bar.js without changing that script. Done means the address, assets, and transactions sections match the supplied design on mobile while preserving the desktop layout.

Written by the indexing model from the issue text.