InfoPanel: fixed some bugs with tablet view and header toggle

packages/asc-web-common/components/Section/sub-components/info-panel-header.js

@@ -6,6 +6,7 @@ import { inject, observer } from "mobx-react";
 import PropTypes from "prop-types";
 import React from "react";
 import styled from "styled-components";
+import { isMobile } from "react-device-detect";
 
 const StyledInfoPanelHeader = styled.div`
   width: 100%;
@@ -51,7 +52,7 @@ const StyledInfoPanelToggleWrapper = styled.div`
 `;
 StyledInfoPanelToggleWrapper.defaultProps = { theme: Base };
 
-const SubInfoPanelHeader = ({ children, setIsVisible }) => {
+const SubInfoPanelHeader = ({ children, setIsVisible, viewAs }) => {
   const content = children?.props?.children;
 
   const closeInfoPanel = () => setIsVisible(false);
@@ -65,15 +66,17 @@ const SubInfoPanelHeader = ({ children, setIsVisible }) => {
         isRootFolder={true}
         isInfoPanelVisible={true}
       >
-        <div className="info-panel-toggle-bg">
-          <IconButton
-            className="info-panel-toggle"
-            iconName="images/panel.react.svg"
-            size="16"
-            isFill={true}
-            onClick={closeInfoPanel}
-          />
-        </div>
+        {(viewAs === "row" || isMobile) && (
+          <div className="info-panel-toggle-bg">
+            <IconButton
+              className="info-panel-toggle"
+              iconName="images/panel.react.svg"
+              size="16"
+              isFill={true}
+              onClick={closeInfoPanel}
+            />
+          </div>
+        )}
       </StyledInfoPanelToggleWrapper>
     </StyledInfoPanelHeader>
   );

packages/asc-web-common/components/Section/sub-components/info-panel.js

@@ -22,15 +22,7 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({
   background: ${(props) => props.theme.infoPanel.blurColor};
   backdrop-filter: blur(3px);
 
-  @media ${tablet} {
-    z-index: 309;
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-  }
-
+  // @media ${tablet} {
   ${(props) =>
     (props.isRowView || isMobile) &&
     css`
@@ -55,14 +47,7 @@ const StyledInfoPanel = styled.div`
     padding-bottom: 20px;
   }
 
-  @media ${tablet} {
-    position: absolute;
-    border: none;
-    right: 0;
-    width: 480px;
-    max-width: calc(100vw - 69px);
-  }
-
+  // @media ${tablet} {
   ${(props) =>
     (props.isRowView || isMobile) &&
     css`
@@ -148,7 +133,11 @@ const InfoPanel = ({ children, isVisible, setIsVisible, viewAs }) => {
       document.addEventListener("mousedown", onMouseDown);
 
     window.onpopstate = () => {
-      if (!isDesktop() && isVisible) closeInfoPanel();
+      if (
+        (viewAs === "row" || isTablet() || isMobile || isMobileUtils()) &&
+        isVisible
+      )
+        closeInfoPanel();
     };
 
     return () => document.removeEventListener("mousedown", onMouseDown);