From 7b4e33e85f052b684229d986ce830d1acfe0ccf1 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Fri, 15 Jan 2021 17:24:55 -0800
Subject: [PATCH] Fixed: Managing display profiles on mobile

Fixes #1907

(cherry picked from commit c2fcdb445776d3898be7938216cf8ace65a1a236)
---
 .../Settings/Profiles/Delay/DelayProfiles.css | 11 +++
 .../Settings/Profiles/Delay/DelayProfiles.js  | 90 +++++++++++--------
 2 files changed, 62 insertions(+), 39 deletions(-)

diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfiles.css b/frontend/src/Settings/Profiles/Delay/DelayProfiles.css
index 3cf3e9020..efc0b14fa 100644
--- a/frontend/src/Settings/Profiles/Delay/DelayProfiles.css
+++ b/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%;
+  }
+}
diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfiles.js b/frontend/src/Settings/Profiles/Delay/DelayProfiles.js
index 9eef4b0fa..ed77a223f 100644
--- a/frontend/src/Settings/Profiles/Delay/DelayProfiles.js
+++ b/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}>
-              <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>
-
-            <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}
-                    />
-                  );
-                })
+            <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>
+                  <div className={styles.column}>Torrent Delay</div>
+                  <div className={styles.tags}>Tags</div>
+                </div>
 
-              <DelayProfileDragPreview
-                width={width}
-              />
-            </div>
-
-            {
-              defaultProfile &&
-                <div>
-                  <DelayProfile
-                    tagList={tagList}
-                    isDragging={false}
-                    onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
-                    {...defaultProfile}
+                <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}
+                        />
+                      );
+                    })
+                  }
+
+                  <DelayProfileDragPreview
+                    width={width}
                   />
                 </div>
-            }
+
+                {
+                  defaultProfile ?
+                    <div>
+                      <DelayProfile
+                        tagList={tagList}
+                        isDragging={false}
+                        onConfirmDeleteDelayProfile={onConfirmDeleteDelayProfile}
+                        {...defaultProfile}
+                      />
+                    </div> :
+                    null
+                }
+              </div>
+            </Scroller>
 
             <div className={styles.addDelayProfile}>
               <Link