Client:QuickButtons:Fix styles.

packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js

@@ -136,9 +136,7 @@ const StyledTableRow = styled(TableRow)`
       `}
   }
 
-  .table-container_element-wrapper,
+  .table-container_element-wrapper {
-  .table-container_quick-buttons-wrapper {
-    padding-inline-end: 0;
   }
 
   .table-container_element-wrapper,
@@ -306,7 +304,10 @@ const StyledBadgesContainer = styled.div`
 `;
 
 const StyledQuickButtonsContainer = styled.div`
-  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-grow: 1;
 
   .badges {
     display: flex;
@@ -315,11 +316,7 @@ const StyledQuickButtonsContainer = styled.div`
   }
 
   .badge {
-    padding: 12px 7px;
+    padding: 12px 8px;
-  }
-
-  .badge:last-child {
-    margin-inline-end: 3px;
   }
 
   .lock-file {

packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js

@@ -50,24 +50,6 @@ const contextCss = css`
 `;
 
 const StyledTableContainer = styled(TableContainer)`
-  .badges__quickButtons {
-    display: flex;
-    flex-grow: 1;
-    justify-content: flex-end;
-
-    .badge {
-      padding-left: 16px;
-    }
-
-    .badge:first-child {
-      padding-left: 8px;
-    }
-
-    .badge:last-child {
-      padding-right: 8px;
-    }
-  }
-
   .table-row-selected {
     .table-container_file-name-cell {
       ${fileNameCss}

packages/client/src/pages/Home/Section/Body/TableView/sub-components/RecentRowData.js

@@ -33,10 +33,7 @@ import AuthorCell from "./AuthorCell";
 import DateCell from "./DateCell";
 import SizeCell from "./SizeCell";
 import { classNames, getLastColumn } from "@docspace/shared/utils";
-import {
+import { StyledBadgesContainer } from "../StyledTable";
-  StyledBadgesContainer,
-  StyledQuickButtonsContainer,
-} from "../StyledTable";
 
 const RecentRowDataComponent = (props) => {
   const {
@@ -213,26 +210,6 @@ const RecentRowDataComponent = (props) => {
       ) : (
         <div />
       )}
-      {/* {quickButtonsColumnIsEnabled ? (
-        <TableCell
-          style={
-            !quickButtonsColumnIsEnabled
-              ? { background: "none" }
-              : dragStyles.style
-          }
-          {...selectionProp}
-          className={classNames(
-            selectionProp?.className,
-            "table-container_quick-buttons-wrapper",
-          )}
-        >
-          <StyledQuickButtonsContainer>
-            {quickButtonsComponent}
-          </StyledQuickButtonsContainer>
-        </TableCell>
-      ) : (
-        <div />
-      )} */}
     </>
   );
 };

packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js

@@ -85,7 +85,13 @@ const RoomsRowDataComponent = (props) => {
         <StyledBadgesContainer showHotkeyBorder={showHotkeyBorder}>
           {badgesComponent}
         </StyledBadgesContainer>
-        {lastColumn === "Name" ? quickButtonsComponent : <></>}
+        {lastColumn === "Name" ? (
+          <StyledQuickButtonsContainer>
+            {quickButtonsComponent}
+          </StyledQuickButtonsContainer>
+        ) : (
+          <></>
+        )}
       </TableCell>
 
       {roomColumnTypeIsEnabled ? (
@@ -105,7 +111,13 @@ const RoomsRowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Type" ? quickButtonsComponent : <></>}
+          {lastColumn === "Type" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -124,7 +136,13 @@ const RoomsRowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Tags" ? quickButtonsComponent : <></>}
+          {lastColumn === "Tags" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -147,7 +165,13 @@ const RoomsRowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Owner" ? quickButtonsComponent : <></>}
+          {lastColumn === "Owner" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -170,7 +194,13 @@ const RoomsRowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Activity" ? quickButtonsComponent : <></>}
+          {lastColumn === "Activity" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -183,32 +213,17 @@ const RoomsRowDataComponent = (props) => {
               type="room"
               isReadOnly={!item?.security?.EditRoom}
             />
-            {lastColumn === "Storage" ? quickButtonsComponent : <></>}
+            {lastColumn === "Storage" ? (
+              <StyledQuickButtonsContainer>
+                {quickButtonsComponent}
+              </StyledQuickButtonsContainer>
+            ) : (
+              <></>
+            )}
           </TableCell>
         ) : (
           <div />
         ))}
-
-      {/* {roomColumnQuickButtonsIsEnabled ? (
-        <TableCell
-          style={
-            !roomColumnQuickButtonsIsEnabled
-              ? { background: "none" }
-              : dragStyles.style
-          }
-          {...selectionProp}
-          className={classNames(
-            selectionProp?.className,
-            "table-container_quick-buttons-wrapper",
-          )}
-        >
-          <StyledQuickButtonsContainer>
-            {quickButtonsComponent}
-          </StyledQuickButtonsContainer>
-        </TableCell>
-      ) : (
-        <div />
-      )} */}
     </>
   );
 };

packages/client/src/pages/Home/Section/Body/TableView/sub-components/RowData.js

@@ -84,7 +84,13 @@ const RowDataComponent = (props) => {
         <StyledBadgesContainer showHotkeyBorder={showHotkeyBorder}>
           {badgesComponent}
         </StyledBadgesContainer>
-        {lastColumn === "Name" ? quickButtonsComponent : <></>}
+        {lastColumn === "Name" ? (
+          <StyledQuickButtonsContainer>
+            {quickButtonsComponent}
+          </StyledQuickButtonsContainer>
+        ) : (
+          <></>
+        )}
       </TableCell>
 
       {authorColumnIsEnabled ? (
@@ -102,7 +108,13 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Author" ? quickButtonsComponent : <></>}
+          {lastColumn === "Author" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -126,7 +138,13 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Created" ? quickButtonsComponent : <></>}
+          {lastColumn === "Created" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -147,7 +165,13 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Modified" ? quickButtonsComponent : <></>}
+          {lastColumn === "Modified" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -168,7 +192,13 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Size" ? quickButtonsComponent : <></>}
+          {lastColumn === "Size" ? (
+            <StyledQuickButtonsContainer>
+              {quickButtonsComponent}
+            </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
@@ -191,31 +221,17 @@ const RowDataComponent = (props) => {
             sideColor={theme.filesSection.tableView.row.sideColor}
             {...props}
           />
-          {lastColumn === "Type" ? quickButtonsComponent : <></>}
+          {lastColumn === "Type" ? (
-        </TableCell>
-      ) : (
-        <div />
-      )}
-      {/* {quickButtonsColumnIsEnabled ? (
-        <TableCell
-          style={
-            !quickButtonsColumnIsEnabled
-              ? { background: "none" }
-              : dragStyles.style
-          }
-          {...selectionProp}
-          className={classNames(
-            selectionProp?.className,
-            "table-container_quick-buttons-wrapper",
-          )}
-        >
             <StyledQuickButtonsContainer>
               {quickButtonsComponent}
             </StyledQuickButtonsContainer>
+          ) : (
+            <></>
+          )}
         </TableCell>
       ) : (
         <div />
-      )} */}
+      )}
     </>
   );
 };

packages/client/src/pages/Home/Section/Body/TableView/sub-components/TrashRowData.js

@@ -33,10 +33,7 @@ import AuthorCell from "./AuthorCell";
 import DateCell from "./DateCell";
 import SizeCell from "./SizeCell";
 import { classNames, getLastColumn } from "@docspace/shared/utils";
-import {
+import { StyledBadgesContainer } from "../StyledTable";
-  StyledBadgesContainer,
-  StyledQuickButtonsContainer,
-} from "../StyledTable";
 import ErasureCell from "./ErasureCell";
 import RoomCell from "./RoomCell";