Prepare UI for iframe embed and other several minor fixes

[Spejbl]

Description of the Change

Changes - iframe size accounted for: 960x500px

• Fix tab name splitting into 2 lines (also in panel's titles)

• Fix right click dropdown position when clicking on tab

• Fix account, project name and hashes overflow when too long

• Fix Preferences modal on smaller device (overflowing)

• Fix mainWrapper (all panels and main "code" window) overlaying bottomBar

• Display open tabs in one line

• Move Learning & Resources to Help menu on smaller device when a project is open

• Add Open in Lab button when in iframe

• Disable right click on Learning & Resources

• Remove title of project on iframe

• Make bottomBar to stretch full width

• Hide unnecessary info on welcome screen on smaller device/iframe

• Hide Analytics modal on iframe

• Hide yellow note in bottomBar on iframe

• Hide upload & fork button on iframe

Benefits

Better UX for users with smaller device and when Lab is embedded into iframe.

Verification Process

1. Start your development environment on port 3000
2. You can then test the iframe in here: http://digitalpromotion.cz/iframe-lab.html
3. Otherwise you can use responsive mode in browser

Github Issues

Resolves #255 #188

[filippsen]

It appears that commit a41e276 touches the voting template and replaces the fixes applied in #258. Please double check.

edit: there are also changes to appview and walletItem, apparently not merging request #257.
I understand it reads "This branch is out-of-date with the base branch", but the last commit was "Merge branch master...", so I thought I would mention, just in case.

[filippsen]

Edited the request description to update information about items that are already applied to master.

ps: added a new item about moving Learning & Resources to Help menu and marked "Fix network dropdown overflow" as not relevant anymore.

[filippsen]

Note about Display open tabs in one line: the height is expandable and the layout does adapt, as shown in the attached image. The detail is that long tab names may end up expanding into 2 lines (e.g. Project Settings) and causing misalignment, which reduces the available editing area (equivalent of ~1 line of code).

[filippsen]

@Spejbl I have a few questions and considerations:

1. What would be the missing text on the first item ("also in ...") ?
2. The yellow bar is only hidden in very small screen dimensions. The note is removed after a certain threshold, but the bottom text still requires a minimum width in order to show everything. It may cause the effect evidenced in the attached image at the end (note the endpoint). Please double check if that is OK.
3. When running in smaller screen dimensions, projects menu button (top bar) overlaps the Upload buttons depending on project title length. Double check if that is intended. (please refer to attached image at the end)
4. Noticed a different account button size when comparing against master (empty space, right side of the down arrow). Please refer to the attached image at the end.
   The following is a reference tomaster for comparison:
   
5. Unclear what "Fix right click dropdown position when clicking on tab" is. Was the original problem the one fixed in commit 373d4ac (Fix dropdown position when scrolled too far) ? Currently, the dropdown opens below the click position, slightly shifted to the right side. Apparently OK, just confirming if that would be it.
6. Another confirmation: in "Fix ... hashes overflow when too long", it refers to commit e3e8c32 (fixing OverFlow hashes of Transaction History while decreasing size #188), correct ? The other case was in Select an Account, first mentioned when that dropdown was different: Improve responsiveness so it works on smaller devices #255 (comment)
7. The description reads that "Learning and Resources" are moved to "Help menu" when a project is open. However, the "Learning and Resources" links (Guide to Superblocks Lab, Video Tutorials, Help Center and Ask a question) are always visible in Help Menu, even when the project is closed (e.g. no available projects). Is that intended ?
8. In Improve responsiveness so it works on smaller devices #255, the description lists "Modals shouldn't have a fixed width/height", but Preferences appears to have a fixed width. Is that intended ? It does fit in 960x500, though.

Attached image:

[Spejbl]

@Spejbl I have a few questions and considerations:

1. What would be the missing text on the first item (_"also in ..."_) ?

2. The yellow bar is only hidden in very small screen dimensions. The note is removed after a certain threshold, but the bottom text still requires a minimum width in order to show everything. It may cause the effect evidenced in the attached image at the end (note the endpoint). Please double check if that is OK.

3. When running in smaller screen dimensions, projects menu button (top bar) overlaps the _Upload_ buttons depending on project title length. Double check if that is intended. (please refer to attached image at the end)

4. Noticed a different account button size when comparing against `master` (empty space, right side of the down arrow). Please refer to the attached image at the end.
   The following is a reference to`master` for comparison:
   ![4-buttons-size-master](https://user-images.githubusercontent.com/697226/52178166-399dd480-27cb-11e9-8ee6-14d29bbda91b.jpg)

5. Unclear what _"Fix right click dropdown position when clicking on tab"_ is. Was the original problem the one fixed in commit [373d4ac](https://github.com/SuperblocksHQ/superblocks-lab/commit/373d4acf1e43f7d9479c3af23eee31c66a2a02e5) (_Fix dropdown position when scrolled too far_) ? Currently, the dropdown opens below the click position, slightly shifted to the right side. Apparently OK, just confirming if that would be it.

6. Another confirmation: in _"Fix ... hashes overflow when too long"_, it refers to commit [e3e8c32](https://github.com/SuperblocksHQ/superblocks-lab/commit/e3e8c32d8f9e89c1d69e80a14127f3f5ef884119) (fixing #188), correct ? The other case was in _Select an Account_, first mentioned when that dropdown was different: [#255 (comment)](https://github.com/SuperblocksHQ/superblocks-lab/issues/255#issuecomment-454387146)

7. The description reads that _"Learning and Resources"_ are **moved** to _"Help menu"_ when a project is open. However, the _"Learning and Resources"_ links (Guide to Superblocks Lab, Video Tutorials, Help Center and Ask a question) are always visible in _Help Menu_, even when the project is closed (e.g. no available projects). Is that intended ?

8. In #255, the description lists _"Modals shouldn't have a fixed width/height"_, but _Preferences_ appears to have a fixed width. Is that intended ? It does fit in 960x500, though.

1. Updated - also in panel's titles
2. Threshold is now put to 1025px to fix that
3. Partly fixed, removed absolute position
4. Removed padding to correspond with master
5. Yes, exactly the same problem
6. Yes, both should be fixed now. Improve responsiveness so it works on smaller devices #255 comment and OverFlow hashes of Transaction History while decreasing size #188 issue
7. Yes, that was intended. It makes sense to put all these things to Help menu as it corresponds with "Help". And to have it on both places when there is no project shouldn't be a problem.
8. It ended up not taking out the fixed width and height. I've tried to make everything fit into the 960x500 as it should be primarily used screen size for iframe.

[filippsen]

Checklist

Initial

• Test regular development build works (localhost). No errors or apparent abnormalities. OK
• Experiment with other randomly selected smaller screen dimensions. OK
• Verify iframe size accounted for 960x500 pixels (Chrome Dev Tools in Responsive mode). OK (details mentioned in previous comments).
• Test iframe-lab.html works. OK
• Test iframe-lab.html matches attached screenshot. OK

Listed items

• Fix tab name splitting into 2 lines (also in panel's titles). OK
• Fix right click dropdown position when clicking on tab. OK
• Fix account, project name and hashes overflow when too long. OK
• Fix Preferences modal on smaller device (overflowing).
  Modal is always centered and just fits 960x500 dimensions. Resolutions below that offer scrolling bars to navigate. OK
• Fix mainWrapper (all panels and main "code" window) overlaying bottomBar.
  Bottom bar is always visible, OK
• Display open tabs in one line. OK
• Move Learning & Resources to Help menu on smaller device when a project is open. OK
• Add Open in Lab button when in iframe.
  Opens Lab in a new tab loading existing project from hash. OK
• Disable right click on Learning & Resources. OK
• Remove title of project on iframe.
  The projects menu button together with the title are not present anymore. OK
• Make bottomBar to stretch full width.
  Bottom bar uses all the available width. OK
• Hide unnecessary info on welcome screen on smaller device/iframe. OK
• Hide Analytics modal on iframe. Unable to see the Analytics modal during tests. OK
• Hide yellow note in bottomBar on iframe. OK
• Hide upload & fork button on iframe. OK

Related issues

• Fixes issues reported in Improve responsiveness so it works on smaller devices #255. OK
• Fixes issues reported in OverFlow hashes of Transaction History while decreasing size #188. OK

Code

No relevant oddities spotted in this code changeset. OK