fixed close button and footer

packages/asc-web-components/modal-dialog/components/CloseButton.js

@@ -41,6 +41,7 @@ const StyledCloseButtonWrapper = styled.div`
         `}
 
   .close-button {
+    cursor: pointer;
     path {
       fill: ${(props) => props.theme.modalDialog.closeButton.fillColor};
     }
@@ -51,12 +52,11 @@ StyledCloseButtonWrapper.defaultProps = { theme: Base };
 
 const CloseButton = ({ displayType, onClick }) => {
   return (
-    <StyledCloseButtonWrapper displayType={displayType}>
+    <StyledCloseButtonWrapper onClick={onClick} displayType={displayType}>
       <IconButton
         size={12}
         className="close-button"
         iconName="/static/images/cross.react.svg"
-        onClick={onClick}
       />
     </StyledCloseButtonWrapper>
   );

packages/asc-web-components/modal-dialog/modal-dialog.stories.js

@@ -66,7 +66,7 @@ Template.propTypes = {
 
 export const Default = Template.bind({});
 Default.args = {
-  displayType: "auto",
+  displayType: "modal",
   isLarge: false,
   zIndex: 310,
 };

packages/asc-web-components/modal-dialog/styled-modal-dialog.js

@@ -97,6 +97,7 @@ const BodyBox = styled(Box)`
 `;
 
 const StyledFooter = styled.div`
+  //width: 100%;
   display: flex;
   flex-direction: row;
   border-top: ${(props) =>