Fixing positoining of action links in Form

src/components/Form/__snapshots__/test.js.snap

@@ -39,7 +39,7 @@ exports[`Form rendering 1`] = `
       <SvgMock />
     </div>
     <ul
-      className="inline with-separator actions"
+      className="actions"
     />
   </form>
 </div>

src/components/Form/index.js

@@ -72,7 +72,7 @@ class Form extends React.Component {
           </select>
           <ExpandIcon/>
         </div>
-        <ul className={ ['inline', 'with-separator', style.actions].join(' ') }>
+        <ul className={ style.actions }>
           { this.downloadActions() }
           { this.permalinkAction() }
         </ul>

src/components/Form/style.css

@@ -8,6 +8,7 @@
 
 .form {
   margin: var(--spacing-margin) 0;
+  overflow: hidden; /* Keep floated content in the box */
 
   & textarea {
     display: block;
@@ -41,8 +42,14 @@
 }
 
 .actions {
+  @apply --list-reset;
   float: right;
 
+  @media (min-width: 700px) {
+    @apply --inline-list;
+    @apply --with-separator;
+  }
+
   & svg {
     height: 1em;
     vertical-align: middle;