diff --git a/webapp/components/channel_members_modal.jsx b/webapp/components/channel_members_modal.jsx
index 9f6a2a2eb4..70547d409d 100644
--- a/webapp/components/channel_members_modal.jsx
+++ b/webapp/components/channel_members_modal.jsx
@@ -168,7 +168,7 @@ export default class ChannelMembersModal extends React.Component {
return (
+
+
);
}
if (this.props.user.position) {
const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH);
dataContent.push(
-
+
+
);
}
diff --git a/webapp/components/searchable_channel_list.jsx b/webapp/components/searchable_channel_list.jsx
index afd113975d..df1fb61f7d 100644
--- a/webapp/components/searchable_channel_list.jsx
+++ b/webapp/components/searchable_channel_list.jsx
@@ -180,7 +180,9 @@ export default class SearchableChannelList extends React.Component {
ref='channelList'
className='more-modal__list'
>
- {listContent}
+
+ {listContent}
+
{previousButton}
diff --git a/webapp/components/setting_item_max.jsx b/webapp/components/setting_item_max.jsx
index 904e6c8d13..5971ce5843 100644
--- a/webapp/components/setting_item_max.jsx
+++ b/webapp/components/setting_item_max.jsx
@@ -49,7 +49,7 @@ export default class SettingItemMax extends React.Component {
submit = (
diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index f595e0ed9f..1d3f1d0521 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -26,6 +26,11 @@ body {
word-break: break-all;
}
+.overflow--ellipsis {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.fa {
&.fa-margin--left {
margin-left: 2px;
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 4012a4611d..e23630c3bd 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -464,24 +464,10 @@
float: right;
margin-top: 5px;
}
-
- .more-modal__list {
- max-height: calc(100vh - 270px);
- }
}
}
.more-modal {
- .more-modal__list {
- height: 100vh;
- max-height: calc(100vh - 340px);
- }
-
- &.more-direct-channels {
- .more-modal__list {
- max-height: calc(100vh - 325px);
- }
- }
.user-list {
margin-top: 10px;
@@ -496,7 +482,6 @@
}
.filter-row {
- @include clearfix;
margin: 5px 0 10px;
width: 300px;
}
@@ -561,7 +546,11 @@
.more-modal__list {
display: flex;
flex-direction: column;
- overflow: auto;
+
+ > div {
+ min-height: 100%;
+ overflow: auto;
+ }
.popover & {
font-size: .95em;
@@ -606,6 +595,7 @@
.more-modal__actions {
flex-grow: 0;
flex-shrink: 0;
+ margin: 5px 0 10px;
padding-left: 20px;
}
@@ -628,8 +618,7 @@
.more-modal__row {
border-bottom: 1px solid $light-gray;
display: flex;
- min-height: 70px;
- padding: 8px 15px;
+ padding: 10px 15px;
}
p {
@@ -650,16 +639,15 @@
.filtered-user-list {
display: flex;
flex-direction: column;
+ height: calc(90vh - 120px);
width: 100%;
- .filter-row {
- flex-grow: 0;
- flex-shrink: 0;
+ > div {
+ flex: 1;
}
- .user-list {
- flex-grow: 1;
- flex-shrink: 1;
+ .more-modal__list {
+ flex-grow: 500;
}
.filter-button {
@@ -669,9 +657,6 @@
}
.filter-controls {
- @include clearfix;
- flex-grow: 0;
- flex-shrink: 0;
padding: 1em 1.5em 0;
.filter-control__next {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 16f0d3851b..39f2b1a357 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1206,6 +1206,16 @@
}
@media screen and (max-width: 640px) {
+ .filtered-user-list {
+ height: calc(100vh - 80px);
+ }
+
+ .more-modal--action {
+ .filtered-user-list {
+ height: calc(100vh - 110px);
+ }
+ }
+
.app__body {
.modal {
.more-modal {
@@ -1213,10 +1223,6 @@
max-height: calc(100vh - 62px);
padding-bottom: 5px;
}
-
- .more-modal__list {
- max-height: calc(100vh - 230px);
- }
}
}
@@ -1377,15 +1383,14 @@
@media screen and (max-width: 550px) {
.app__body {
.more-modal {
- .filter-row {
- width: 100%;
+ &.more-system-members {
+ .filter-row {
+ min-height: 80px;
+ width: 100%;
+ }
}
&.more-direct-channels {
- .filter-row {
- padding-bottom: 50px;
- }
-
.member-show {
display: none;
}
@@ -1443,16 +1448,6 @@
.app__body {
.modal {
- &.more-channel__modal {
- .more-modal__list {
- max-height: calc(100vh - 250px);
- }
-
- .modal-body {
- padding-bottom: 35px;
- }
- }
-
.settings-modal {
&.display--content {
.modal-body {