Web:Components:Changed the styles of the SaveCancelButtons component, added props sectionWidth.

packages/asc-web-components/save-cancel-buttons/index.js

@@ -43,6 +43,7 @@ class SaveCancelButtons extends React.Component {
       reminderTest,
       saveButtonLabel,
       cancelButtonLabel,
+      sectionWidth,
       className,
       id,
     } = this.props;
@@ -51,8 +52,9 @@ class SaveCancelButtons extends React.Component {
         className={className}
         id={id}
         displaySettings={displaySettings}
+        sectionWidth={sectionWidth}
       >
-        <div className="save-button-flex">
+        <div className="buttons-flex">
           <Button
             className="save-button"
             size="big"
@@ -95,6 +97,7 @@ SaveCancelButtons.propTypes = {
   /** Show message about unsaved changes (Only shown on desktops) */
   showReminder: PropTypes.bool,
   displaySettings: PropTypes.bool,
+  sectionWidth: PropTypes.number,
 };
 
 SaveCancelButtons.defaultProps = {

packages/asc-web-components/save-cancel-buttons/styled-save-cancel-buttons.js

@@ -2,10 +2,12 @@ import styled from "styled-components";
 
 import Base from "../themes/base";
 import { tablet } from "../utils/device";
+import { isMobile } from "react-device-detect";
 
 const StyledSaveCancelButtons = styled.div`
   display: flex;
-  position: absolute;
+  flex-direction: ${(props) => (props.displaySettings ? "column" : "row")};
+  position: ${(props) => (props.displaySettings ? "inherit" : "absolute")};
   justify-content: space-between;
   box-sizing: border-box;
   align-items: center;
@@ -14,7 +16,8 @@ const StyledSaveCancelButtons = styled.div`
   width: ${(props) => props.theme.saveCancelButtons.width};
 
   left: ${(props) => props.theme.saveCancelButtons.left};
-  padding: ${(props) => props.theme.saveCancelButtons.padding};
+  padding: ${(props) =>
+    props.displaySettings ? "0" : props.theme.saveCancelButtons.padding};
 
   .save-button {
     margin-right: ${(props) => props.theme.saveCancelButtons.marginRight};
@@ -24,14 +27,45 @@ const StyledSaveCancelButtons = styled.div`
     color: ${(props) => props.theme.saveCancelButtons.unsavedColor};
   }
 
+  ${(props) =>
+    props.displaySettings &&
+    `
+    max-width:350px;
+
+    .buttons-flex {
+      display: flex;
+      width: 100%;
+      margin-bottom:8px;
+    }
+
+    .save-button, .cancel-button {
+      width: 100%;
+      min-width:100px;
+      line-height: 16px;
+    }
+  `}
+
   @media ${tablet} {
-    justify-content: flex-end;
-    position: fixed;
+    justify-content: ${(props) =>
+      props.displaySettings ? "normal" : "flex-end"};
+    position: ${(props) => (props.displaySettings ? "inherit" : "fixed")};
 
     .unsaved-changes {
-      display: none;
+      display: ${(props) => (props.displaySettings ? "block" : "none")};
     }
   }
+
+  ${(props) =>
+    props.displaySettings &&
+    !isMobile &&
+    props.sectionWidth >= 375 &&
+    `
+    align-items: flex-start;
+
+    .save-button, .cancel-button {
+      width: max-content;
+    }  
+  `}
 `;
 StyledSaveCancelButtons.defaultProps = { theme: Base };
 export default StyledSaveCancelButtons;