#540 #541

[qclin]

fixes #540 Report allow long text fixes #541 Adjust layout to display readable text

Popup box set width wider, content description set to substring limit of 150 with ellipse for text overflow

Convert table layout to ul for flex layout

[matthewberryman]

@LucieGueuning Even though we could force scroll bars on for both report entering (pictured below) and in display (see updated work on #541 in 2nd picture in comment above for events page, and @qclin has done similar for landing page), these pictures demonstrate the problems with changing #540 limit—even with the fix to layout of event description (and addition of scroll bar to be completed) it creates the following problems:

1. On mobile report card it makes editing text difficult as you can't see previously entered text without scrolling back.
2. On the display side, it means a lot of scrolling on the part of end user to see all the reports, detracting from ability to see multiple reports at once, which makes it harder to do the confirmation (drawing on multiple sources) etc. Can you please check back with whoever requested #540 and ensure they are happy to create above problems by changing the limit.

@qclin please wait for @LucieGueuning on #540 but just noting the following that apply whatever the outcome of that decision.

• Make sure you keep / use the col layouts to avoid wrapping issues #559 https://github.com/MSFREACH/msf-reach/commit/5e1e3d89636eacc7ccbf839db8f9f3c97e7f555a
• Probably need to force visibility of scroll bars either way to highlight to the user they can scroll to see more.
• Even with a 150 char limit (forced on report entry, or with truncation) on reports the popups are the wrong shape and it is squishing the box too much. You will need to explore the popup options https://leafletjs.com/reference-1.3.2.html#popup-option