A user script that makes channel topics easier to read by turning them into modals on click.

elementio_modals.css

/* This CSS is added into the page by the script, I added it here for clearity. */
#modalOverlay {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 98;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);
    opacity: 0.5;
    transition: opacity 500ms ease 0s;
}

#modal {
    position: fixed;
    left: 23vw;
    top: 23vh;
    z-index: 99;
    background-color: rgb(34, 38, 46);
    border-radius: 5px;
    padding: 20px 40px;
    width: 50vw;
    max-height: 50vh;
    opacity: 1;
    overflow: hidden scroll;
    text-overflow: ellipsis;
    transition: opacity 500ms ease 0s;
}

#modal a,
#modal a:link,
#modal a:visited {
    color: #91c7ff;
}

elementio_modals.js

// ==UserScript==
// @name         Modals for Channel Topics on Element.io
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        [REPLACE THIS WITH A URL]
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function () {
	("use strict");

	// The stylesheet as a Javascript Object.
	const styleSheetObj = {
		"#modalOverlay": {
			position: "fixed",
			left: "0px",
			top: "0px",
			zIndex: 98,
			width: "100%",
			height: "100%",
			backgroundColor: "rgb(0, 0, 0)",
			opacity: 0.5,
			transition: "opacity 500ms ease 0s",
		},
		"#modal": {
			position: "fixed",
			left: "23vw",
			top: "23vh",
			zIndex: 99,
			backgroundColor: "rgb(34, 38, 46)",
			borderRadius: "5px",
			padding: "20px 40px",
			width: "50vw",
			maxHeight: "50vh",
			opacity: 1,
			overflow: "hidden scroll",
			textOverflow: "ellipsis",
			transition: "opacity 500ms ease 0s",
		},
		"#modal a,#modal a:link,#modal a:visited": { color: "#91c7ff" },
	};

	// Parse `styleSheetObj` and add it to our stylesheet.
	// This uses CSSStyle so it will not appear in the HTML.
	function addStyles(styleElement, object) {
		const sheet = styleElement.sheet;
		Object.entries(object).map(([k, v]) => {
			styleElement.sheet.insertRule(
				[
					k,
					"{",
					Object.entries(v)
						.map(([k, v]) => {
							k = k.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
							return `${k}:${v}`;
						})
						.join(";"),
					"}",
				].join("")
			);
		});
		console.log(sheet);
	}

	let styleElement = document.createElement("style");
	styleElement = document.body.appendChild(styleElement);
	addStyles(styleElement, styleSheetObj);

	// Create the actual modal and display the text from the given element.
	function buildModal(element) {
		// Create the modal itself.
		const modal = document.createElement("div");
		modal.id = "modal";
		modal.style.opacity = "0";

		// Create a background for our modal.
		const overlay = document.createElement("div");
		overlay.id = "modalOverlay";
		overlay.style.opacity = "0";

		// If we double clicked on the modal that means we want to exit.
		// Make everything opacity 0. (This also deletes our elements.)
		modal.ondblclick = () => {
			modal.style.opacity = "0";
			overlay.style.opacity = "0";
		};

		// If we click on the background, make everything vanish.
		overlay.onclick = () => {
			modal.style.opacity = "0";
			overlay.style.opacity = "0";
		};

		modal.innerHTML = element.innerHTML.replaceAll("\n", "<br>");
		document.body.appendChild(overlay);
		document.body.appendChild(modal);

		// CSS is weird, and for some reason the animation doesn't play
		// correctly if we don't run the following async.
		setTimeout(() => {
			overlay.style.opacity = "0.5";
			modal.style.opacity = "1";

			// When our transition ends, and the opacity is 0, delete the elements.
			modal.addEventListener("transitionend", (ev) => {
				if (ev.propertyName === "opacity" && modal.style.opacity === "0") {
					modal.remove();
					overlay.remove();
				}
			});
		}, 1);
	}

	// Search for and bind all elements ("topics") matching the query selector.
	function modalInit() {
		const topics = document.querySelectorAll(".mx_RoomHeader .mx_RoomHeader_topic");
		for (const topic of topics) {
			console.log(topic);
			topic.onclick = () => {
				buildModal(topic);
				return false;
			};
		}
	}

	// Delay searching for topics by one second, because I couldn't find a way
	// to check if the page was loaded.
	setTimeout(modalInit, 1000);

	// Search for topics when the hash changes, ie. when the user goes to a
	// different channel.
	window.addEventListener("hashchange", modalInit, false);
})();