[MM-26334] Fixes direct messages loading screen misalignment (#6813)

Summary:
Reduces the height of the loading screen so it is more centered and/or unintrusive(small screens) enough to remove the scroll bar during loading.

Ticket Link:
Fixes mattermost/mattermost#15926

components/__snapshots__/searchable_channel_list.test.jsx.snap

@@ -42,11 +42,7 @@ exports[`components/SearchableChannelList should match init snapshot 1`] = `
     >
       <LoadingScreen
         position="relative"
-        style={
-          Object {
-            "marginTop": "50%",
-          }
-        }
+        style={Object {}}
       />
     </div>
   </div>

components/searchable_channel_list.jsx

@@ -147,7 +147,7 @@ export default class SearchableChannelList extends React.PureComponent {
         let previousButton;
 
         if (this.props.loading && channels.length === 0) {
-            listContent = <LoadingScreen style={{marginTop: '50%'}}/>;
+            listContent = <LoadingScreen/>;
         } else if (channels.length === 0) {
             listContent = (
                 <div className='no-channel-message'>

sass/components/_modal.scss

@@ -591,6 +591,11 @@
 }
 
 .more-modal {
+    .loading-screen{
+        padding: 1.9em 1em;
+        font-size: 1.25em;
+        height: auto;
+    }
     .Select-input {
         >input {
             padding: 8px 0;
@@ -923,7 +928,6 @@
     >div {
         flex: 1 1 auto;
     }
-
     .multi-select__wrapper {
         display: flex;
         flex-direction: column;