Improve CSS for smaller displays

- Changed the margin to padding on the inline axis, preventing text from
  butting up against the edge of the display.
- Enable flex-wrap on authorship info. This prevents an overflow on the
  inline axis. This combined with moving `flex: 1` prevents the inner
  text from wrapping, improving readability.

Fixes #2486, along with other improvements.

Author: jhpratt

app/styles/application.module.css

@@ -99,7 +99,8 @@ noscript {
     composes: width-limit;
     display: flex;
     flex-direction: column;
-    margin: 15px;
+    margin: 15px 0;
+    padding: 0 15px;
 }
 
 .fork-me {

app/styles/crate/version.module.css

@@ -148,10 +148,13 @@ div.header {
 .authorship {
     .top, .bottom {
         display: flex;
+        flex-wrap: wrap;
 
-        > * { flex: 1; }
+        > * { margin-right: 1em; }
     }
 
+    .top > * { flex: 1 }
+
     @media only screen and (min-width: 890px) {
         flex: 3;
         border-left: 2px solid var(--gray-border);