Web:Client:Fixed room pinning badge bouncing.

packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js

@@ -3,11 +3,11 @@ import { inject, observer } from "mobx-react";
 import RowContainer from "@docspace/components/row-container";
 import SimpleFilesRow from "./SimpleFilesRow";
 import { isMobile } from "react-device-detect";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import marginStyles from "./CommonStyles";
 import { isTablet } from "@docspace/components/utils/device";
 import { Base } from "@docspace/components/themes";
-
+import { tablet } from "@docspace/components/utils/device";
 const StyledRowContainer = styled(RowContainer)`
   .row-list-item:first-child {
     .row-selected {
@@ -18,6 +18,18 @@ const StyledRowContainer = styled(RowContainer)`
         padding-top: 0px;
         padding-bottom: 1px;
         ${marginStyles};
+
+        @media ${tablet} {
+          ${(props) =>
+            !props.isSmallContainer &&
+            css`
+              .row_content {
+                .is-pinned {
+                  padding-top: 0px !important;
+                }
+              }
+            `}
+        }
       }
     }
   }
@@ -58,6 +70,28 @@ const StyledRowContainer = styled(RowContainer)`
     }
   }
 
+  .row-selected {
+    .row_content {
+      padding-top: 1px;
+
+      .mainIcons {
+        padding-bottom: 1px;
+      }
+    }
+
+    @media ${tablet} {
+      ${(props) =>
+        !props.isSmallContainer &&
+        css`
+          .row_content {
+            .is-pinned {
+              padding-top: 0.8px !important;
+            }
+          }
+        `}
+    }
+  }
+
   .row-selected:last-child {
     .files-row {
       border-bottom: ${(props) =>
@@ -76,14 +110,6 @@ const StyledRowContainer = styled(RowContainer)`
       padding-top: 1px;
       padding-bottom: 1px;
       ${marginStyles};
-
-      .row_content {
-        padding-top: 1px;
-
-        .mainIcons {
-          padding-bottom: 1px;
-        }
-      }
     }
   }
 `;
@@ -104,6 +130,7 @@ const FilesRowContainer = ({
   withPaging,
   highlightFile,
 }) => {
+  const isSmallContainer = sectionWidth <= 500;
   useEffect(() => {
     if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
     // 400 - it is desktop info panel width
@@ -155,6 +182,7 @@ const FilesRowContainer = ({
       draggable
       useReactWindow={!withPaging}
       itemHeight={59.2}
+      isSmallContainer={isSmallContainer}
     >
       {filesListNode}
     </StyledRowContainer>

packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -66,11 +66,23 @@ const StyledSimpleFilesRow = styled(Row)`
           props.isSmallContainer &&
           css`
             .row_content {
-              .mainIcons {
-                padding-bottom: 0px;
+              .is-pinned {
+                padding-bottom: 1px;
               }
             }
           `}
+
+        @media ${tablet} {
+          ${(props) =>
+            !props.isSmallContainer &&
+            css`
+              .row_content {
+                .is-pinned {
+                  padding-top: 0.8px !important;
+                }
+              }
+            `}
+        }
       }
     `};