fix: fix carousel and scrollbars for edge browser (#952)

src/routes/_components/ShortcutHelpInfo.html

@@ -40,6 +40,7 @@
   .shortcut-help-info {
     overflow-y: scroll;
     scrollbar-width: none;
+    -ms-overflow-style: none;
   }
   .shortcut-help-info::-webkit-scrollbar {
     display: none;

src/routes/_components/dialog/components/MediaDialog.html

@@ -95,6 +95,7 @@
     width: 100%;
     flex: 1;
     scrollbar-width: none;
+    -ms-overflow-style: none;
   }
 
   .media-scroll::-webkit-scrollbar {
@@ -180,7 +181,7 @@
   import { oncreate as onCreateDialog } from '../helpers/onCreateDialog'
   import debounce from 'lodash-es/debounce'
   import times from 'lodash-es/times'
-  import { smoothScroll } from '../../../_utils/smoothScroll'
+  import { smoothScroll, hasNativeSmoothScroll } from '../../../_utils/smoothScroll'
   import { doubleRAF } from '../../../_utils/doubleRAF'
   import { store } from '../../../_store/store'
   import {
@@ -277,7 +278,13 @@
         let { scrollWidth } = scroller
         let scrollLeft = Math.floor(scrollWidth * (scrolledItem / length))
         if (smooth) {
-          smoothScroll(scroller, scrollLeft, true)
+          if (!hasNativeSmoothScroll && 'StyleMedia' in window) {
+            // Edge has a weird bug where it changes the height if we try to
+            // smooth scroll, so disable smooth scrolling
+            scroller.scrollLeft = scrollLeft
+          } else {
+            smoothScroll(scroller, scrollLeft, true)
+          }
         } else {
           scroller.scrollLeft = scrollLeft
         }

src/routes/_utils/smoothScroll.js

@@ -59,10 +59,10 @@ function testSupportsSmoothScroll () {
   return supports
 }
 
-const smoothScrollSupported = process.browser && testSupportsSmoothScroll()
+export const hasNativeSmoothScroll = process.browser && testSupportsSmoothScroll()
 
 export function smoothScroll (node, topOrLeft, horizontal) {
-  if (smoothScrollSupported) {
+  if (hasNativeSmoothScroll) {
     return node.scrollTo({
       [horizontal ? 'left' : 'top']: topOrLeft,
       behavior: 'smooth'