diff --git a/htdocs/RoutePatientDocuments.vue b/htdocs/RoutePatientDocuments.vue
index 3006170..dd93c39 100644
--- a/htdocs/RoutePatientDocuments.vue
+++ b/htdocs/RoutePatientDocuments.vue
@@ -2,10 +2,10 @@
 	<Subtitle value="Documents" />
 	<Subtitle :value="patient_info.name" />
 	<div class="row">
-		<div class="selector col-12 col-xl-4">
+		<div class="selector col-12" :class="{ 'col-xl-4': selection_text }">
 			<div class="card mb-3 shadow">
 				<div class="card-header"><template v-if="resultset.length > 0">{{resultset.length}}<template v-if="has_more">+</template></template><template v-else-if="is_loading">Loading</template><template v-else>No</template> record{{resultset.length == 1 ? '' : 's'}}</div>
-				<ul class="scroller list-group list-group-flush" ref="scroller">
+				<ul class="scroller list-group list-group-flush" :class="{ 'list-skinny': selection_text }" ref="scroller">
 					<router-link v-for="item in resultset" :to="'/patient/' + patient_dfn + '/document/' + item.IEN" replace custom v-slot="{ navigate, href }">
 						<li :key="item" class="record list-group-item" :class="{ 'active': selection == item.IEN }" :title="datetimestring(strptime_vista(item.time)) + '\n' + item.title + '\n' + item.location + '\n' + item.author.byline" @click="navigate">
 							<div class="row">
@@ -22,7 +22,10 @@
 		</div>
 		<div v-if="selection_text" class="col-12 col-xl-8">
 			<div class="card mb-3 shadow">
-				<div class="card-header">{{doctitle(selection_text) || 'Document'}}</div>
+				<div class="card-header d-flex justify-content-between align-items-center">
+					<span>{{doctitle(selection_text) || 'Document'}}</span>
+					<router-link class="close" :to="'/patient/' + patient_dfn + '/document'" replace>❌</router-link>
+				</div>
 				<div class="detail card-body">{{selection_text}}</div>
 			</div>
 		</div>
@@ -35,7 +38,7 @@
 		top: 1.15rem;
 		z-index: 1;
 	}
-	ul.scroller {
+	ul.scroller.list-skinny {
 		max-height: 25vh;
 		overflow-y: auto;
 	}
@@ -59,6 +62,10 @@
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+	a.close {
+		cursor: default;
+		text-decoration: none;
+	}
 	div.detail {
 		font-family: monospace;
 		white-space: pre-wrap;
@@ -67,7 +74,7 @@
 		div.selector {
 			position: static;
 		}
-		ul.scroller {
+		ul.scroller.list-skinny {
 			max-height: 75vh;
 		}
 		div.cell.secondary {
@@ -105,7 +112,8 @@
 				resultset: [],
 				selection: null,
 				selection_text: null,
-				observer_bottom: null
+				observer_scroller: null,
+				observer_viewport: null
 			};
 		},
 		watch: {
@@ -164,9 +172,6 @@
 				} finally {
 					this.is_loading = false;
 				}
-			},
-			handle_bottom([entry]) {
-				if((entry.isIntersecting) && (this.has_more) && (!this.is_loading)) this.load_more();
 			}
 		},
 		created() {
@@ -189,11 +194,14 @@
 			);
 		},
 		mounted() {
-			this.observer_bottom = new IntersectionObserver(this.handle_bottom, { root: this.$refs.scroller, rootMargin: '25%' });
-			this.observer_bottom.observe(this.$refs.bottom);
+			this.observer_scroller = new IntersectionObserver(([entry]) => { if((entry.isIntersecting) && (this.selection_text) && (this.has_more) && (!this.is_loading)) this.load_more(); }, { root: this.$refs.scroller, rootMargin: '25%' });
+			this.observer_scroller.observe(this.$refs.bottom);
+			this.observer_viewport = new IntersectionObserver(([entry]) => { if((entry.isIntersecting) && (!this.selection_text) && (this.has_more) && (!this.is_loading)) this.load_more(); }, { rootMargin: '25%' });
+			this.observer_viewport.observe(this.$refs.bottom);
 		},
 		destroyed() {
-			if(this.observer_bottom) this.observer_bottom.disconnect();
+			if(this.observer_viewport) this.observer_viewport.disconnect();
+			if(this.observer_scroller) this.observer_scroller.disconnect();
 		}
 	};
 </script>