lil tweaks

web/source/css/_media-wrapper.css

@@ -29,7 +29,6 @@
 	border-radius: $br;
 	position: relative;
 	overflow: hidden;
-	z-index: 2;
 
 	img {
 		width: 100%;
@@ -59,7 +58,6 @@
 			position: absolute;
 			height: 100%;
 			width: 100%;
-			z-index: 3;
 			overflow: hidden;
 
 			display: grid;

web/source/css/status.css

@@ -28,8 +28,6 @@
 	padding-top: 0.75rem;
 
 	a {
-		position: relative;
-		z-index: 1;
 		color: inherit;
 		text-decoration: none;
 	}
@@ -109,11 +107,6 @@
 		gap: 0.5rem;
 	}
 
-	.text-spoiler > summary, .text {
-		position: relative;
-		z-index: 1;
-	}
-
 	.text-spoiler > summary {
 		list-style: none;
 		display: flex;
@@ -193,7 +186,6 @@
 
 		.poll {
 			background-color: $gray2;
-			z-index: 2;
 			
 			display: flex;
 			flex-direction: column;
@@ -277,7 +269,6 @@
 			}
 
 			details.stats-more-info {
-				z-index: 2;
 				margin-left: auto;
 				
 				& > summary {
@@ -350,7 +341,7 @@
 			.stats-more-info-content {
 				position: absolute;
 				right: 0;
-				z-index: 3;
+				z-index: 2;
 				
 				flex-direction: column;
 				max-width: 100%;
@@ -374,7 +365,6 @@
 			}
 
 			.stats-item:not(.published-at):not(.edit-timeline) {
-				z-index: 2;
 				user-select: none;
 			}
 

web/source/frontend/index.js

@@ -338,3 +338,25 @@ Array.from(document.getElementsByTagName('time')).forEach(timeTag => {
 		timeTag.textContent = dateTimeFormat.format(date);
 	}
 });
+
+// When clicking anywhere that's not an open
+// stats-info-more-content details dropdown,
+// close that open dropdown.
+document.body.addEventListener("click", (e) => {
+	const openStats = document.querySelector("details.stats-more-info[open]");
+	if (!openStats) {
+		// No open stats
+		// details element.
+		return;
+	}
+
+	if (openStats.contains(e.target)) {
+		// Click is within stats
+		// element, leave it alone.
+		return;
+	}
+
+	// Click was outside of
+	// stats elements, close it. 
+	openStats.removeAttribute("open");
+});

web/template/status_info.tmpl

@@ -83,7 +83,7 @@
         {{- else }}
         {{- end }}
     </dl>
-    <details class="stats-more-info">
+    <details class="stats-more-info" name="stats-more-info">
         <summary title="More info">
             <i class="fa fa-fw fa-info" aria-hidden="true"></i>
             <span class="sr-only">More info</span>