From d3f95bde052f4aa367f44b071ffb611fc5219211 Mon Sep 17 00:00:00 2001
From: LautaroCesso <59095036+LautaroCesso@users.noreply.github.com>
Date: Thu, 25 Jun 2020 15:25:24 -0300
Subject: [PATCH] Fix mobile style. (#810)

* Fix header style.

* Fix check ticket mobile style.

* Fix footer style bug.

* Fix admin panel departments.

* Fix admin panel system preferences.

* Fix article list.

* Fix admin panel staff menbers.

* Fix admin panel ban users.

* fix admin panel advance settings.

* Fix ticket viewer first part.

* Fix ticket viewer second part.

* Fix  ticket viewer header.

* fix admin panel departments

* Fix admin panel system preferences second part.

* fix admin panel ban users second part.

* Fix full width.

* fix loading in admin panel email settings.

* Fix admin panel departments second part.
---
 client/src/app-components/people-list.scss    |  26 +++-
 client/src/app-components/ticket-viewer.js    | 147 ++++++++++--------
 client/src/app-components/ticket-viewer.scss  |  86 ++++++++--
 .../src/app/admin/panel/admin-panel-layout.js |   2 +-
 .../app/admin/panel/admin-panel-layout.scss   |   6 +
 .../articles/admin-panel-list-articles.scss   |   9 +-
 .../settings/admin-panel-advanced-settings.js |   4 +-
 .../admin-panel-advanced-settings.scss        |  30 +++-
 .../settings/admin-panel-email-settings.scss  |   8 +
 .../admin-panel-system-preferences.js         |  12 +-
 .../admin-panel-system-preferences.scss       |  28 +++-
 .../panel/staff/admin-panel-departments.js    |  15 +-
 .../panel/staff/admin-panel-departments.scss  |  67 +++++---
 .../staff/admin-panel-staff-members.scss      |  17 ++
 .../tickets/admin-panel-view-ticket.scss      |  11 +-
 .../panel/users/admin-panel-ban-users.js      |   4 +-
 .../panel/users/admin-panel-ban-users.scss    |  31 +++-
 client/src/app/app.scss                       |   7 +-
 .../src/app/main/main-check-ticket-page.scss  |  20 ++-
 client/src/app/main/main-layout-footer.scss   |  16 +-
 client/src/app/main/main-layout-header.js     |   5 +-
 client/src/app/main/main-layout-header.scss   |  36 ++---
 22 files changed, 432 insertions(+), 155 deletions(-)

diff --git a/client/src/app-components/people-list.scss b/client/src/app-components/people-list.scss
index f476eb20..d1eeabdc 100644
--- a/client/src/app-components/people-list.scss
+++ b/client/src/app-components/people-list.scss
@@ -61,4 +61,28 @@
     &__pagination {
 
     }
-}
\ No newline at end of file
+
+    @media screen and (max-width: 415px) {
+        .people-list {
+            &__item {
+                height: unset;
+                padding: unset;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: flex-end;
+
+                &-profile-pic-wrapper {
+                    top: 15px;
+                    left: 15px;
+                }
+
+                &-block {
+                    width: unset;
+                    display: unset;
+                    padding: 15px 10px 0 0;
+                }
+            }
+        }
+    }
+}
diff --git a/client/src/app-components/ticket-viewer.js b/client/src/app-components/ticket-viewer.js
index 5772d688..ee809c80 100644
--- a/client/src/app-components/ticket-viewer.js
+++ b/client/src/app-components/ticket-viewer.js
@@ -108,7 +108,7 @@ class TicketViewer extends React.Component {
         const {ticketNumber, title, author, editedTitle, language} = ticket;
 
         return(
-            <div className="ticket-viewer__header row">
+            <div className="ticket-viewer__header">
                 <span className="ticket-viewer__number">#{ticketNumber}</span>
                 <span className="ticket-viewer__title">{title}</span>
                 <span className="ticket-viewer__flag">
@@ -136,7 +136,7 @@ class TicketViewer extends React.Component {
 
     renderEditableTitle(){
         return(
-            <div className="ticket-viewer__header row">
+            <div className="ticket-viewer__header">
                 <div className="ticket-viewer__edit-title-box">
                     <FormField className="ticket-viewer___input-edit-title" error={this.state.editTitleError}  value={this.state.newTitle} field='input' onChange={(e) => this.setState({newTitle: e.target.value })} />
                 </div>
@@ -164,49 +164,58 @@ class TicketViewer extends React.Component {
 
         return (
             <div className="ticket-viewer__headers">
-                <div className="ticket-viewer__info-row-header row">
-                    <div className="col-md-4">{i18n('DEPARTMENT')}</div>
-                    <div className="col-md-4">{i18n('AUTHOR')}</div>
-                    <div className="col-md-4">{i18n('TAGS')}</div>
-                </div>
-                <div className="ticket-viewer__info-row-values row">
-                    <div className="col-md-4">
-                        <DepartmentDropdown className="ticket-viewer__editable-dropdown"
-                                  departments={departments}
-                                  selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})}
-                                  onChange={this.onDepartmentDropdownChanged.bind(this)} />
+                <div className="ticket-viewer__info">
+                    <div className="ticket-viewer__info-container-editable">
+                        <div className="ticket-viewer__info-header">{i18n('DEPARTMENT')}</div>
+                        <div className="ticket-viewer__info-value">
+                            <DepartmentDropdown className="ticket-viewer__editable-dropdown"
+                                    departments={departments}
+                                    selectedIndex={_.findIndex(departments, {id: this.props.ticket.department.id})}
+                                    onChange={this.onDepartmentDropdownChanged.bind(this)} />
+                        </div>
                     </div>
-                    <div className="col-md-4">{ticket.author.name}</div>
-                    <div className="col-md-4">
-                        <TagSelector
-                            items={this.props.tags}
-                            values={this.props.ticket.tags}
-                            onRemoveClick={this.removeTag.bind(this)}
-                            onTagSelected={this.addTag.bind(this)}
-                            loading={this.state.tagSelectorLoading}/>
+                    <div className="ticket-viewer__info-container-editable">
+                        <div className="ticket-viewer__info-header">{i18n('AUTHOR')}</div>
+                        <div className="ticket-viewer__info-value">{ticket.author.name}</div>
+                    </div>
+                    <div className="ticket-viewer__info-container-editable">
+                        <div className="ticket-viewer__info-header">{i18n('TAGS')}</div>
+                        <div className="ticket-viewer__info-value">
+                            <TagSelector
+                                items={this.props.tags}
+                                values={this.props.ticket.tags}
+                                onRemoveClick={this.removeTag.bind(this)}
+                                onTagSelected={this.addTag.bind(this)}
+                                loading={this.state.tagSelectorLoading}/>
+                        </div>
                     </div>
                 </div>
-                <div className="ticket-viewer__info-row-header row">
-                    <div className="col-md-4">{i18n('PRIORITY')}</div>
-                    <div className="col-md-4">{i18n('OWNER')}</div>
-                    <div className="col-md-4">{i18n('STATUS')}</div>
-                </div>
-                <div className="ticket-viewer__info-row-values row">
-                    <div className="col-md-4">
-                        <DropDown
-                            className="ticket-viewer__editable-dropdown"
-                            items={priorityList}
-                            selectedIndex={priorities[ticket.priority]}
-                            onChange={this.onPriorityDropdownChanged.bind(this)} />
+
+                <div className="ticket-viewer__info">
+                    <div className="ticket-viewer__info-container-editable">
+                        <div className="ticket-viewer__info-header">{i18n('PRIORITY')}</div>
+                        <div className="ticket-viewer__info-value">
+                            <DropDown
+                                className="ticket-viewer__editable-dropdown"
+                                items={priorityList}
+                                selectedIndex={priorities[ticket.priority]}
+                                onChange={this.onPriorityDropdownChanged.bind(this)} />
+                        </div>
                     </div>
-                    <div className="col-md-4">
-                        {this.renderAssignStaffList()}
+                    <div className="ticket-viewer__info-container-editable">
+                        <div className="ticket-viewer__info-header">{i18n('OWNER')}</div>
+                        <div className="ticket-viewer__info-value">
+                            {this.renderAssignStaffList()}
+                        </div>
                     </div>
-                    <div className="col-md-4">
-                        {ticket.closed ?
-                        <Button type='secondary' size="extra-small" onClick={this.onReopenClick.bind(this)}>
-                            {i18n('RE_OPEN')}
-                        </Button> : i18n('OPENED')}
+                    <div className="ticket-viewer__info-container-editable">
+                        <div className="ticket-viewer__info-header">{i18n('STATUS')}</div>
+                            <div className="ticket-viewer__info-value">
+                            {ticket.closed ?
+                            <Button type='secondary' size="extra-small" onClick={this.onReopenClick.bind(this)}>
+                                {i18n('RE_OPEN')}
+                            </Button> : i18n('OPENED')}
+                        </div>
                     </div>
                 </div>
             </div>
@@ -223,33 +232,41 @@ class TicketViewer extends React.Component {
 
         return (
             <div className="ticket-viewer__headers">
-                <div className="ticket-viewer__info-row-header row">
-                    <div className="ticket-viewer__department col-md-4">{i18n('DEPARTMENT')}</div>
-                    <div className="ticket-viewer__author col-md-4">{i18n('AUTHOR')}</div>
-                    <div className="ticket-viewer__date col-md-4">{i18n('TAGS')}</div>
-                </div>
-                <div className="ticket-viewer__info-row-values row">
-                    <div className="ticket-viewer__department col-md-4">{ticket.department.name}</div>
-                    <div className="ticket-viewer__author col-md-4">{ticket.author.name}</div>
-                    <div className="col-md-4">{ticket.tags.length ? ticket.tags.map((tagName,index) => {
-                        let tag = _.find(this.props.tags, {name:tagName});
-                        return <Tag name={tag && tag.name} color={tag && tag.color} key={index} />
-                    }) : i18n('NONE')}</div>
-                </div>
-                <div className="ticket-viewer__info-row-header row">
-                    <div className="ticket-viewer__department col-md-4">{i18n('PRIORITY')}</div>
-                    <div className="ticket-viewer__author col-md-4">{i18n('OWNER')}</div>
-                    <div className="ticket-viewer__date col-md-4">{i18n('STATUS')}</div>
-                </div>
-                <div className="ticket-viewer__info-row-values row">
-                    <div className="col-md-4">
-                        {i18n(priorities[this.props.ticket.priority || 'low'])}
+                <div className="ticket-viewer__info">
+                    <div className="ticket-viewer__info-container">
+                        <div className="ticket-viewer__info-header">{i18n('DEPARTMENT')}</div>
+                        <div className="ticket-viewer__info-value">{ticket.department.name}</div>
                     </div>
-                    <div className="col-md-4">
-                        {this.renderOwnerNode()}
+                        <div className="ticket-viewer__info-container">
+                            <div className="ticket-viewer__info-header">{i18n('AUTHOR')}</div>
+                            <div className="ticket-viewer__info-value">{ticket.author.name}</div>
                     </div>
-                    <div className="col-md-4">
-                        {i18n((this.props.ticket.closed) ? 'CLOSED' : 'OPENED')}
+                    <div className="ticket-viewer__info-container">
+                        <div className="ticket-viewer__info-header">{i18n('TAGS')}</div>
+                        <div className="ticket-viewer__info-value">{ticket.tags.length ? ticket.tags.map((tagName,index) => {
+                            let tag = _.find(this.props.tags, {name:tagName});
+                            return <Tag name={tag && tag.name} color={tag && tag.color} key={index} />
+                        }) : i18n('NONE')}</div>
+                    </div>
+                </div>
+                <div className="ticket-viewer__info">
+                    <div className="ticket-viewer__info-container">
+                        <div className="ticket-viewer__info-header">{i18n('PRIORITY')}</div>
+                        <div className="ticket-viewer__info-value">
+                            {i18n(priorities[this.props.ticket.priority || 'low'])}
+                        </div>
+                    </div>
+                    <div className="ticket-viewer__info-container">
+                        <div className="ticket-viewer__info-header">{i18n('OWNER')}</div>
+                        <div className="ticket-viewer__info-value">
+                            {this.renderOwnerNode()}
+                        </div>
+                    </div>
+                    <div className="ticket-viewer__info-container">
+                        <div className="ticket-viewer__info-header">{i18n('STATUS')}</div>
+                        <div className="ticket-viewer__info-value">
+                            {i18n((this.props.ticket.closed) ? 'CLOSED' : 'OPENED')}
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/client/src/app-components/ticket-viewer.scss b/client/src/app-components/ticket-viewer.scss
index 87b2f6fe..9a2662f1 100644
--- a/client/src/app-components/ticket-viewer.scss
+++ b/client/src/app-components/ticket-viewer.scss
@@ -12,7 +12,7 @@
         display: flex;
         align-items:center;
         justify-content:center;
-        position: relative;
+
         &:hover {
             .ticket-viewer__edit-title-icon {
                 color: $grey;
@@ -23,13 +23,13 @@
     &__edited-title-text {
         font-style: italic;
         font-size: 14px;
-        margin-left: 10px;
+        margin: 0 10px;
     }
 
     &__edit-title-icon {
-        position: absolute;
         color: #414A59;
         right: 12px;
+        margin: 0 10px;
         &:hover {
             cursor:pointer;
         }
@@ -49,27 +49,52 @@
 
     &__number {
         color: white;
-        margin-right: 10px;
+        margin-right: 30px;
         font-size: 14px;
     }
 
     &__title {
-        display: inline-block;
+        max-width: 375px;
     }
 
     &__flag {
-        margin-left: 10px;
+        margin-left: 30px;
     }
 
-    &__info-row-header {
+    &__info {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: flex-start;
         background-color: $light-grey;
-        font-weight: bold;
-    }
+        padding: 0 15px;
 
-    &__info-row-values {
-        background-color: $light-grey;
-        color: $secondary-blue;
-        padding-bottom: 10px;
+        &-container {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+            min-width: 150px;
+            max-width: 250px;
+        }
+
+        &-container-editable {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+            min-width: 300px;
+        }
+
+        &-header {
+            font-weight: bold;
+        }
+
+        &-value {
+            color: $secondary-blue;
+            padding-bottom: 10px;
+
+        }
     }
 
     &__editable-dropdown {
@@ -136,4 +161,39 @@
     &__delete-button {
         margin-left: 10px;
     }
+
+    @media screen and (max-width: 1151px) {
+        .ticket-viewer__info  {
+            &-container {
+                width: 200px;
+                min-width: unset;
+                max-width: unset;
+            }
+
+            &-container-editable {
+                min-width: 250px;
+                max-width: 300px;
+            }
+        }
+    }
+
+    @media screen and (max-width: 992px) {
+        .ticket-viewer__info  {
+            flex-direction: column;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+
+    @media screen and (max-width: 571px) {
+        .ticket-viewer {
+            &__number, &__edit-title-icon {
+                margin: 0 5px;
+            }
+
+            &__flag {
+                padding: 0 10px;
+            }
+        }
+    }
 }
diff --git a/client/src/app/admin/panel/admin-panel-layout.js b/client/src/app/admin/panel/admin-panel-layout.js
index dbb70d16..f92004f1 100644
--- a/client/src/app/admin/panel/admin-panel-layout.js
+++ b/client/src/app/admin/panel/admin-panel-layout.js
@@ -29,7 +29,7 @@ class AdminPanel extends React.Component {
                     </div>
                     <div className="row">
                         <div className="col-md-12 admin-panel-layout__content">
-                            <Widget>
+                            <Widget className='admin-panel-layout__content__widget'>
                                 {this.props.children}
                             </Widget>
                         </div>
diff --git a/client/src/app/admin/panel/admin-panel-layout.scss b/client/src/app/admin/panel/admin-panel-layout.scss
index 42a68014..7c2d5d66 100644
--- a/client/src/app/admin/panel/admin-panel-layout.scss
+++ b/client/src/app/admin/panel/admin-panel-layout.scss
@@ -4,4 +4,10 @@
     &__header {
         margin-bottom: 20px;
     }
+
+    @media screen and (max-width: 415px) {
+        .admin-panel-layout__content__widget {
+            padding: 20px 5px;
+        }
+    }
 }
\ No newline at end of file
diff --git a/client/src/app/admin/panel/articles/admin-panel-list-articles.scss b/client/src/app/admin/panel/articles/admin-panel-list-articles.scss
index 1807e990..5005226c 100644
--- a/client/src/app/admin/panel/articles/admin-panel-list-articles.scss
+++ b/client/src/app/admin/panel/articles/admin-panel-list-articles.scss
@@ -3,4 +3,11 @@
     &__list {
         padding: 0 50px;
     }
-}
\ No newline at end of file
+
+    @media screen and (max-width: 415px) {
+        .admin-panel-list-articles__list  {
+            padding: 0;
+        }
+    }
+
+}
diff --git a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js
index 7e65e631..4f2ff813 100644
--- a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js
+++ b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.js
@@ -94,7 +94,7 @@ class AdminPanelAdvancedSettings extends React.Component {
                         <div className="col-md-4">
                             <Listing {...this.getListingProps()} />
                         </div>
-                        <div className="col-md-8">
+                        <div className="col-md-8 admin-panel-advanced-settings__api-keys__container">
                             {(this.state.selectedAPIKey === -1) ? this.renderNoKey() : this.renderKey()}
                         </div>
                     </div>
@@ -123,7 +123,7 @@ class AdminPanelAdvancedSettings extends React.Component {
         let currentAPIKey = this.state.APIKeys[this.state.selectedAPIKey];
 
         return (
-            <div className="admin-panel-advanced-settings__api-keys-info">
+            <div className="admin-panel-advanced-settings__api-keys__container-info">
                 <div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('NAME_OF_KEY')}</div>
                 <div className="admin-panel-advanced-settings__api-keys-data">{currentAPIKey.name}</div>
                 <div className="admin-panel-advanced-settings__api-keys-subtitle">{i18n('KEY')}</div>
diff --git a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss
index 81082aea..b6e14a6d 100644
--- a/client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss
+++ b/client/src/app/admin/panel/settings/admin-panel-advanced-settings.scss
@@ -27,7 +27,7 @@
             text-align: left;
         }
 
-        &-info {
+        &__container-info {
             text-align: left;
         }
 
@@ -58,4 +58,32 @@
     &__message {
       margin-bottom: 20px;
     }
+
+    @media screen and (max-width: 415px) {
+        .admin-panel-advanced-settings {
+            &__api-keys {
+
+                &-button {
+                    margin-bottom: 30px;
+                    width: 150px;
+                }
+
+                &__container {
+                    padding: 30px 0;
+
+                    &-info {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+
+                &-subtitle {
+                    margin: 10px 0 0 0;
+                }
+            }
+        }
+    }
+
 }
diff --git a/client/src/app/admin/panel/settings/admin-panel-email-settings.scss b/client/src/app/admin/panel/settings/admin-panel-email-settings.scss
index 4f440674..68c64a48 100644
--- a/client/src/app/admin/panel/settings/admin-panel-email-settings.scss
+++ b/client/src/app/admin/panel/settings/admin-panel-email-settings.scss
@@ -1,6 +1,14 @@
 @import "../../../../scss/vars";
 
 .admin-panel-email-settings {
+    &__loading {
+        min-height: 361px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background-color: $grey;
+    }
 
     &__text-area {
         width: 100%;
diff --git a/client/src/app/admin/panel/settings/admin-panel-system-preferences.js b/client/src/app/admin/panel/settings/admin-panel-system-preferences.js
index dae21f3b..d0a4cf5d 100755
--- a/client/src/app/admin/panel/settings/admin-panel-system-preferences.js
+++ b/client/src/app/admin/panel/settings/admin-panel-system-preferences.js
@@ -52,9 +52,9 @@ class AdminPanelSystemPreferences extends React.Component {
                         </div>
                     </div>
                     <div className="row">
-                        <div className="col-md-6">
-                            <FormField label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url" validation="URL" required/>
-                            <FormField label={i18n('SUPPORT_CENTER_LAYOUT')} fieldProps={{size: 'large', items: [{content: i18n('BOXED')}, {content: i18n('FULL_WIDTH')}]}} field="select" name="layout" />
+                        <div className="col-md-6 admin-panel-system-preferences__form-fields">
+                            <FormField className="admin-panel-system-preferences__form-fields__input" label={i18n('SUPPORT_CENTER_URL')} fieldProps={{size: 'large'}} name="url" validation="URL" required/>
+                            <FormField className="admin-panel-system-preferences__form-fields__select" label={i18n('SUPPORT_CENTER_LAYOUT')} fieldProps={{size: 'large', items: [{content: i18n('BOXED')}, {content: i18n('FULL_WIDTH')}]}} field="select" name="layout" />
                         </div>
                         <div className="col-md-6">
                             <FormField label={i18n('SUPPORT_CENTER_TITLE')} fieldProps={{size: 'large'}} name="title" validation="TITLE" required/>
@@ -99,12 +99,12 @@ class AdminPanelSystemPreferences extends React.Component {
                             <span className="separator" />
                         </div>
                     </div>
-                    <div className="row">
+                    <div className="row admin-panel-system-preferences__container">
                         <div className="col-md-4 col-md-offset-2">
-                            <SubmitButton type="secondary">{i18n('UPDATE_SETTINGS')}</SubmitButton>
+                            <SubmitButton className="admin-panel-system-preferences__container__button" type="secondary">{i18n('UPDATE_SETTINGS')}</SubmitButton>
                         </div>
                         <div className="col-md-4">
-                            <Button onClick={this.onDiscardChangesSubmit.bind(this)}>{i18n('DISCARD_CHANGES')}</Button>
+                            <Button className="admin-panel-system-preferences__container__button" onClick={this.onDiscardChangesSubmit.bind(this)}>{i18n('DISCARD_CHANGES')}</Button>
                         </div>
                     </div>
                 </Form>
diff --git a/client/src/app/admin/panel/settings/admin-panel-system-preferences.scss b/client/src/app/admin/panel/settings/admin-panel-system-preferences.scss
index 9ee30de5..b527992b 100644
--- a/client/src/app/admin/panel/settings/admin-panel-system-preferences.scss
+++ b/client/src/app/admin/panel/settings/admin-panel-system-preferences.scss
@@ -51,4 +51,30 @@
     &__message {
         margin-top: 20px;
     }
-}
\ No newline at end of file
+
+    @media screen and (max-width: 376px) {
+        .admin-panel-system-preferences {
+            &__form-fields {
+                padding: 0;
+
+                &__input, &__select {
+                    padding: 0 15px;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 415px) {
+        .admin-panel-system-preferences {
+            &__container__button {
+                margin: 10px;
+            }
+
+            &__languages {
+                &-allowed, &-supported {
+                    display: unset;
+                }
+            }
+        }
+    }
+}
diff --git a/client/src/app/admin/panel/staff/admin-panel-departments.js b/client/src/app/admin/panel/staff/admin-panel-departments.js
index 5082d3b1..7b8ee5fb 100644
--- a/client/src/app/admin/panel/staff/admin-panel-departments.js
+++ b/client/src/app/admin/panel/staff/admin-panel-departments.js
@@ -70,11 +70,11 @@ class AdminPanelDepartments extends React.Component {
                     <div className="col-md-8">
                         {(errorMessage) ? <Message type="error">{i18n(errorMessage)}</Message> : null}
                         <Form {...this.getFormProps()}>
-                            <div>
-                                <FormField className="admin-panel-departments__name" label={i18n('NAME')} name="name" validation="NAME" required fieldProps={{size: 'large'}}/>
+                            <div className="admin-panel-departments__container">
+                                <FormField className="admin-panel-departments__container__name" label={i18n('NAME')} name="name" validation="NAME" required fieldProps={{size: 'large'}}/>
                                 <div className="admin-panel-departments__private-option">
                                     <FormField label={i18n('PRIVATE')} name="private" field="checkbox"/>
-                                    <InfoTooltip className="admin-panel-departments__info-tooltip" text={i18n('PRIVATE_DEPARTMENT_DESCRIPTION')} />
+                                    <InfoTooltip className="admin-panel-departments__container__info-tooltip" text={i18n('PRIVATE_DEPARTMENT_DESCRIPTION')} />
                                 </div>
                             </div>
                             <SubmitButton
@@ -95,7 +95,7 @@ class AdminPanelDepartments extends React.Component {
             </div>
         );
     }
-    
+
     renderDefaultDepartmentForm() {
         const {
             defaultDepartmentError,
@@ -120,9 +120,7 @@ class AdminPanelDepartments extends React.Component {
                             decorator={DepartmentDropdown}
                             fieldProps={{ departments: getPublicDepartmentList() , size: 'medium' }}
                         />
-                        <div className="admin-panel-departments__default-departments-container__form__fields__lock-option">
-                            <FormField label={i18n('LOCK_DEPARTMENT_DESCRIPTION')} name="locked" field="checkbox"/>
-                        </div>
+                        <FormField className="admin-panel-departments__default-departments-container__form__fields__checkbox" label={i18n('LOCK_DEPARTMENT_DESCRIPTION')} name="locked" field="checkbox"/>
                     </div>
                     <SubmitButton
                         className="admin-panel-departments__default-departments-container__form__button"
@@ -215,7 +213,8 @@ class AdminPanelDepartments extends React.Component {
             onChange: (form) => {this.setState({form, edited: true})},
             onValidateErrors: (errors) => {this.setState({errors})},
             onSubmit: this.onFormSubmit.bind(this),
-            loading: formLoading
+            loading: formLoading,
+            className: 'admin-panel-departments__form'
         };
     }
 
diff --git a/client/src/app/admin/panel/staff/admin-panel-departments.scss b/client/src/app/admin/panel/staff/admin-panel-departments.scss
index ab9b7906..94ccb5d3 100644
--- a/client/src/app/admin/panel/staff/admin-panel-departments.scss
+++ b/client/src/app/admin/panel/staff/admin-panel-departments.scss
@@ -7,17 +7,28 @@
     }
 
     &__update-name-button {
-        float: left;
         min-width: 156px;
     }
 
-    &__name {
-        display:inline-block;margin-right: 101px;
+    &__container{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        width: 460px;
+
+        &__info-tooltip {
+            margin-left: 2px;
+        }
     }
-    &__private-option {
-        display:inline-block;
-        margin-left: 10px;
+
+    &__form {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        align-items: flex-start;
     }
+
     &__default-departments-container {
         &__form {
             text-align: left;
@@ -28,16 +39,6 @@
                 justify-content: space-around;
                 align-items: flex-start;
                 padding-bottom: 10px;
-
-                &__lock-option {
-                    display: flex;
-                    flex-direction: row;
-                    align-items: center;
-
-                    &__info-tooltip {
-                        padding-left: 5px;
-                    }
-                }    
             }
             &__button {
                 min-width: 156px;
@@ -81,7 +82,37 @@
         text-transform: lowercase;
         margin-left: 3px;
     }
-        &__info-tooltip {
-        margin-left: 2px;
+
+    @media screen and (max-width: 415px) {
+        .admin-panel-departments  {
+            &__container{
+                display: unset;
+                width: 100%;
+
+                &__name {
+                    margin: 30px;
+                }
+
+                &__private-option {
+                    margin: 10px;
+                }
+            }
+
+            &__update-name-button {
+                float: unset;
+                margin: 15px;
+            }
+
+            &__default-departments-container__form__fields {
+
+                &__checkbox {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+            }
+        }
     }
+
 }
diff --git a/client/src/app/admin/panel/staff/admin-panel-staff-members.scss b/client/src/app/admin/panel/staff/admin-panel-staff-members.scss
index 974d2183..c1885429 100644
--- a/client/src/app/admin/panel/staff/admin-panel-staff-members.scss
+++ b/client/src/app/admin/panel/staff/admin-panel-staff-members.scss
@@ -26,4 +26,21 @@
     &__private {
         margin-left: 5px;
     }
+
+    @media screen and (max-width: 415px) {
+        .admin-panel-staff-members {
+            &__drowpdown {
+                float: unset;
+            }
+
+            &__button {
+                float: unset;
+                margin: 15px;
+            }
+
+            &__wrapper {
+                height: unset;
+            }
+        }
+    }
 }
diff --git a/client/src/app/admin/panel/tickets/admin-panel-view-ticket.scss b/client/src/app/admin/panel/tickets/admin-panel-view-ticket.scss
index bdb36b07..99b178d5 100644
--- a/client/src/app/admin/panel/tickets/admin-panel-view-ticket.scss
+++ b/client/src/app/admin/panel/tickets/admin-panel-view-ticket.scss
@@ -15,4 +15,13 @@
     &__ticket-view {
         margin: 20px 30px;
     }
-}
\ No newline at end of file
+
+    @media screen and (max-width: 415px) {
+        margin: 0;
+
+        .admin-panel-view-ticket__ticket-view {
+            margin: 20px 0;
+        }
+    }
+
+}
diff --git a/client/src/app/admin/panel/users/admin-panel-ban-users.js b/client/src/app/admin/panel/users/admin-panel-ban-users.js
index b4b215bc..0339131b 100644
--- a/client/src/app/admin/panel/users/admin-panel-ban-users.js
+++ b/client/src/app/admin/panel/users/admin-panel-ban-users.js
@@ -50,7 +50,7 @@ class AdminPanelBanUsers extends React.Component {
                     </span>
                     <Form {...this.getFormProps()}>
                         <FormField className="admin-panel-ban-users__input" placeholder="email" name="email" validation="EMAIL" required fieldProps={{size: 'large'}}/>
-                        <SubmitButton>{i18n('BAN_EMAIL')}</SubmitButton>
+                        <SubmitButton className="admin-panel-ban-users__submit-button">{i18n('BAN_EMAIL')}</SubmitButton>
                     </Form>
                     {this.renderMessage()}
                 </div>
@@ -156,4 +156,4 @@ class AdminPanelBanUsers extends React.Component {
     }
 }
 
-export default AdminPanelBanUsers;
\ No newline at end of file
+export default AdminPanelBanUsers;
diff --git a/client/src/app/admin/panel/users/admin-panel-ban-users.scss b/client/src/app/admin/panel/users/admin-panel-ban-users.scss
index 379b437c..865dd413 100644
--- a/client/src/app/admin/panel/users/admin-panel-ban-users.scss
+++ b/client/src/app/admin/panel/users/admin-panel-ban-users.scss
@@ -33,4 +33,33 @@
     &__form-message {
         margin-top: 20px;
     }
-}
\ No newline at end of file
+
+    @media screen and (max-width: 415px) {
+        .admin-panel-ban-users {
+            &__input {
+                display: unset;
+            }
+
+            &__submit-button {
+                margin: 20px 0;
+            }
+
+            &__ban-email {
+                margin-top: 40px;
+            }
+
+            &__email-row {
+                text-align: unset;
+                padding: 0;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+            }
+
+            &__un-ban-button {
+                float: unset;
+                margin: 15px 0;
+            }
+        }
+    }
+}
diff --git a/client/src/app/app.scss b/client/src/app/app.scss
index c25ac3f2..047276a1 100644
--- a/client/src/app/app.scss
+++ b/client/src/app/app.scss
@@ -12,16 +12,13 @@
 
             &-header {
                 border-radius: 0;
-                height: 40px;
 
                 &__login-links {
-                    padding-top: 8px;
-                    padding-left: 22px;
+
                 }
 
                 &__languages {
-                    top: 10px;
-                    left: -20px;
+
                 }
             }
 
diff --git a/client/src/app/main/main-check-ticket-page.scss b/client/src/app/main/main-check-ticket-page.scss
index 935387f8..c379063c 100644
--- a/client/src/app/main/main-check-ticket-page.scss
+++ b/client/src/app/main/main-check-ticket-page.scss
@@ -21,4 +21,22 @@
         height: 78px;
         width: 304px;
     }
-}
\ No newline at end of file
+
+    @media screen and (max-width: 415px) {
+        .main-check-ticket-page {
+            &__inputs {
+                display: unset;
+            }
+
+            &__input {
+                width: 300px;
+                margin: 0;
+                display: unset;
+            }
+
+            &__form {
+                width: 280px;
+            }
+        }
+    }
+}
diff --git a/client/src/app/main/main-layout-footer.scss b/client/src/app/main/main-layout-footer.scss
index 2c7d1cc4..ec298f83 100644
--- a/client/src/app/main/main-layout-footer.scss
+++ b/client/src/app/main/main-layout-footer.scss
@@ -3,7 +3,7 @@
 .main-layout-footer {
     background-color: $primary-blue;
     text-align: center;
-    height: 32px;
+    min-height: 32px;
     width: 100%;
 
     &__powered,
@@ -37,4 +37,16 @@
             padding-left: 20px;
         }
     }
-}
\ No newline at end of file
+
+    @media screen and (max-width: 415px) {
+        &_admin-panel {
+            .main-layout-footer {
+                &__powered,
+                &__extra-link {
+                    float: unset;
+                    padding: 5px;
+                }
+            }
+        }
+    }
+}
diff --git a/client/src/app/main/main-layout-header.js b/client/src/app/main/main-layout-header.js
index 6cad5ac2..e6cdc039 100644
--- a/client/src/app/main/main-layout-header.js
+++ b/client/src/app/main/main-layout-header.js
@@ -37,18 +37,19 @@ class MainLayoutHeader extends React.Component {
             result = (
                 <div className="main-layout-header__login-links">
                     <Button
+                    className="main-layout-header__login-links__button"
                     type="clean"
                     onClick={this.onHideLoginForm.bind(this)}
                     route={{to:'/'}}>
                         {i18n('HOME')}
                     </Button>
                     {(config['registration'] * 1) ?
-                        <Button type="clean" route={{to:'/signup'}}>
+                        <Button className="main-layout-header__login-links__button" type="clean" route={{to:'/signup'}}>
                             {i18n('SIGN_UP')}
                         </Button> :
                         null}
                     {!config['mandatory-login'] ?
-                        <Button type="clean" onClick={this.onShowLoginForm.bind(this)} route={{to:'/'}}>
+                        <Button className="main-layout-header__login-links__button" type="clean" onClick={this.onShowLoginForm.bind(this)} route={{to:'/'}}>
                             {i18n('LOG_IN')}
                         </Button> :
                         null}
diff --git a/client/src/app/main/main-layout-header.scss b/client/src/app/main/main-layout-header.scss
index 037ef32b..0410d752 100644
--- a/client/src/app/main/main-layout-header.scss
+++ b/client/src/app/main/main-layout-header.scss
@@ -17,33 +17,21 @@
         border-top-left-radius: 4px;
         color: white;
         display: inline-block;
-        height: 32px;
-        padding: 5px 20px 0 10px;
+        min-height: 32px;
+        width: 100%;
+        padding: 5px 170px 5px 10px;
+
+        &__button {
+            margin: 5px;
+        }
+
     }
 
     &__languages {
-        display: inline-block;
-        position: relative;
-        top: 5px;
+        right: 5px;
+        position: absolute;
+        bottom: 0;
         margin: 0 6px;
     }
 
-    @media screen and (max-width: 500px) {
-        .main-layout-header__languages {
-            float: none;
-        }
-    }
-
-    @media (max-width: 363px) {
-        .main-layout-header__login-links{
-           padding: 8px 0 0 0;
-        }
-    }
-
-    @media (max-width: 350px) {
-        .main-layout-header__languages {
-            margin: 0 3px;
-            left: unset;
-        }
-    }
-}
\ No newline at end of file
+}