From 7c7f6ac182186dc824fec4e35112f9bdb1d58ce7 Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Sat, 5 Oct 2024 13:47:48 +0200
Subject: [PATCH] Try to get browsersteps working on mobile better

---
 .../styles/scss/parts/_browser-steps.scss     | 38 ++++++++++------
 changedetectionio/static/styles/styles.css    | 45 ++++++++++---------
 2 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/changedetectionio/static/styles/scss/parts/_browser-steps.scss b/changedetectionio/static/styles/scss/parts/_browser-steps.scss
index a5a03de6..29e8de0e 100644
--- a/changedetectionio/static/styles/scss/parts/_browser-steps.scss
+++ b/changedetectionio/static/styles/scss/parts/_browser-steps.scss
@@ -42,26 +42,36 @@
 
 
 #browser-steps .flex-wrapper {
-  display: flex;
-  flex-flow: row;
-  height: 70vh;
   font-size: 80%;
+
+  @media screen and (min-width: 800px) {
+    display: flex;
+    flex-flow: row;
+    height: 70vh;
+    #browser-steps-fieldlist {
+      flex-grow: 0; /* Don't allow it to grow */
+      flex-shrink: 0; /* Don't allow it to shrink */
+      flex-basis: auto; /* Base width is determined by the content */
+      max-width: 400px; /* Set a max width to prevent overflow */
+      padding-left: 1rem;
+      overflow-y: scroll;
+    }
+
+
+    #browser-steps-ui {
+      flex-grow: 1; /* Allow it to grow and fill the available space */
+      flex-shrink: 1; /* Allow it to shrink if needed */
+      flex-basis: 0; /* Start with 0 base width so it stretches as much as possible */
+    }
+  }
+
   #browser-steps-ui {
-    flex-grow: 1;      /* Allow it to grow and fill the available space */
-    flex-shrink: 1;    /* Allow it to shrink if needed */
-    flex-basis: 0;     /* Start with 0 base width so it stretches as much as possible */
     background-color: #eee;
     border-radius: 5px;
-
   }
 
-  #browser-steps-fieldlist {
-    flex-grow: 0;      /* Don't allow it to grow */
-    flex-shrink: 0;    /* Don't allow it to shrink */
-    flex-basis: auto;  /* Base width is determined by the content */
-    max-width: 400px;  /* Set a max width to prevent overflow */
-    padding-left: 1rem;
-    overflow-y: scroll;
+  #browser-steps-field-list {
+    text-align: center;
   }
 }
 
diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css
index 7bc04082..cc6d7749 100644
--- a/changedetectionio/static/styles/styles.css
+++ b/changedetectionio/static/styles/styles.css
@@ -47,30 +47,35 @@
       display: none; }
 
 #browser-steps .flex-wrapper {
-  display: flex;
-  flex-flow: row;
-  height: 70vh;
   font-size: 80%; }
+  @media screen and (min-width: 800px) {
+    #browser-steps .flex-wrapper {
+      display: flex;
+      flex-flow: row;
+      height: 70vh; }
+      #browser-steps .flex-wrapper #browser-steps-fieldlist {
+        flex-grow: 0;
+        /* Don't allow it to grow */
+        flex-shrink: 0;
+        /* Don't allow it to shrink */
+        flex-basis: auto;
+        /* Base width is determined by the content */
+        max-width: 400px;
+        /* Set a max width to prevent overflow */
+        padding-left: 1rem;
+        overflow-y: scroll; }
+      #browser-steps .flex-wrapper #browser-steps-ui {
+        flex-grow: 1;
+        /* Allow it to grow and fill the available space */
+        flex-shrink: 1;
+        /* Allow it to shrink if needed */
+        flex-basis: 0;
+        /* Start with 0 base width so it stretches as much as possible */ } }
   #browser-steps .flex-wrapper #browser-steps-ui {
-    flex-grow: 1;
-    /* Allow it to grow and fill the available space */
-    flex-shrink: 1;
-    /* Allow it to shrink if needed */
-    flex-basis: 0;
-    /* Start with 0 base width so it stretches as much as possible */
     background-color: #eee;
     border-radius: 5px; }
-  #browser-steps .flex-wrapper #browser-steps-fieldlist {
-    flex-grow: 0;
-    /* Don't allow it to grow */
-    flex-shrink: 0;
-    /* Don't allow it to shrink */
-    flex-basis: auto;
-    /* Base width is determined by the content */
-    max-width: 400px;
-    /* Set a max width to prevent overflow */
-    padding-left: 1rem;
-    overflow-y: scroll; }
+  #browser-steps .flex-wrapper #browser-steps-field-list {
+    text-align: center; }
 
 /*  this is duplicate :( */
 #browsersteps-selector-wrapper {