From 06e373bb49a0059278f706b2bc4183f66023e45c Mon Sep 17 00:00:00 2001
From: Devlin Junker <devlin.junker@gmail.com>
Date: Wed, 4 Oct 2023 19:59:21 -0700
Subject: start on mobile view

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>
---
 src/components/feed-display/FeedItemDisplay.vue    |  4 +++
 .../feed-display/FeedItemDisplayList.vue           | 33 ++++++++++++++++++++--
 2 files changed, 34 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index d1dde278e..efe14a3b4 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -282,6 +282,10 @@ export default Vue.extend({
     font-size: 17px;
 	}
 
+	.article table {
+		white-space: unset;
+	}
+
 	.action-bar {
 		padding: 0px 20px 0px 20px;
 
diff --git a/src/components/feed-display/FeedItemDisplayList.vue b/src/components/feed-display/FeedItemDisplayList.vue
index 44e4b070a..f49222b51 100644
--- a/src/components/feed-display/FeedItemDisplayList.vue
+++ b/src/components/feed-display/FeedItemDisplayList.vue
@@ -27,6 +27,7 @@
 		</div>
 		<div class="feed-item-display-container">
 			<VirtualScroll :reached-end="reachedEnd"
+				class="item-list"
 				:fetch-key="fetchKey"
 				@load-more="fetchMore()">
 				<template v-if="items && items.length > 0">
@@ -181,9 +182,10 @@ export default Vue.extend({
 
 <style scoped>
 	.feed-item-display-list {
-		height: 100%;
 		display: flex;
 		flex-direction: column;
+		overflow-y: hidden;
+		height: 100%;
 	}
 
 	.virtual-scroll {
@@ -194,12 +196,37 @@ export default Vue.extend({
 	.feed-item-display-container {
 		display: flex;
 		height: 100%;
+		overflow-y: hidden;
+	}
+
+	@media only screen and (min-width: 320px) {
+		.virtual-scroll {
+			flex: 1 1.2 auto;
+		}
+
+		.feed-item-display-container {
+			flex-direction: column;
+		}
+
+		.feed-item-container {
+			flex: 1 1 1000px;
+			max-height: calc(100vh - 200px)
+		}
+	}
+
+	@media only screen and (min-width: 768px) {
+		.feed-item-display-container {
+			flex-direction: row;
+		}
+
+		.feed-item-container {
+			width: 50%;
+			max-height: unset;
+		}
 	}
 
 	.feed-item-container {
-		max-width: 50%;
 		overflow-y: hidden;
-		height: calc(100vh - 50px - 50px - 10px)
 	}
 
 	.header {
-- 
cgit v1.2.3