feat(ObjectPreview): pass isMobile props

components/core/DataView.js

@@ -858,6 +858,7 @@ export default class DataView extends React.Component {
                           onAction={this.props.onAction}
                           isOwner={this.props.isOwner}
                           isSelected={i in this.state.checked}
+                          isMobile={this.props.isMobile}
                         />
                         <span css={STYLES_MOBILE_HIDDEN} style={{ pointerEvents: "auto" }}>
                           {numChecked || this.state.hover === i || this.state.menu === each.id ? (

components/core/Filter/Content.js

@@ -16,7 +16,7 @@ const STYLES_DATAVIEWER_WRAPPER = (theme) => css`
   min-height: 100vh;
   padding: calc(20px + ${theme.sizes.filterNavbar}px) 24px 44px;
   @media (max-width: ${theme.sizes.mobile}px) {
-    padding: 31px 16px 44px;
+    padding: calc(31px + ${theme.sizes.filterNavbar}px) 16px 44px;
   }
 `;
 
@@ -36,7 +36,7 @@ const STYLES_UPLOAD_BUTTON = (theme) => css`
   box-shadow: ${theme.shadow.lightSmall};
 `;
 
-export function Content({ viewer, onAction, page, ...props }) {
+export function Content({ viewer, onAction, isMobile, page, ...props }) {
   const [{ filterState }] = useFilterContext();
   const { objects } = filterState;
 
@@ -49,7 +49,12 @@ export function Content({ viewer, onAction, page, ...props }) {
   return (
     <div css={STYLES_DATAVIEWER_WRAPPER} {...props}>
       {objects.length > 0 ? (
-        <TagsOnboarding onAction={onAction} viewer={viewer} isActive={isOnboardingActive}>
+        <TagsOnboarding
+          onAction={onAction}
+          viewer={viewer}
+          isActive={isOnboardingActive}
+          isMobile={isMobile}
+        >
           <DataView
             key="scene-files-folder"
             /** TODO(amine): when updating filters, update isOwner prop */
@@ -58,6 +63,7 @@ export function Content({ viewer, onAction, page, ...props }) {
             onAction={onAction}
             viewer={viewer}
             page={page}
+            isMobile={isMobile}
             view="grid"
           />
         </TagsOnboarding>

components/core/ObjectPreview/LinkObjectPreview.js

@@ -75,7 +75,7 @@ export default function LinkObjectPreview({ file, ratio, ...props }) {
       href={file.url}
       target="_blank"
       rel="noreferrer"
-      style={{ position: "relative", zIndex: 2 }}
+      style={{ position: "relative" }}
       onClick={(e) => e.stopPropagation()}
     >
       <div css={STYLES_TAG_CONTAINER}>

components/core/Upload/Popup.js

@@ -28,7 +28,6 @@ const STYLES_POPUP_WRAPPER = (theme) => css`
   z-index: ${theme.zindex.tooltip};
   @media (max-width: ${theme.sizes.mobile}px) {
     right: 50%;
-    transform: translateX(50%);
   }
 `;
 
@@ -164,7 +163,7 @@ const useUploadSummary = ({ fileLoading }) =>
     };
   }, [fileLoading]);
 
-export function Popup() {
+export function Popup({ isMobile }) {
   const {
     state: { isFinished, fileLoading },
     handlers: { resetUploadState },
@@ -184,7 +183,7 @@ export function Popup() {
       {popupState.isVisible ? (
         <motion.div
           css={STYLES_POPUP_WRAPPER}
-          initial={{ opacity: 0, y: 0 }}
+          initial={{ opacity: 0, y: 0, x: "50%" }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: 10 }}
           onMouseEnter={handleOnMouseEnter}
@@ -211,7 +210,7 @@ export function Popup() {
               collapseUploadSummary={collapseUploadSummary}
             />
           </div>
-          <Show when={isHovered && isFinished}>
+          <Show when={isFinished && (isHovered || isMobile)}>
             <button
               css={STYLES_DISMISS_BUTTON}
               onClick={() => (hideUploadPopup(), resetUploadState())}

components/core/Upload/index.js

@@ -13,13 +13,13 @@ import DropIndicator from "~/components/core/Upload/DropIndicator";
 /* -------------------------------------------------------------------------------------------------
  * Root
  * -----------------------------------------------------------------------------------------------*/
-const Root = ({ children, data }) => {
+const Root = ({ children, data, isMobile }) => {
   return (
     <>
       {children}
       <Jumper data={data} />
       <ModalPortal>
-        <Popup />
+        <Popup isMobile={isMobile} />
         <DropIndicator data={data} />
       </ModalPortal>
     </>

scenes/SceneFilesFolder.js

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
-import * as Styles from "~/common/styles";
 
 import { css } from "@emotion/react";
 import { GlobalCarousel } from "~/components/system/components/GlobalCarousel";