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`] = `
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 {
-
+
{ this.downloadActions() }
{ this.permalinkAction() }
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: '';
+ }
+ }
}