revert b8f258bd97 55f06d39ab 6bfbec9334

packages/client/src/components/EmptyContainer/EmptyContainer.js

@@ -111,19 +111,15 @@ const EmptyFolderWrapper = styled.div`
         padding: 20px 42px 64px 11px !important;
       `}
 
-      
-  
-
     ${(props) =>
       (props.isEmptyPage || props.isEmptyFolderContainer) &&
+      props.sectionWidth <= size.smallTablet &&
       !isMobileOnly &&
       css`
-        @container section-container (width <= ${size.smallTablet}px) {
-          padding-left: 12px !important;
+        padding-left: 12px !important;
 
-          .empty-folder_link {
-            margin-bottom: 0 !important;
-          }
+        .empty-folder_link {
+          margin-bottom: 0 !important;
         }
       `}
   }
@@ -145,17 +141,19 @@ const EmptyFoldersContainer = (props) => {
     imageStyle,
     buttonStyle,
     isEmptyPage,
-
+    sectionWidth,
     isEmptyFolderContainer,
     className,
   } = props;
 
   return (
     <EmptyFolderWrapper
+      sectionWidth={sectionWidth}
       isEmptyPage={isEmptyPage}
       isEmptyFolderContainer={isEmptyFolderContainer}
     >
       <EmptyScreenContainer
+        sectionWidth={sectionWidth}
         className={classNames("empty-folder_container", className)}
         style={style}
         imageStyle={imageStyle}

packages/client/src/components/EmptyContainer/EmptyFolderContainer.js

@@ -24,7 +24,7 @@ const EmptyFolderContainer = ({
   parentId,
   linkStyles,
   isRooms,
-
+  sectionWidth,
   canCreateFiles,
   canInviteUsers,
   setIsEmptyPage,
@@ -176,6 +176,7 @@ const EmptyFolderContainer = ({
       }
       imageSrc={isRooms ? emptyScreenCorporateSvg : emptyScreenAltSvg}
       buttons={buttons}
+      sectionWidth={sectionWidth}
       isEmptyFolderContainer={true}
     />
   );

packages/client/src/components/EmptyContainer/RoomNoAccessContainer.js

@@ -23,7 +23,7 @@ const RoomNoAccessContainer = (props) => {
     setAlreadyFetchingRooms,
     categoryType,
     isEmptyPage,
-
+    sectionWidth,
     theme,
   } = props;
 
@@ -88,6 +88,7 @@ const RoomNoAccessContainer = (props) => {
   return (
     <EmptyContainer
       isEmptyPage={isEmptyPage}
+      sectionWidth={sectionWidth}
       imageStyle={{ marginRight: "20px" }}
       className="empty-folder_room-not-found"
       {...propsRoomNotFoundOrMoved}

packages/client/src/components/EmptyContainer/RootFolderContainer.js

@@ -68,7 +68,7 @@ const RootFolderContainer = (props) => {
     setIsEmptyPage,
     isVisitor,
     isCollaborator,
-
+    sectionWidth,
     setIsLoadedEmptyPage,
     security,
   } = props;
@@ -369,6 +369,7 @@ const RootFolderContainer = (props) => {
     <EmptyContainer
       headerText={headerText}
       isEmptyPage={isEmptyPage}
+      sectionWidth={sectionWidth}
       style={{ marginTop: 32 }}
       {...emptyFolderProps}
     />
@@ -377,8 +378,12 @@ const RootFolderContainer = (props) => {
 
 export default inject(
   ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
-    const { isDesktopClient, isEncryptionSupport, organizationName, theme } =
-      auth.settingsStore;
+    const {
+      isDesktopClient,
+      isEncryptionSupport,
+      organizationName,
+      theme,
+    } = auth.settingsStore;
 
     const {
       filter,

packages/client/src/components/EmptyContainer/index.js

@@ -21,7 +21,7 @@ const EmptyContainer = ({
   parentId,
   theme,
   setCreateRoomDialogVisible,
-
+  sectionWidth,
   isRoomNotFoundOrMoved,
   isGracePeriod,
   setInviteUsersWarningDialogVisible,
@@ -53,7 +53,12 @@ const EmptyContainer = ({
   };
 
   if (isRoomNotFoundOrMoved) {
-    return <RoomNoAccessContainer linkStyles={linkStyles} />;
+    return (
+      <RoomNoAccessContainer
+        linkStyles={linkStyles}
+        sectionWidth={sectionWidth}
+      />
+    );
   }
 
   return isFiltered ? (
@@ -63,9 +68,14 @@ const EmptyContainer = ({
       onCreate={onCreate}
       linkStyles={linkStyles}
       onCreateRoom={onCreateRoom}
+      sectionWidth={sectionWidth}
     />
   ) : (
-    <EmptyFolderContainer onCreate={onCreate} linkStyles={linkStyles} />
+    <EmptyFolderContainer
+      sectionWidth={sectionWidth}
+      onCreate={onCreate}
+      linkStyles={linkStyles}
+    />
   );
 };
 
@@ -79,8 +89,13 @@ export default inject(
   }) => {
     const { filter, roomsFilter, isErrorRoomNotAvailable } = filesStore;
 
-    const { authorType, search, withSubfolders, filterType, searchInContent } =
-      filter;
+    const {
+      authorType,
+      search,
+      withSubfolders,
+      filterType,
+      searchInContent,
+    } = filter;
     const {
       subjectId,
       filterValue,
@@ -91,15 +106,20 @@ export default inject(
       withoutTags,
     } = roomsFilter;
 
-    const { isPrivacyFolder, isRoomsFolder, isArchiveFolder } =
-      treeFoldersStore;
+    const {
+      isPrivacyFolder,
+      isRoomsFolder,
+      isArchiveFolder,
+    } = treeFoldersStore;
 
     const { isGracePeriod } = auth.currentTariffStatusStore;
 
     const isRooms = isRoomsFolder || isArchiveFolder;
 
-    const { setCreateRoomDialogVisible, setInviteUsersWarningDialogVisible } =
-      dialogsStore;
+    const {
+      setCreateRoomDialogVisible,
+      setInviteUsersWarningDialogVisible,
+    } = dialogsStore;
 
     const isFiltered = isRooms
       ? filterValue ||

packages/client/src/pages/Home/Section/Body/index.js

@@ -253,7 +253,7 @@ const SectionBodyContent = (props) => {
       {(context) =>
         isEmptyFilesList || null ? (
           <>
-            <EmptyContainer />
+            <EmptyContainer sectionWidth={context.sectionWidth} />
           </>
         ) : viewAs === "tile" ? (
           <>

packages/components/empty-screen-container/styled-empty-screen-container.js

@@ -45,11 +45,9 @@ const EmptyPageStyles = css`
     ${(props) =>
       props.sectionWidth > size.smallTablet &&
       css`
-        @container section-container (width > ${size.smallTablet}px) {
-          margin: 0 13% !important;
-          width: 74%;
-          min-width: auto;
-        }
+        margin: 0 13% !important;
+        width: 74%;
+        min-width: auto;
       `}
   }
 
@@ -186,22 +184,21 @@ const EmptyContentBody = styled.div`
 
   ${(props) =>
     (props.isEmptyPage || props.isEmptyFolderContainer) &&
+    props.sectionWidth <= size.smallTablet &&
     !isMobileOnly &&
     css`
-      @container section-container (width <= ${size.smallTablet}px) {
-        ${MobileView}
+      ${MobileView}
 
-        .ec-desc {
-          max-width: none;
-        }
+      .ec-desc {
+        max-width: none;
+      }
 
-        .ec-header {
-          padding-top: 22px;
-        }
+      .ec-header {
+        padding-top: 22px;
+      }
 
-        .ec-image {
-          height: 100px !important;
-        }
+      .ec-image {
+        height: 100px !important;
       }
     `}
 
@@ -218,13 +215,12 @@ const EmptyContentBody = styled.div`
 
     ${(props) =>
     (props.isEmptyPage || props.isEmptyFolderContainer) &&
+    props.sectionWidth <= size.smallTablet &&
     css`
-      @container section-container (width <= ${size.smallTablet}px) {
-        max-width: none !important;
-        width: auto !important;
-        min-width: auto !important;
-        margin: 0 !important;
-      }
+      max-width: none !important;
+      width: auto !important;
+      min-width: auto !important;
+      margin: 0 !important;
     `}
 `;