Web: Files: fixed section-body styles

packages/client/src/HOCs/withLoader.js

@@ -1,14 +1,8 @@
 import React, { useEffect, useState } from "react";
-import styled from "styled-components";
 import { observer, inject } from "mobx-react";
 import { isMobile } from "react-device-detect";
 import Loaders from "@docspace/common/components/Loaders";
 
-const StyledRowLoaders = styled(Loaders.Rows)`
-  padding-left: 16px;
-  width: calc(100% - 33px) !important;
-`;
-
 const pathname = window.location.pathname.toLowerCase();
 const isEditor = pathname.indexOf("doceditor") !== -1;
 const isGallery = pathname.indexOf("form-gallery") !== -1;
@@ -70,7 +64,7 @@ const withLoader = (WrappedComponent) => (Loader) => {
       ) : viewAs === "table" ? (
         <Loaders.TableLoader />
       ) : (
-        <StyledRowLoaders />
+        <Loaders.Rows />
       )
     ) : (
       <WrappedComponent {...props} />

packages/common/components/Section/index.js

@@ -364,7 +364,6 @@ class Section extends React.Component {
                           viewAs={viewAs}
                           isHomepage={isHomepage}
                           settingsStudio={settingsStudio}
-                          withPaging={withPaging}
                           selectoRef={this.selectoRef}
                         >
                           {isMobile && (

packages/common/components/Section/sub-components/section-body.js

@@ -35,23 +35,13 @@ const settingsStudioStyles = css`
         `
       : css`
           @media ${tablet} {
-            padding: ${({ viewAs, withPaging }) =>
-              viewAs === "tile"
-                ? "19px 0 16px 24px"
-                : withPaging
-                ? "19px 0 16px 24px"
-                : "19px 0 16px 8px"};
-          }
+            padding: 19px 0 16px 24px;
         `}
 `;
 
 const paddingStyles = css`
-  padding: ${({ viewAs, withPaging }) =>
-    viewAs === "row"
-      ? withPaging
-        ? "19px 3px 16px 16px"
-        : "19px 3px 16px 0px"
-      : "19px 3px 16px 20px"};
+  padding: ${({ viewAs }) =>
+    viewAs === "row" ? "19px 3px 16px 16px" : "19px 3px 16px 20px"};
 
   ${settingsStudioStyles};
 
@@ -231,7 +221,6 @@ class SectionBody extends React.Component {
       isDesktop,
       isHomepage,
       settingsStudio,
-      withPaging,
     } = this.props;
 
     const focusProps = autoFocus
@@ -251,7 +240,6 @@ class SectionBody extends React.Component {
         isLoaded={isLoaded}
         isDesktop={isDesktop}
         settingsStudio={settingsStudio}
-        withPaging={withPaging}
         className="section-body"
       >
         {withScroll ? (
@@ -292,7 +280,6 @@ class SectionBody extends React.Component {
         isLoaded={isLoaded}
         isDesktop={isDesktop}
         settingsStudio={settingsStudio}
-        withPaging={withPaging}
       >
         {withScroll ? (
           !isMobileOnly ? (

packages/components/infinite-loader/StyledInfiniteLoader.js

@@ -31,11 +31,10 @@ const StyledScroll = styled.div`
 
 const rowStyles = css`
   .row-list-item {
-    padding-left: 16px;
-    width: calc(100% - 33px) !important;
+    width: calc(100% - 17px) !important;
 
     @media ${mobile} {
-      width: calc(100% - 24px) !important;
+      width: calc(100% - 16px) !important;
     }
   }
 `;