Cleanup media view formatting

js/views/conversation_view.js

@@ -1742,6 +1742,8 @@
       // TODO: this view is not always in focus (e.g. after I've selected a message),
       // so need to make Esc more robust
       // Perhaps look into ConversationHeader.tsx and add an event listener in there.
+      // Up and down arrows should scroll
+      // Alt + up and down should swap between conversations / setting categories
       this.model.resetMessageSelection();
       this.closeEmojiPanel();
     },

stylesheets/_modules.scss

@@ -1736,6 +1736,7 @@
 // Module: Document List Item
 
 .module-document-list-item {
+  padding-right: 10px;
   width: 100%;
   height: 72px;
 }

stylesheets/_session_group_panel.scss

@@ -79,8 +79,16 @@
   }
 
   .module-attachment-section__items {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+
+    &-media {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      width: 100%;
+    }
+
+    &-documents { 
+      width: 100%;
+    }
   }
 
   .module-media {

ts/components/conversation/media-gallery/AttachmentSection.tsx

@@ -15,11 +15,15 @@ interface Props {
 }
 
 export class AttachmentSection extends React.Component<Props> {
-  public render() {
+  public render() {  
+    const { type } = this.props;
+    
     return (
       <div className="module-attachment-section">
         <div className="module-attachment-section__items">
-          {this.renderItems()}
+          <div className={`module-attachment-section__items-${type}`}>
+            {this.renderItems()}
+          </div>
         </div>
       </div>
     );