mobile/tablet views were added

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsBar.js

@@ -5,10 +5,11 @@ import styled from "styled-components";
 import { Text } from "@docspace/components";
 import { StatusBadge } from "../../sub-components/StatusBadge";
 
+import { tablet } from "@docspace/components/utils/device";
+
 const BarWrapper = styled.div`
   width: 100%;
   max-width: 1200px;
-  min-width: 600px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -17,13 +18,21 @@ const BarWrapper = styled.div`
 
   background: #f8f9f9;
   border-radius: 3px;
+  flex-wrap: wrap;
 `;
 
 const BarItem = styled.div`
   box-sizing: border-box;
-  width: 257.25px;
   height: 76px;
   padding: 16px;
+  flex-basis: 25%;
+
+  @media ${tablet} {
+    flex-basis: 50%;
+  }
+  @media (max-width: 440px) {
+    flex-basis: 100%;
+  }
 `;
 
 const BarItemHeader = ({ children }) => (

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js

@@ -10,19 +10,25 @@ import Headline from "@docspace/common/components/Headline";
 import IconButton from "@docspace/components/icon-button";
 import { Hint } from "../../styled-components";
 
-import { tablet } from "@docspace/components/utils/device";
+import { tablet, mobile } from "@docspace/components/utils/device";
 
 import TableGroupMenu from "@docspace/components/table-container/TableGroupMenu";
-import { isMobile, mobile, isMobileOnly } from "react-device-detect";
+import { isMobile, isMobileOnly } from "react-device-detect";
 import DropDownItem from "@docspace/components/drop-down-item";
 
 const HeaderContainer = styled.div`
   position: relative;
   display: flex;
   align-items: center;
-  width: 100vw;
-  min-height: 69px;
-  height: 69px;
+  width: 100%;
+  min-height: 70px;
+  flex-wrap: wrap;
+
+  ${() =>
+    isMobile &&
+    css`
+      margin-bottom: 11px;
+    `}
 
   .arrow-button {
     margin-right: 18.5px;
@@ -30,6 +36,7 @@ const HeaderContainer = styled.div`
     @media ${tablet} {
       padding: 8px 0 8px 8px;
       margin-left: -8px;
+      margin-right: 18.5px;
     }
   }
 
@@ -38,6 +45,12 @@ const HeaderContainer = styled.div`
     margin-right: 16px;
   }
 
+  .smallGroupAction {
+    margin-top: -49px;
+    height: 48px;
+    margin-left: -17px;
+  }
+
   .table-container_group-menu {
     margin: 0 0 0 -20px;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
@@ -45,7 +58,7 @@ const HeaderContainer = styled.div`
     width: 100%;
     height: 69px;
 
-    /* @media ${tablet} {
+    @media ${tablet} {
       height: 60px;
       margin: 0 0 0 -16px;
       width: calc(100% + 32px);
@@ -69,7 +82,7 @@ const HeaderContainer = styled.div`
       height: 52px;
       margin: 0 0 0 -16px;
       width: calc(100% + 32px);
-    `} */
+    `}
   }
 `;
 
@@ -119,13 +132,45 @@ const HistoryHeader = (props) => {
     </>
   );
 
+  const NavigationHeader = () => (
+    <>
+      <IconButton
+        iconName={ArrowPathReactSvgUrl}
+        size="17"
+        isFill={true}
+        onClick={onBack}
+        className="arrow-button"
+      />
+      <Headline type="content" truncate={true} className="headline">
+        History
+      </Headline>
+      <Hint backgroundColor="#F8F9F9" color="#555F65">
+        Deliveries are automatically deleted after 15 days
+      </Hint>
+    </>
+  );
+
   useEffect(() => {
     return emptyCheckedIds;
   }, []);
 
   return (
     <HeaderContainer>
-      {isHeaderVisible ? (
+      {isMobileOnly ? (
+        <>
+          {isHeaderVisible && (
+            <TableGroupMenu
+              checkboxOptions={menuItems}
+              onChange={handleGroupSelection}
+              isIndeterminate={true}
+              headerMenu={headerMenu}
+              withoutInfoPanelToggler
+              className="smallGroupAction"
+            />
+          )}
+          <NavigationHeader />
+        </>
+      ) : isHeaderVisible ? (
         <TableGroupMenu
           checkboxOptions={menuItems}
           onChange={handleGroupSelection}
@@ -134,21 +179,7 @@ const HistoryHeader = (props) => {
           withoutInfoPanelToggler
         />
       ) : (
-        <>
-          <IconButton
-            iconName={ArrowPathReactSvgUrl}
-            size="17"
-            isFill={true}
-            onClick={onBack}
-            className="arrow-button"
-          />
-          <Headline type="content" truncate={true} className="headline">
-            History
-          </Headline>
-          <Hint backgroundColor="#F8F9F9" color="#555F65">
-            Deliveries are automatically deleted after 15 days
-          </Hint>
-        </>
+        <NavigationHeader />
       )}
     </HeaderContainer>
   );

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/index.js

@@ -1,10 +1,15 @@
 import React, { useEffect } from "react";
+import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 
 import { isMobile } from "react-device-detect";
 
 import RowContainer from "@docspace/components/row-container";
-import { HistoryRow } from "./HistoryRow";
+import HistoryRow from "./HistoryRow";
+
+const StyledRowContainer = styled(RowContainer)`
+  margin-top: 11px;
+`;
 
 const HistoryRowView = (props) => {
   const { historyWebhooks, sectionWidth, viewAs, setViewAs } = props;
@@ -20,11 +25,11 @@ const HistoryRowView = (props) => {
   }, [sectionWidth]);
 
   return (
-    <RowContainer useReactWindow={false}>
+    <StyledRowContainer useReactWindow={false}>
       {historyWebhooks.map((item) => (
         <HistoryRow key={item.id} historyItem={item} sectionWidth={sectionWidth} />
       ))}
-    </RowContainer>
+    </StyledRowContainer>
   );
 };
 

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/index.js

@@ -6,9 +6,11 @@ import WebhooksTable from "./sub-components/WebhooksTable";
 
 import { inject, observer } from "mobx-react";
 
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { WebhookConfigsLoader } from "./sub-components/Loaders";
 
+import { isMobile } from "@docspace/components/utils/device";
+
 const MainWrapper = styled.div`
   width: 100%;
 
