Fix download button markup to make the left side rounded

Author: darashi

frontend/src/components/DownloadLink.tsx

@@ -21,27 +21,32 @@ export function DownloadLink({
 	filesize: number | undefined;
 }) {
 	return (
-		<div className="join">
-			<div className="join-item flex items-center justify-center mr-2 font-bold text-base-content/60">
+		<div className="flex items-center">
+			<div className="mr-2 font-bold text-base-content/60">
 				{label}
 			</div>
-			<a href={url} download>
+
+			<div className="join">
+				<a href={url} download>
+					<button
+						type="button"
+						className={`btn btn-sm join-item ${
+							filesize ? "tooltip tooltip-top" : ""
+						}`}
+						{...(filesize && { "data-tip": humanizeSize(filesize) })}
+					>
+						<HardDriveDownload size={16} />
+					</button>
+				</a>
 				<button
 					type="button"
-					className={`btn btn-sm join-item ${filesize ? "tooltip tooltip-top" : ""}`}
-					{...(filesize && { "data-tip": humanizeSize(filesize) })}
+					className="btn btn-sm join-item tooltip tooltip-top"
+					data-tip="Copy link"
+					onClick={() => navigator.clipboard.writeText(url)}
 				>
-					<HardDriveDownload size={16} />
+					<Link size={16} />
 				</button>
-			</a>
-			<button
-				type="button"
-				className="btn btn-sm join-item tooltip tooltip-top"
-				data-tip="Copy link"
-				onClick={() => navigator.clipboard.writeText(url)}
-			>
-				<Link size={16} />
-			</button>
+			</div>
 		</div>
 	);
 }