fix(layouts): and fix thumbnail in touch and update migration guide for 3.8 release (#4052)

platform/ui/src/components/Thumbnail/Thumbnail.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { useDrag } from 'react-dnd';
@@ -35,6 +35,19 @@ const Thumbnail = ({
     },
   });
 
+  const [lastTap, setLastTap] = useState(0);
+
+  const handleTouchEnd = e => {
+    const currentTime = new Date().getTime();
+    const tapLength = currentTime - lastTap;
+    if (tapLength < 300 && tapLength > 0) {
+      onDoubleClick(e);
+    } else {
+      onClick(e);
+    }
+    setLastTap(currentTime);
+  };
+
   return (
     <div
       className={classnames(
@@ -45,6 +58,7 @@ const Thumbnail = ({
       data-cy={`study-browser-thumbnail`}
       onClick={onClick}
       onDoubleClick={onDoubleClick}
+      onTouchEnd={handleTouchEnd}
       role="button"
       tabIndex="0"
     >
@@ -56,9 +70,6 @@ const Thumbnail = ({
               ? 'border-primary-light border-2'
               : 'border-secondary-light border hover:border-blue-300'
           )}
-          style={{
-            margin: isActive ? '0' : '1px',
-          }}
         >
           {imageSrc ? (
             <img