From ffb9eb117041cf65f13c1366243fb9cefa5d860b Mon Sep 17 00:00:00 2001
From: Daniel Supernault <danielsupernault@gmail.com>
Date: Sat, 15 Dec 2018 16:40:15 -0700
Subject: [PATCH] Improve component responsiveness

---
 resources/assets/js/components/PostComponent.vue | 11 +++++++----
 resources/assets/js/components/Timeline.vue      |  6 +++++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/resources/assets/js/components/PostComponent.vue b/resources/assets/js/components/PostComponent.vue
index 7a507a678..97bc943d0 100644
--- a/resources/assets/js/components/PostComponent.vue
+++ b/resources/assets/js/components/PostComponent.vue
@@ -11,9 +11,11 @@
   background: #fff;
 }
 
-.postPresenterContainer {
-  background: #000;
-  min-height: 600px;
+@media(min-width: 720px) {
+  .postPresenterContainer {
+    background: #000;
+    min-height: 600px;
+  }
 }
 </style>
 <template>
@@ -51,7 +53,7 @@
           </div>
         </div>
        </div>
-        <div class="col-12 col-md-8 status-photo px-0 mx-0">
+        <div class="col-12 col-md-8 px-0 mx-0">
             <div class="postPresenterLoader text-center">
               <div class="lds-ring"><div></div><div></div><div></div><div></div></div> 
             </div>
@@ -222,6 +224,7 @@ pixelfed.presenter = {
       let el = $('<img>');
       el.attr('src', media[0]['url']);
       el.attr('title', media[0]['description']);
+      el.addClass('img-fluid');
       wrapper.append(el);
       if(status.sensitive == true) {
         let spoilerText = status.spoiler_text ? status.spoiler_text : 'CW / NSFW / Hidden Media';
diff --git a/resources/assets/js/components/Timeline.vue b/resources/assets/js/components/Timeline.vue
index 818691161..201289e7f 100644
--- a/resources/assets/js/components/Timeline.vue
+++ b/resources/assets/js/components/Timeline.vue
@@ -346,7 +346,11 @@
 		display: flex;
 		align-items: center;
 		background: #000;
-		min-height: 600px;
+	}
+	@media(min-width: 720px) {
+		.postPresenterContainer {
+			min-height: 600px;
+		}
 	}
 	.cursor-pointer {
 		cursor: pointer;