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;

src/globals.css

@@ -14,4 +14,29 @@
   --header-height: 6rem;
   --content-margin: 2rem;
   --spacing-margin: 1rem;
+
+  --list-reset: {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  --inline-list: {
+    @apply --list-reset;
+
+    & li {
+      list-style-type: none;
+      display: inline-block;
+      white-space: nowrap;
+    }
+  }
+  --with-separator: {
+    & li:after {
+      content: '//';
+      padding: 0 0.5rem;
+    }
+
+    & li:last-child:after {
+      content: '';
+    }
+  }
 }