improve mobile nag style

ui/component/common/nag.jsx

@@ -21,7 +21,7 @@ export default function Nag(props: Props) {
 
   return (
     <div className={classnames('nag', { 'nag--helpful': type === 'helpful', 'nag--error': type === 'error' })}>
-      {message}
+      <div className="nag__message">{message}</div>
       <Button
         className={classnames('nag__button', {
           'nag__button--helpful': type === 'helpful',

ui/scss/component/_claim-list.scss

@@ -417,6 +417,10 @@
   .file-properties {
     color: var(--color-white);
   }
+
+  @media (max-width: $breakpoint-small) {
+    display: none;
+  }
 }
 
 .claim-preview--tile {

ui/scss/component/nag.scss

@@ -20,6 +20,10 @@ $nag-error-z-index: 100001;
     color: var(--color-white);
     text-decoration: underline;
   }
+
+  @media (max-width: $breakpoint-small) {
+    text-align: left;
+  }
 }
 
 .nag--helpful {
@@ -34,9 +38,21 @@ $nag-error-z-index: 100001;
   z-index: $nag-error-z-index;
 }
 
+.nag__message {
+  display: inline;
+
+  @media (max-width: $breakpoint-small) {
+    &::after {
+      content: '';
+      display: block;
+    }
+  }
+}
+
 .nag__button {
   line-height: 1;
   margin-left: var(--spacing-small);
+  margin-right: var(--spacing-small);
   border-radius: var(--border-radius);
   border: 1px solid var(--color-white);
   padding: var(--spacing-miniscule);
@@ -47,6 +63,11 @@ $nag-error-z-index: 100001;
     background-color: var(--color-white);
     color: var(--color-nag);
   }
+
+  @media (max-width: $breakpoint-small) {
+    margin-left: 0;
+    margin-top: var(--spacing-small);
+  }
 }
 
 .nag__button--helpful {