[Question Details] Align More information content into a more readable format and fix layout issue

[mirunacurtean]

Affected platforms:
Windows 10 64-bit
macOS 10.14.16
Android 9.0.0

Browser version:
FF Release 79.0
FF 68.11.0
Safari

Environment:
Stage and Production

Steps to reproduce:

1. Sign in on support.allizom.org (or production) and go to AAQ form https://support.allizom.org/en-US/questions/new/desktop/form.
2. Input required info in fields and then setup remote troubleshooting according to these instructions https://github.com/mozilla/kitsune/blob/98f9ce40f6ac85ea3fd0f68336466a1a64e833ca/docs/browser_permissions.md#remote-troubleshooting-aboutsupport-api
3. Select to share data and verify that the troubleshooting field is filled in with relevant info (application name, os version, etc.)
4. Post the question.
5. View posted question Details > More system details info. Scroll through the More information section.
   ex: https://support.allizom.org/en-US/questions/1207107

Expected results:
All info is compacted and shown on the modal.
The information could be formatted into a more readable layout.

Actual results:
Troubleshooting information is streamlined and some of it spills out of the More System details modal.

Notes: Reference to initial bugzilla issue: https://bugzilla.mozilla.org/show_bug.cgi?id=1655885

[akatsoulas]

Closing this issue as there are no immediate plans to work on it as part of our regular backlog curation process. If this ticket becomes a priority or requires immediate attention, please feel free to reopen it.