From f55e20d8ac5378aa3a7e2305f1ca66bc82c895aa Mon Sep 17 00:00:00 2001
From: Vincent <vincent@loki.network>
Date: Thu, 30 Jan 2020 12:03:43 +1100
Subject: [PATCH] Cleanup media view formatting

---
 js/views/conversation_view.js                        |  2 ++
 stylesheets/_modules.scss                            |  1 +
 stylesheets/_session_group_panel.scss                | 12 ++++++++++--
 .../conversation/media-gallery/AttachmentSection.tsx |  8 ++++++--
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 1113b4309..64251e1f9 100644
--- a/js/views/conversation_view.js
+++ b/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();
     },
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index 1f65d97d8..bdd2c96d8 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1736,6 +1736,7 @@
 // Module: Document List Item
 
 .module-document-list-item {
+  padding-right: 10px;
   width: 100%;
   height: 72px;
 }
diff --git a/stylesheets/_session_group_panel.scss b/stylesheets/_session_group_panel.scss
index a719c4c18..bbf2460cc 100644
--- a/stylesheets/_session_group_panel.scss
+++ b/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 {
diff --git a/ts/components/conversation/media-gallery/AttachmentSection.tsx b/ts/components/conversation/media-gallery/AttachmentSection.tsx
index 1bfdf7eb3..b0a360e17 100644
--- a/ts/components/conversation/media-gallery/AttachmentSection.tsx
+++ b/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>
     );