pullToRefresh adjustments - fixing scrolling hijacking (#15644)

* increase scorllable area

* fix

* fix

* ..

* adjustments

* revert previous wannabe fixes

* revert previous wannabe fixes

* revert previous wannabe fixes

app/assets/javascripts/lib/pulltorefresh.js

@@ -22,7 +22,7 @@
     distThreshold: 60,
     distMax: 80,
     distReload: 50,
-    distIgnore: 0,
+    distIgnore: 10,
     bodyOffset: 20,
     mainElement: 'body',
     triggerElement: 'body',
@@ -53,7 +53,8 @@
           document.getElementById('article-body') ||
           document.getElementById('listings-index-container')) &&
         !document.body.classList.contains('modal-open') &&
-        document.body.dataset.leftNavState !== 'open'
+        document.body.dataset.leftNavState !== 'open' &&
+        !document.getElementById('article-form')
       );
     },
   };

app/assets/stylesheets/views/article-form.scss

@@ -167,22 +167,23 @@
     position: sticky;
     top: 0;
     background: var(--base-0);
-    padding: 0 var(--content-padding-x);
+    padding: var(--su-2) var(--content-padding-x);
     padding-right: var(--toolbar-padding-right, 0);
     overflow-x: auto;
     flex-shrink: 0;
-
-    &::-webkit-scrollbar {
-      background: transparent;
-      height: 0;
-    }
-
     margin: calc(var(--content-padding-y) * -1)
       calc(var(--content-padding-x) * -1) var(--su-6)
       calc(var(--content-padding-x) * -1);
 
     > :first-child {
-      margin-left: calc(var(--su-2) * -1);
+      @media (min-width: $breakpoint-m) {
+        margin-left: calc(var(--su-2) * -1);
+      }
+    }
+
+    &::-webkit-scrollbar {
+      background: transparent;
+      height: 0;
     }
 
     @media (min-width: $breakpoint-m) {

app/javascript/article-form/components/Toolbar.jsx

@@ -10,13 +10,11 @@ export const Toolbar = ({ version, textAreaId }) => {
         version === 'v1' ? 'border-t-0' : ''
       }`}
     >
-      <div className="my-2">
-        {version === 'v1' ? (
-          <ImageUploader editorVersion={version} />
-        ) : (
-          <MarkdownToolbar textAreaId={textAreaId} />
-        )}
-      </div>
+      {version === 'v1' ? (
+        <ImageUploader editorVersion={version} />
+      ) : (
+        <MarkdownToolbar textAreaId={textAreaId} />
+      )}
     </div>
   );
 };

app/javascript/crayons/MarkdownToolbar/MarkdownToolbar.jsx

@@ -291,8 +291,8 @@ export const MarkdownToolbar = ({ textAreaId }) => {
           icon={icon}
           className={
             isOverflow
-              ? 'overflow-menu-btn hidden m:block mr-2'
-              : 'toolbar-btn m:hidden mr-2'
+              ? 'overflow-menu-btn hidden m:block mr-1'
+              : 'toolbar-btn m:hidden mr-1'
           }
           tabindex={isOverflow && index === 0 ? '0' : '-1'}
           onClick={() => insertSyntax(controlName)}
@@ -373,7 +373,7 @@ export const MarkdownToolbar = ({ textAreaId }) => {
           key: 'image-btn',
           variant: 'ghost',
           contentType: 'icon',
-          className: 'toolbar-btn formatter-btn',
+          className: 'toolbar-btn formatter-btn mr-1',
           tabindex: '-1',
         }}
       />