Fixed: Managing display profiles on mobile

frontend/src/Settings/Profiles/Delay/DelayProfiles.css

@@ -1,3 +1,7 @@
+.horizontalScroll {
+  overflow-x: auto;
+}
+
 .delayProfiles {
   user-select: none;
 }
@@ -25,3 +29,10 @@
   width: $dragHandleWidth;
   text-align: center;
 }
+
+@media only screen and (max-width: $breakpointSmall) {
+  .horizontalScroll {
+    overflow-y: hidden;
+    width: 100%;
+  }
+}

frontend/src/Settings/Profiles/Delay/DelayProfiles.js

@@ -1,11 +1,12 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { icons } from 'Helpers/Props';
+import { icons, scrollDirections } from 'Helpers/Props';
 import FieldSet from 'Components/FieldSet';
 import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import Measure from 'Components/Measure';
 import PageSectionContent from 'Components/Page/PageSectionContent';
+import Scroller from 'Components/Scroller/Scroller';
 import DelayProfileDragSource from './DelayProfileDragSource';
 import DelayProfileDragPreview from './DelayProfileDragPreview';
 import DelayProfile from './DelayProfile';
@@ -71,6 +72,14 @@ class DelayProfiles extends Component {
             errorMessage="Unable to load Delay Profiles"
             {...otherProps}
           >
+            <Scroller
+              className={styles.horizontalScroll}
+              scrollDirection={
+                scrollDirections.HORIZONTAL
+              }
+              autoFocus={false}
+            >
+              <div>
                 <div className={styles.delayProfilesHeader}>
                   <div className={styles.column}>Protocol</div>
                   <div className={styles.column}>Usenet Delay</div>
@@ -103,7 +112,7 @@ class DelayProfiles extends Component {
                 </div>
 
                 {
-              defaultProfile &&
+                  defaultProfile ?
                     <div>
                       <DelayProfile
                         tagList={tagList}
@@ -111,8 +120,11 @@ class DelayProfiles extends Component {
                         onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
                         {...defaultProfile}
                       />
-                </div>
+                    </div> :
+                    null
                 }
+              </div>
+            </Scroller>
 
             <div className={styles.addDelayProfile}>
               <Link