@@ -18,6 +20,17 @@ const MainWrapper = styled.div`
   }
 `;
 
+const StyledCreateButton = styled(Button)`
+  ${() =>
+    isMobile() &&
+    css`
+      position: fixed;
+      z-index: 2;
+      width: calc(100% - 32px);
+      bottom: 16px;
+    `}
+`;
+
 const Webhooks = (props) => {
   const { state, loadWebhooks, addWebhook, isWebhookExist, isWebhooksEmpty, setDocumentTitle } =
     props;
@@ -45,7 +58,12 @@ const Webhooks = (props) => {
   ) : state === "success" ? (
     <MainWrapper>
       <WebhookInfo />
-      <Button label="Create webhook" primary size="small" onClick={openModal} />
+      <StyledCreateButton
+        label="Create webhook"
+        primary
+        size={isMobile() ? "normal" : "small"}
+        onClick={openModal}
+      />
       {!isWebhooksEmpty && <WebhooksTable />}
       <WebhookDialog
         visible={isModalOpen}

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/WebhookRowContent.js

@@ -15,6 +15,10 @@ const StyledRowContent = styled(RowContent)`
     height: 100%;
     width: 100%;
   }
+
+  .mainIcons {
+    min-width: 76px;
+  }
 `;
 
 const ContentWrapper = styled.div`
@@ -29,6 +33,7 @@ const ToggleButtonWrapper = styled.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  margin-left: -52px;
 `;
 
 const FlexWrapper = styled.div`

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksRowView/index.js

@@ -1,4 +1,5 @@
 import React, { useEffect } from "react";
+import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 
 import { isMobile } from "react-device-detect";
@@ -7,6 +8,10 @@ import RowContainer from "@docspace/components/row-container";
 
 import { WebhookRow } from "./WebhookRow";
 
+const StyledRowContainer = styled(RowContainer)`
+  margin-top: 16px;
+`;
+
 const WebhooksRowView = (props) => {
   const { webhooks, toggleEnabled, deleteWebhook, editWebhook, sectionWidth, viewAs, setViewAs } =
     props;
@@ -22,7 +27,7 @@ const WebhooksRowView = (props) => {
   }, [sectionWidth]);
 
   return (
-    <RowContainer useReactWindow={false}>
+    <StyledRowContainer useReactWindow={false}>
       {webhooks.map((webhook) => (
         <WebhookRow
           key={webhook.id}
@@ -33,7 +38,7 @@ const WebhooksRowView = (props) => {
           editWebhook={editWebhook}
         />
       ))}
-    </RowContainer>
+    </StyledRowContainer>
   );
 };