diff --git a/internal/webserver/static/styles.css b/internal/webserver/static/styles.css
index 2780a27..2df9151 100644
--- a/internal/webserver/static/styles.css
+++ b/internal/webserver/static/styles.css
@@ -393,7 +393,12 @@ main {
 	box-shadow: 0 0 1em var(--color-twitter-blue);
 	outline: none;
 	overflow: visible;
-	padding: 1.4em;
+	padding: 0;
+	line-height: 0;
+
+	.image-carousel__padding {
+		padding: 1.4em;
+	}
 
 	&::backdrop {
 		background: hsla(204, 87%, 73%, 0.3); /* based on --color-twitter-blue-light */
diff --git a/internal/webserver/tpl/includes/base.tpl b/internal/webserver/tpl/includes/base.tpl
index d11c302..b3755d0 100644
--- a/internal/webserver/tpl/includes/base.tpl
+++ b/internal/webserver/tpl/includes/base.tpl
@@ -39,9 +39,15 @@
       <main>
         {{template "main" .}}
       </main>
-      <dialog id="image_carousel" class="image-carousel">
-        <a class="button image-carousel__close-button" onclick="image_carousel.close()">X</a>
-        <img class="image-carousel__active-image" src="">
+      <dialog
+        id="image_carousel"
+        class="image-carousel"
+        onmousedown="event.button == 0 && event.target==this && this.close()"
+      >
+        <div class="image-carousel__padding">
+          <a class="button image-carousel__close-button" onclick="image_carousel.close()">X</a>
+          <img class="image-carousel__active-image" src="">
+        </div>
       </dialog>
       <div class="toasts" id="toasts">
       </div>