web/timeline: use css grid for url previews and improve inline style

web/src/index.css

@@ -22,6 +22,7 @@
 
 	--border-color: #ccc;
 	--pill-background-color: #ccc;
+	--url-preview-background-color: #ddd;
 	--highlight-pill-background-color: #c00;
 	--highlight-pill-text-color: #fff;
 	--button-hover-color: rgba(0, 0, 0, .2);
@@ -109,6 +110,7 @@
 
 		--border-color: #222;
 		--pill-background-color: #222;
+		--url-preview-background-color: #222;
 		--button-hover-color: rgba(255, 255, 255, .2);
 		--light-hover-color: rgba(255, 255, 255, .1);
 

web/src/ui/timeline/URLPreviews.css

@@ -7,41 +7,57 @@ div.url-previews {
 	> div.url-preview {
 		margin: 0.5rem 0;
 		border-radius: 0.5rem;
-		background-color: var(--pill-background-color);
+		background-color: var(--url-preview-background-color);
-		border: 1px solid var(--border-color);
+		border: 1px solid var(--url-preview-background-color);
+		display: grid;
+
+		grid-template:
+			"title"       auto
+			"description" auto
+			"media"       auto
+			/ 1fr;
 
 		div.title {
-			margin: 0.5rem 0.5rem 0 0.5rem;
+			grid-area: title;
-			display: -webkit-box;
+			margin: 0.5rem 0.5rem 0;
-			-webkit-line-clamp: 1;
-			line-clamp: 1;
-			-webkit-box-orient: vertical;
 			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			font-weight: bold;
 		}
 
 		div.description {
-			margin: 0 0.5rem 0.5rem 0.5rem;
+			grid-area: description;
+			margin: 0 0.5rem 0.5rem;
 			display: -webkit-box;
-			-webkit-line-clamp: 3;
-			line-clamp: 3;
-			-webkit-box-orient: vertical;
 			overflow: hidden;
+			-webkit-line-clamp: 3;
+			-webkit-box-orient: vertical;
 			color: var(--semisecondary-text-color);
 		}
 
 		> div.media-container {
-			border-radius: 0 0 0.5rem 0.5rem;
+			grid-area: media;
+			border-radius: 0 0 .5rem .5rem;
+			background-color: var(--background-color);
 		}
 
 		&.inline {
-			display: flex;
+			grid-template:
-			flex-direction: row;
+				"media title"       auto
-			min-width: 320px;
+				"media description" auto
-			max-width: 320px;
+				/ auto auto;
+			width: 100%;
+			max-width: 20rem;
 
-			> div.media-container {
+			> div.inline-media-wrapper {
-				border-radius: none;
+				grid-area: media;
-				margin: 0.5rem;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				background-color: var(--background-color);
+				border-radius: .5rem 0 0 .5rem;
+				padding: .5rem;
 			}
 		}
 	}

web/src/ui/timeline/URLPreviews.tsx

@@ -46,39 +46,33 @@ const URLPreviews = ({ event, room }: {
 				let containerSize: ImageContainerSize | undefined
 				let inline = false
 				if (aspectRatio < 1.2) {
-					containerSize = { width: 70, height: 70 }
+					containerSize = { width: 80, height: 80 }
 					inline = true
 				}
 				const style = calculateMediaSize(p["og:image:width"], p["og:image:height"], containerSize)
 
-				const title = p["og:title"] ?? p["og:url"] ?? p.matched_url
+				const url = p["og:url"] ?? p.matched_url
+				const title = p["og:title"] ?? p["og:url"] ?? url
+				const mediaContainer = <div className="media-container" style={style.container}>
+					<img
+						loading="lazy"
+						style={style.media}
+						src={mediaURL}
+						alt=""
+					/>
+				</div>
 				return <div
+					key={url}
 					className={inline ? "url-preview inline" : "url-preview"}
-					style={inline ? {} : { width: style.container.width }}>
+					style={inline ? {} : { width: style.container.width }}
-					{mediaURL && inline && <div className="media-container" style={style.container}>
+				>
-						<img
+					<div className="title">
-							loading="lazy"
+						<a href={url} title={title} target="_blank" rel="noreferrer noopener">{title}</a>
-							style={style.media}
-							src={mediaURL}
-							alt={p["og:title"]}
-							title={p["og:title"]}
-						/>
-					</div>}
-					<div className="title-description">
-						<div className="title">
-							<a href={p.matched_url} title={title} target="_blank"><b>{title}</b></a>
-						</div>
-						<div className="description">{p["og:description"]}</div>
 					</div>
-					{mediaURL && !inline && <div className="media-container" style={style.container}>
+					<div className="description">{p["og:description"]}</div>
-						<img
+					{mediaURL && (inline
-							loading="lazy"
+						? <div className="inline-media-wrapper">{mediaContainer}</div>
-							style={style.media}
+						: mediaContainer)}
-							src={mediaURL}
-							alt={p["og:title"]}
-							title={p["og:title"]}
-						/>
-					</div>}
 				</div>
 			})}
 	</div>