From 672ded87afbb7b96181c74ff19f4847dadbcb57b Mon Sep 17 00:00:00 2001
From: Jeff Avallone <jeff.avallone@gmail.com>
Date: Thu, 15 Feb 2018 09:03:47 -0500
Subject: [PATCH] Fixing positoining of action links in Form

---
 .../Form/__snapshots__/test.js.snap           |  2 +-
 src/components/Form/index.js                  |  2 +-
 src/components/Form/style.css                 |  7 ++++++
 src/globals.css                               | 25 +++++++++++++++++++
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/components/Form/__snapshots__/test.js.snap b/src/components/Form/__snapshots__/test.js.snap
index 65b68d0..dc165f3 100644
--- a/src/components/Form/__snapshots__/test.js.snap
+++ b/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>
diff --git a/src/components/Form/index.js b/src/components/Form/index.js
index ff8b6c4..55063cb 100644
--- a/src/components/Form/index.js
+++ b/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>
diff --git a/src/components/Form/style.css b/src/components/Form/style.css
index e99f3ef..50a3675 100644
--- a/src/components/Form/style.css
+++ b/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;
diff --git a/src/globals.css b/src/globals.css
index c4d1c23..078f957 100644
--- a/src/globals.css
+++ b/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: '';
+    }
+  }
 }