Fixed: Managing display profiles on mobile

Fixes #1907

(cherry picked from commit c2fcdb445776d3898be7938216cf8ace65a1a236)

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

@@ -5,7 +5,8 @@ import Icon from 'Components/Icon';
 import Link from 'Components/Link/Link';
 import Measure from 'Components/Measure';
 import PageSectionContent from 'Components/Page/PageSectionContent';
-import { icons } from 'Helpers/Props';
+import Scroller from 'Components/Scroller/Scroller';
+import { icons, scrollDirections } from 'Helpers/Props';
 import translate from 'Utilities/String/translate';
 import DelayProfile from './DelayProfile';
 import DelayProfileDragPreview from './DelayProfileDragPreview';
@@ -72,6 +73,14 @@ class DelayProfiles extends Component {
             errorMessage={translate('UnableToLoadDelayProfiles')}
             {...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>
@@ -104,7 +113,7 @@ class DelayProfiles extends Component {
                 </div>
 
                 {
-              defaultProfile &&
+                  defaultProfile ?
                     <div>
                       <DelayProfile
                         tagList={tagList}
@@ -112,8 +121,11 @@ class DelayProfiles extends Component {
                         onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
                         {...defaultProfile}
                       />
-                </div>
+                    </div> :
+                    null
                 }
+              </div>
+            </Scroller>
 
             <div className={styles.addDelayProfile}>
               <Link