Multiple UI Improvements

web/react/components/more_direct_channels.jsx

@@ -140,12 +140,11 @@ export default class MoreDirectChannels extends React.Component {
         if (user.nickname) {
             const separator = fullName ? ' - ' : '';
             details.push(
-                <p
+                <span
                     key={`${user.nickname}__nickname`}
-                    className='more-description'
                 >
                     {separator + user.nickname}
-                </p>
+                </span>
             );
         }
 
@@ -184,7 +183,9 @@ export default class MoreDirectChannels extends React.Component {
                     <div className='more-name'>
                         {user.username}
                     </div>
-                    {details}
+                    <div className='more-description'>
+                        {details}
+                    </div>
                 </td>
                 <td className='td--action lg'>
                     {joinButton}

web/react/utils/utils.jsx

@@ -519,11 +519,11 @@ export function applyTheme(theme) {
         changeCss('.modal .custom-textarea:focus', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.channel-intro, .settings-modal .settings-table .settings-content .divider-dark, hr, .settings-modal .settings-table .settings-links', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, pre', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
-        changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-channel-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
+        changeCss('.post.current--user .post-body, .post.post--comment.other--root.current--user .post-comment, .post.post--comment.other--root .post-comment, .post.same--root .post-body, .modal .more-table tbody>tr td, .member-div:first-child, .member-div, .access-history__table .access__report, .activity-log__table', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.1), 2);
         changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('@media(max-width: 1440px){.post.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
         changeCss('@media(max-width: 1800px){.inner__wrap.move--left .post.post--comment.same--root', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.07), 2);
-        changeCss('.post:hover, .modal .more-channel-table tbody>tr:hover td, .sidebar--right .sidebar--right__header, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
+        changeCss('.post:hover, .modal .more-table tbody>tr:hover td, .sidebar--right .sidebar--right__header, .settings-modal .settings-table .settings-content .section-min:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.date-separator.hovered--before:after, .date-separator.hovered--after:before, .new-separator.hovered--after:before, .new-separator.hovered--before:after', 'background:' + changeOpacity(theme.centerChannelColor, 0.07), 1);
         changeCss('.command-name:hover, .mentions-name:hover, .mentions-focus, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('code', 'background:' + changeOpacity(theme.centerChannelColor, 0.1), 1);

web/sass-files/sass/partials/_modal.scss

@@ -194,7 +194,7 @@
 			position: relative;
 			max-width: 90%;
 			min-height: 100px;
-			min-width: 240px;
+			min-width: 320px;
 			@include border-radius(3px);
 			display: table;
 			margin: 0 auto;
@@ -338,7 +338,7 @@
 .modal-direct-channels {
 
 	.user-list {
-		margin-top: 20px;
+		margin-top: 10px;
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 		max-height: 500px;

web/sass-files/sass/partials/_responsive.scss

@@ -267,6 +267,7 @@
             }
         }
         .file-details {
+            width: 100%;
             height: auto;
         }
     }
@@ -697,7 +698,7 @@
         .modal-image {
             .image-wrapper {
                 font-size: 12px;
-                min-width: 280px;
+                min-width: 250px;
                 .modal-close {
                     @include opacity(1);
                 }