From 94039ad3efaa4e79ad4bf2c98d3ec3abd6bd255a Mon Sep 17 00:00:00 2001
From: tobi <tobi.smethurst@protonmail.com>
Date: Mon, 14 Apr 2025 13:01:47 +0200
Subject: [PATCH] fix photoswipe layout issues (chrome)

---
 web/assets/themes/midnight-trip.css   |  3 -
 web/assets/themes/solarized-dark.css  |  1 -
 web/assets/themes/solarized-light.css |  1 -
 web/source/css/_colors.css            |  2 +-
 web/source/css/_media-wrapper.css     | 98 ++++++++++++---------------
 web/source/css/_status-media.css      |  1 -
 6 files changed, 44 insertions(+), 62 deletions(-)

diff --git a/web/assets/themes/midnight-trip.css b/web/assets/themes/midnight-trip.css
index 29c143abc..059e4ac8e 100644
--- a/web/assets/themes/midnight-trip.css
+++ b/web/assets/themes/midnight-trip.css
@@ -113,9 +113,6 @@ html, body {
 .status .media .media-wrapper {
   background: var(--bg-nearly-opaque);
 }
-.status .media .media-wrapper details .unknown-attachment .placeholder {
-  border: 0.2rem dashed var(--magenta);
-}
 
 /* Polls */
 .status .text .poll {
diff --git a/web/assets/themes/solarized-dark.css b/web/assets/themes/solarized-dark.css
index b89362a72..c40853a83 100644
--- a/web/assets/themes/solarized-dark.css
+++ b/web/assets/themes/solarized-dark.css
@@ -134,7 +134,6 @@ html, body {
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
   color: var(--base1);
-  border: 0.2rem dashed var(--base1);
 }
 .status .media .media-wrapper details video.plyr-video {
   background: transparent;
diff --git a/web/assets/themes/solarized-light.css b/web/assets/themes/solarized-light.css
index bd357f7f3..6660cd8de 100644
--- a/web/assets/themes/solarized-light.css
+++ b/web/assets/themes/solarized-light.css
@@ -124,7 +124,6 @@ html, body {
 }
 .status .media .media-wrapper details .unknown-attachment .placeholder {
   color: var(--base1);
-  border: 0.2rem dashed var(--base1);
 }
 .status .media .media-wrapper details video.plyr-video {
   background: transparent;
diff --git a/web/source/css/_colors.css b/web/source/css/_colors.css
index 77f562df4..d34dc0e66 100644
--- a/web/source/css/_colors.css
+++ b/web/source/css/_colors.css
@@ -80,7 +80,7 @@ $profile-bg: $gray4;
 $button-bg: $blue2;
 $button-fg: $gray1;
 $button-hover-bg: $blue3;
-$button-focus-border: $blue3;
+$button-focus-border: $button-hover-bg;
 
 $button-danger-bg: $error3;
 $button-danger-fg: $white1;
diff --git a/web/source/css/_media-wrapper.css b/web/source/css/_media-wrapper.css
index 55ad6eba0..561ae1ed3 100644
--- a/web/source/css/_media-wrapper.css
+++ b/web/source/css/_media-wrapper.css
@@ -38,7 +38,7 @@
 	}
 
 	details {
-		position: absolute;
+		position: relative;
 		height: 100%;
 		width: 100%;
 
@@ -55,35 +55,6 @@
 			object-fit: cover;
 		}
 
-		&[open] summary {
-			height: auto;
-			width: auto;
-			margin: 1rem;
-			padding: 0;
-
-			.show {
-				display: none;
-			}
-
-			.eye.button .hide {
-				display: inline-block;
-				grid-column: 1 / span 3;
-				grid-row: 1 / span 2;
-			}
-
-			div.blurhash-container > canvas {
-				display: none;
-			}
-
-			/*
-				Hide focus outline on click
-				to avoid ugly artifacts.
-			*/
-			&:focus {
-				outline: none;
-			}
-		}
-
 		summary {
 			position: absolute;
 			height: 100%;
@@ -110,6 +81,14 @@
 				margin: 0;
 				padding: 0.4rem;
 
+				/*
+					Make button outline really thick as we can't
+					know whether media has good contrast with it.
+				*/
+				&:focus-visible {
+					outline: 0.5rem dashed $button-focus-border;
+				}
+
 				.fa-fw {
 					line-height: $fa-fw;
 				}
@@ -117,16 +96,6 @@
 				.hide {
 					display: none;
 				}
-
-				&:focus-visible {
-					/*
-						Can't rely on media having background with
-						decent contrast so inset and use button-fg
-						instead so focus is definitely visible.
-					*/
-					outline: 0.25rem dashed $button-fg;
-					outline-offset: -0.25rem;
-				}
 			}
 
 			.show.sensitive {
@@ -144,18 +113,42 @@
 			}
 		}
 
-		a.photoswipe-slide {
-			display: inline-block;
-			height: 100%;
+		&[open] summary {
+			height: auto;
+			width: auto;
+			cursor: pointer;
+
+			grid-template-columns: 1fr;
+			grid-template-rows: 1fr;
+
+			.show {
+				display: none;
+			}
+
+			.eye.button .hide {
+				display: inline-block;
+			}
+
+			div.blurhash-container,
+			div.blurhash-container > canvas {
+				display: none;
+			}
+		}
+
+		a.photoswipe-slide,
+		a.unknown-attachment {
+			position: absolute;
 			width: 100%;
+			height: 100%;
 
 			/*
-				Inset outline to avoid outline
-				being hidden by overflow: hidden.
+				Make link outline really thick as we can't
+				know whether media has good contrast with it.
+				Indent outline to avoid being hidden by overflow: hidden.
 			*/
 			&:focus-visible {
-				outline: $button-focus-outline;
-				outline-offset: -0.25rem;
+				outline: 0.5rem dotted $link-fg;
+				outline-offset: -0.5rem;
 			}
 		}
 
@@ -173,8 +166,7 @@
 				width: 100%;
 				height: 100%;
 				padding: 0.8rem;
-				border: 0.2rem dashed $white2;
-						
+
 				display: flex;
 				flex-direction: column;
 				align-items: center;
@@ -220,17 +212,13 @@
 				
 				> span.eye.button {
 					font-size: smaller;
-					padding: 0 0.2rem 0 0.2rem;
+					padding: 0.2rem;
 	
 					> .fa-fw {
 						line-height: 1.4rem;
 					}
 				}
 			}
-
-			&[open] > summary {
-				margin: 0.5rem;
-			}
 		}
 	}
 
@@ -248,7 +236,7 @@
 				
 				> span.eye.button {
 					font-size: small;
-					padding: 0 0.1rem 0 0.1rem;
+					padding: 0.1rem;
 	
 					> .fa-fw {
 						line-height: 1.2rem;
diff --git a/web/source/css/_status-media.css b/web/source/css/_status-media.css
index 761b969be..a383715be 100644
--- a/web/source/css/_status-media.css
+++ b/web/source/css/_status-media.css
@@ -20,7 +20,6 @@
 @import "./_media-wrapper.css";
 
 .media {
-	grid-column: span 3;
 	display: grid;
 	grid-template-columns: 50% 50%;
 	grid-auto-rows: 10rem;