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,48 +73,59 @@ class DelayProfiles extends Component {
             errorMessage={translate('UnableToLoadDelayProfiles')}
             {...otherProps}
           >
-            <div className={styles.delayProfilesHeader}>
+            <Scroller
-              <div className={styles.column}>Protocol</div>
+              className={styles.horizontalScroll}
-              <div className={styles.column}>Usenet Delay</div>
+              scrollDirection={
-              <div className={styles.column}>Torrent Delay</div>
+                scrollDirections.HORIZONTAL
-              <div className={styles.tags}>Tags</div>
-            </div>
-
-            <div className={styles.delayProfiles}>
-              {
-                items.map((item, index) => {
-                  return (
-                    <DelayProfileDragSource
-                      key={item.id}
-                      tagList={tagList}
-                      {...item}
-                      {...otherProps}
-                      index={index}
-                      isDragging={isDragging}
-                      isDraggingUp={isDraggingUp}
-                      isDraggingDown={isDraggingDown}
-                      onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
-                    />
-                  );
-                })
               }
+              autoFocus={false}
+            >
+              <div>
+                <div className={styles.delayProfilesHeader}>
+                  <div className={styles.column}>Protocol</div>
+                  <div className={styles.column}>Usenet Delay</div>
+                  <div className={styles.column}>Torrent Delay</div>
+                  <div className={styles.tags}>Tags</div>
+                </div>
 
-              <DelayProfileDragPreview
+                <div className={styles.delayProfiles}>
-                width={width}
+                  {
-              />
+                    items.map((item, index) => {
-            </div>
+                      return (
-
+                        <DelayProfileDragSource
-            {
+                          key={item.id}
-              defaultProfile &&
+                          tagList={tagList}
-                <div>
+                          {...item}
-                  <DelayProfile
+                          {...otherProps}
-                    tagList={tagList}
+                          index={index}
-                    isDragging={false}
+                          isDragging={isDragging}
-                    onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
+                          isDraggingUp={isDraggingUp}
-                    {...defaultProfile}
+                          isDraggingDown={isDraggingDown}
+                          onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
+                        />
+                      );
+                    })
+                  }
+
+                  <DelayProfileDragPreview
+                    width={width}
                   />
                 </div>
-            }
+
+                {
+                  defaultProfile ?
+                    <div>
+                      <DelayProfile
+                        tagList={tagList}
+                        isDragging={false}
+                        onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
+                        {...defaultProfile}
+                      />
+                    </div> :
+                    null
+                }
+              </div>
+            </Scroller>
 
             <div className={styles.addDelayProfile}>
               <Link