feat(chore): prevent overscrolling

On mobile devices when scrolling inside a dropdown menu, scrolling table, segment, container, etc. reaching the top of the scrolling area, the browsers will reload the page "pull to refresh".

This PR prevents such behavior on selected components, where an accidental refresh shouldnt be wanted.

Author: lubber-de

src/definitions/collections/table.less

@@ -399,6 +399,7 @@
   .ui.scrolling.table > tbody {
     display: block;
     overflow-y: scroll;
+    overscroll-behavior: @overscrollBehavior;
     scrollbar-width: thin;  /* Firefox */
     & > tr {
       display: table;
@@ -498,6 +499,7 @@
   .ui.overflowing.table {
     display: block;
     overflow: auto;
+    overscroll-behavior: @overscrollBehavior;
   }
   @media only screen and (min-width: @tabletBreakpoint) {
     & when (@variationTableOverflowingShort) {

src/definitions/elements/container.less

@@ -189,6 +189,7 @@
   ---------------*/
   .ui.scrolling.container {
     overflow: auto;
+    overscroll-behavior: @overscrollBehavior;
   }
   @media only screen and (max-width : @largestMobileScreen) {
     & when (@variationContainerScrollingShort) {

src/definitions/elements/segment.less

@@ -793,6 +793,7 @@
   ---------------*/
   .ui.scrolling.segment {
     overflow: auto;
+    overscroll-behavior: @overscrollBehavior;
   }
   @media only screen and (max-width : @largestMobileScreen) {
     & when (@variationSegmentScrollingShort) {

src/definitions/modules/dropdown.less

@@ -448,6 +448,7 @@ select.ui.dropdown {
   .ui.selection.dropdown .menu {
     overflow-x: hidden;
     overflow-y: auto;
+    overscroll-behavior: @overscrollBehavior;
     backface-visibility: hidden;
     -webkit-overflow-scrolling: touch;
     border-top-width: 0 !important;
@@ -765,6 +766,7 @@ select.ui.dropdown {
   .ui.search.dropdown .menu {
     overflow-x: hidden;
     overflow-y: auto;
+    overscroll-behavior: @overscrollBehavior;
     backface-visibility: hidden;
     -webkit-overflow-scrolling: touch;
   }
@@ -1319,11 +1321,7 @@ select.ui.dropdown {
   .ui.dropdown .scrolling.menu {
     overflow-x: hidden;
     overflow-y: auto;
-  }
-
-  .ui.scrolling.dropdown .menu {
-    overflow-x: hidden;
-    overflow-y: auto;
+    overscroll-behavior: @overscrollBehavior;
     backface-visibility: hidden;
     -webkit-overflow-scrolling: touch;
     min-width: 100% !important;
@@ -1332,13 +1330,10 @@ select.ui.dropdown {
 
   .ui.dropdown .scrolling.menu {
     position: static;
-    overflow-y: auto;
     border: none;
     box-shadow: none !important;
     border-radius: 0 0 @floatingMenuBorderRadius @floatingMenuBorderRadius !important;
     margin: 0 !important;
-    min-width: 100% !important;
-    width: auto !important;
     border-top: @menuBorder;
   }
   .ui.scrolling.dropdown .menu .item.item.item,
@@ -1500,6 +1495,7 @@ select.ui.dropdown {
     .ui.simple.selection.dropdown > .menu > .item:active > .menu,
     .ui.simple.selection.dropdown .menu .item:hover > .menu {
       overflow: auto;
+      overscroll-behavior: @overscrollBehavior;
     }
   }
   .ui.simple.dropdown > .menu > .item:active > .left.menu,
@@ -1528,6 +1524,7 @@ select.ui.dropdown {
     .ui.simple.scrolling.dropdown:hover > .menu {
       overflow-x: hidden;
       overflow-y: auto;
+      overscroll-behavior: @overscrollBehavior;
     }
   }
 }

src/definitions/modules/flyout.less

@@ -100,22 +100,25 @@
   line-height: @contentLineHeight;
   padding: @contentPadding;
   background: @contentBackground;
+  &.scrolling when(@variationFlyoutScrolling) {
+    overflow: auto;
+    overscroll-behavior: @overscrollBehavior;
+  }
 }
 .ui.flyout.left > .content,
 .ui.flyout.right > .content {
   min-height: @contentMinHeight;
 }
+& when(@variationFlyoutScrolling) {
+  .ui.flyout.left > .scrolling.content,
+  .ui.flyout.right > .scrolling.content {
+    max-height: @scrollingContentMaxHeight;
+  }
 
-.ui.flyout.left > .scrolling.content,
-.ui.flyout.right > .scrolling.content{
-  max-height: @scrollingContentMaxHeight;
-  overflow: auto;
-}
-
-.ui.flyout.top > .scrolling.content,
-.ui.flyout.bottom > .scrolling.content{
-  max-height: @scrollingContentMaxHeightTopBottom;
-  overflow: auto;
+  .ui.flyout.top > .scrolling.content,
+  .ui.flyout.bottom > .scrolling.content {
+    max-height: @scrollingContentMaxHeightTopBottom;
+  }
 }
 
 & when (@variationFlyoutActions) {
@@ -520,7 +523,7 @@ body.pushable > .pusher {
   --------------------*/
 
   & when (@variationFlyoutColumnWidth) {
-    
+
     /* Sizing Combinations */
 
     .ui[class*="one wide"].flyout:not(.fullscreen) {
@@ -637,7 +640,7 @@ body.pushable > .pusher {
   .ui.visible.overlay.flyout {
     transform: translate3d(0%, 0, 0);
   }
-  
+
   /* End - Pusher */
   .ui.visible.overlay.flyout ~ .fixed,
   .ui.visible.overlay.flyout ~ .pusher {

src/definitions/modules/modal.less

@@ -453,6 +453,7 @@
   }
   .scrolling.dimmable.dimmed > .dimmer {
     overflow: auto;
+    overscroll-behavior: @overscrollBehavior;
     -webkit-overflow-scrolling: touch;
   }
   .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
@@ -467,6 +468,7 @@
   /* Undetached Scrolling */
   .scrolling.undetached.dimmable.dimmed {
     overflow: auto;
+    overscroll-behavior: @overscrollBehavior;
     -webkit-overflow-scrolling: touch;
   }
   .scrolling.undetached.dimmable.dimmed > .dimmer {
@@ -482,6 +484,7 @@
   .ui.modal > .scrolling.content {
     max-height: @scrollingContentMaxHeight;
     overflow: auto;
+    overscroll-behavior: @overscrollBehavior;
   }
 }
 

src/definitions/modules/search.less

@@ -403,6 +403,7 @@
       .ui.search.short > .results {
     overflow-x: hidden;
     overflow-y: auto;
+    overscroll-behavior: @overscrollBehavior;
     backface-visibility: hidden;
     -webkit-overflow-scrolling: touch;
   }

src/definitions/modules/sidebar.less

@@ -41,6 +41,7 @@
   border-radius: 0 !important;
   margin: 0 !important;
   overflow-y: auto !important;
+  overscroll-behavior: @overscrollBehavior;
   z-index: @topLayer;
 }
 

src/themes/default/elements/container.variables

@@ -51,13 +51,6 @@
 @computerVeryRelaxedGridWidth: e(%("calc(%d + %d)", @computerWidth, @veryRelaxedGridGutterWidth));
 @largeMonitorVeryRelaxedGridWidth: e(%("calc(%d + %d)", @largeMonitorWidth, @veryRelaxedGridGutterWidth));
 
-/*-------------------
-       Scrolling
---------------------*/
-@scrollingMobileMaxHeight: 15em;
-@scrollingTabletMaxHeight: 18em;
-@scrollingComputerMaxHeight: 24em;
-@scrollingWidescreenMaxHeight: 30em;
 
 /*-------------------
        Types

src/themes/default/elements/segment.variables

@@ -154,10 +154,3 @@
 ;
 @tertiaryInvertedColor: @invertedMutedTextColor;
 
-/*-------------------
-       Scrolling
---------------------*/
-@scrollingMobileMaxHeight: 15em;
-@scrollingTabletMaxHeight: 18em;
-@scrollingComputerMaxHeight: 24em;
-@scrollingWidescreenMaxHeight: 30em;