Who needs float when you can flex

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Convert code block header to a flexbox.
 - Get rid of dashed outline on article hover in article list.
 - Make comment actions slimmer.
 - Make navabr menu/search open animation nicer (scale up instead of just fading from transparency).

sass/_buttons.scss

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	align-items: baseline;
 	margin-block-start: 4rem;
 }
 

sass/_pre-container.scss

@@ -5,6 +5,9 @@
 
 	.header {
 		--shimmer: rgb(from var(--accent-color) r g b / calc(var(--color-opacity) * 2));
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
 		border-radius: var(--rounded-corner) var(--rounded-corner) 0 0;
 		background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shimmer) 75%, var(--fg-muted-1) 100%);
 		background-size: 200%;
@@ -12,14 +15,13 @@
 		height: 2.5rem;
 
 		span {
-			vertical-align: middle;
 			margin-inline-start: 0.75rem;
 			color: var(--fg-muted-5);
 			font-weight: bold;
+			line-height: 1;
 		}
 
 		button {
-			float: inline-end;
 			appearance: none;
 			transition: var(--transition);
 			cursor: pointer;

templates/partials/copy_button.html

@@ -23,8 +23,8 @@
 				// Code block header
 				let header = document.createElement("div");
 				header.classList.add("header");
-				header.appendChild(button);
 				header.appendChild(title);
+				header.appendChild(button);
 
 				// Container that holds header and the code block itself
 				let container = document.createElement("div");