Pārlūkot izejas kodu

fixed save button alignment

Xetera 4 gadi atpakaļ
vecāks
revīzija
0afb70d0e7
1 mainītis faili ar 10 papildinājumiem un 3 dzēšanām
  1. 10 3
      dashboard/src/components/SaveButton.tsx

+ 10 - 3
dashboard/src/components/SaveButton.tsx

@@ -54,7 +54,7 @@ export default class SaveButton extends Component<PropsType, StateType> {
   render() {
     return (
       <ButtonWrapper makeFlush={this.props.makeFlush}>
-        {this.renderStatus()}
+        <StatusContainer>{this.renderStatus()}</StatusContainer>
         <Button
           disabled={this.props.disabled}
           onClick={this.props.onClick}
@@ -74,6 +74,10 @@ const LoadingGif = styled.img`
   margin-bottom: 0px;
 `;
 
+const StatusContainer = styled.div`
+  flex: 1;
+`;
+
 const StatusWrapper = styled.div`
   display: flex;
   align-items: center;
@@ -81,10 +85,11 @@ const StatusWrapper = styled.div`
   font-size: 13px;
   color: #ffffff55;
   margin-right: 25px;
-  padding: 0 10px;
+  flex: 1;
+  padding-inline-end: 10px;
 
   max-width: 500px;
-  white-space: nowrap;
+  white-space: break-spaces;
   overflow: hidden;
   text-overflow: ellipsis;
 
@@ -114,11 +119,13 @@ const ButtonWrapper = styled.div`
   display: flex;
   align-items: center;
   position: absolute;
+  justify-content: space-between;
   ${(props: { makeFlush: boolean }) => {
     if (!props.makeFlush) {
       return `
         bottom: 25px;
         right: 27px;
+        left: 27px;
       `;
     }
     return `