fix: widen Profile and Terminal Options modals by setting modal-content width to 80vw (+min/max)

Author: haydenholligan

src/modals.ts

@@ -69,7 +69,7 @@ const
 	})()
 
 export class TerminalOptionsModal
-	extends EditDataModal<Settings.Profile.TerminalOptions> {
+extends EditDataModal<Settings.Profile.TerminalOptions> {
 	public constructor(
 		context: TerminalPlugin,
 		data: Settings.Profile.TerminalOptions,
@@ -79,10 +79,21 @@ export class TerminalOptionsModal
 		super(context, data, Settings.Profile.fixTerminalOptions, {
 			...options,
 			elements: ["data"],
-			title: () => i18n.t("components.terminal-options.title"),
+		title: () => i18n.t("components.terminal-options.title"),
 		})
 	}
 
+	public override onOpen(): void {
+		super.onOpen()
+		// Ensure modal and content expand wide regardless of theme defaults
+		this.modalEl.style.width = "80vw"
+		this.modalEl.style.maxWidth = "900px"
+		this.modalEl.style.minWidth = "600px"
+		this.contentEl.style.width = "80vw"
+		this.contentEl.style.maxWidth = "900px"
+		this.contentEl.style.minWidth = "600px"
+	}
+
 	protected override draw(
 		ui: UpdatableUI,
 		element: HTMLElement,
@@ -348,6 +359,13 @@ export class ProfileModal extends Modal {
 
 	public override onOpen(): void {
 		super.onOpen()
+		// Ensure modal and content expand wide regardless of theme defaults
+		this.modalEl.style.width = "80vw"
+		this.modalEl.style.maxWidth = "900px"
+		this.modalEl.style.minWidth = "600px"
+		this.contentEl.style.width = "80vw"
+		this.contentEl.style.maxWidth = "900px"
+		this.contentEl.style.minWidth = "600px"
 		const { context, ui, data, titleEl, modalUI } = this,
 			{ element: listEl, remover: listElRemover } = useSettings(this.contentEl),
 			profile = data,