align response actions (#1106)

This commit is contained in:
Joel Elias Méndez 2021-12-03 12:19:41 -03:00 committed by GitHub
parent b39e4c2a5f
commit 156b285344
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 9 deletions

View File

@ -461,13 +461,15 @@ class TicketViewer extends React.Component {
</div> </div>
<div className="ticket-viewer__response-field row"> <div className="ticket-viewer__response-field row">
<FormField name="content" validation="TEXT_AREA" required field="textarea" fieldProps={{allowImages: allowAttachments}} /> <FormField name="content" validation="TEXT_AREA" required field="textarea" fieldProps={{allowImages: allowAttachments}} />
<div className="ticket-viewer__response-buttons"> <div className="ticket-viewer__response-container">
{allowAttachments ? <FormField name="file" field="file" /> : null} <div className="ticket-viewer__response-buttons">
<SubmitButton type="secondary">{i18n('RESPOND_TICKET')}</SubmitButton> {allowAttachments ? <FormField name="file" field="file" /> : null}
</div> <SubmitButton type="secondary">{i18n('RESPOND_TICKET')}</SubmitButton>
<div className="ticket-viewer__buttons-column"> </div>
<div className="ticket-viewer__buttons-row"> <div className="ticket-viewer__buttons-column">
{this.renderCloseTicketButton()} <div className="ticket-viewer__buttons-row">
{this.renderCloseTicketButton()}
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -33,6 +33,9 @@
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
width: 250px; width: 250px;
position: absolute;
left: 0;
bottom: 0;
} }
&__edited-title-text { &__edited-title-text {
@ -214,11 +217,19 @@
} }
} }
&-container {
display: flex;
position: relative;
flex-direction: row-reverse;
}
&-buttons { &-buttons {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-end;
width: 50%;
min-width: 50%;
} }
} }