feat: add container around all dialogs & improve cfg dialog

dist/BetterYTM.css

@@ -1059,19 +1059,6 @@ body .bytm-ripple.slower {
   color: var(--bytm-menu-subtitle-color) !important;
 }
 
-#bytm-menu-subtitle-cont,
-#bytm-menu-mode-display {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-#bytm-menu-version-anchor {
-  overflow: hidden;
-  text-wrap: nowrap;
-  text-overflow: ellipsis;
-}
-
 #bytm-menu-linkscont {
   display: flex;
   align-items: center;
@@ -1439,6 +1426,20 @@ hr {
   overflow: hidden !important;
 }
 
+.bytm-ellipsis {
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.bytm-ellipsis-wrap {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-wrap: auto;
+  white-space: normal;
+}
+
 /* #region generic (circular) button */
 .bytm-generic-btn {
   --bytm-generic-btn-width: 36px;

src/components/BytmDialog.ts

@@ -1,6 +1,6 @@
 // hoist the class declaration because either rollup or babel is being a hoe
 import { NanoEmitter } from "@sv443-network/userutils";
-import { clearInner, error, getDomain, getResourceUrl, onInteraction, warn } from "../utils/index.js";
+import { clearInner, domLoaded, error, getDomain, getResourceUrl, onInteraction, warn } from "../utils/index.js";
 import { t } from "../utils/translations.js";
 import { emitInterface } from "../interface.js";
 import "./BytmDialog.css";
@@ -50,6 +50,10 @@ export interface BytmDialogEvents extends EventsMap {
   destroy: () => void;
 };
 
+/** Whether the dialog system has been initialized */
+let dialogsInitialized = false;
+/** Container element for all BytmDialog elements */
+let dialogContainer: HTMLElement | undefined;
 // TODO: remove export as soon as config menu is migrated to use BytmDialog
 /** ID of the last opened (top-most) dialog */
 export let currentDialogId: string | null = null;
@@ -69,6 +73,8 @@ export class BytmDialog extends NanoEmitter<BytmDialogEvents> {
   constructor(options: BytmDialogOptions) {
     super();
 
+    BytmDialog.initDialogs();
+
     this.options = {
       closeOnBgClick: true,
       closeOnEscPress: true,
@@ -106,7 +112,10 @@ export class BytmDialog extends NanoEmitter<BytmDialogEvents> {
 
     try {
       bgElem.appendChild(await this.getDialogContent());
-      document.body.appendChild(bgElem);
+      if(dialogContainer)
+        dialogContainer.appendChild(bgElem);
+      else
+        document.addEventListener("DOMContentLoaded", () => dialogContainer?.appendChild(bgElem));
     }
     catch(e) {
       return error("Failed to render dialog content:", e);
@@ -241,6 +250,24 @@ export class BytmDialog extends NanoEmitter<BytmDialogEvents> {
 
   //#region static
 
+  /** Initializes the dialog system */
+  public static initDialogs() {
+    if(dialogsInitialized)
+      return;
+    dialogsInitialized = true;
+
+    const createContainer = () => {
+      const bytmDialogCont = dialogContainer = document.createElement("div");
+      bytmDialogCont.id = "bytm-dialog-container";
+      document.body.appendChild(bytmDialogCont);
+    };
+
+    if(!domLoaded)
+      document.addEventListener("DOMContentLoaded", createContainer);
+    else
+      createContainer();
+  }
+
   /** Returns the ID of the top-most dialog (the dialog that has been opened last) */
   public static getCurrentDialogId() {
     return currentDialogId;

src/features/layout.css

@@ -4,6 +4,20 @@
   overflow: hidden !important;
 }
 
+.bytm-ellipsis {
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.bytm-ellipsis-wrap {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-wrap: auto;
+  white-space: normal;
+}
+
 /* #region generic (circular) button */
 .bytm-generic-btn {
   --bytm-generic-btn-width: 36px;

src/menu/menu_old.css

@@ -127,19 +127,6 @@
   color: var(--bytm-menu-subtitle-color) !important;
 }
 
-#bytm-menu-subtitle-cont,
-#bytm-menu-mode-display {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-#bytm-menu-version-anchor {
-  overflow: hidden;
-  text-wrap: nowrap;
-  text-overflow: ellipsis;
-}
-
 #bytm-menu-linkscont {
   display: flex;
   align-items: center;

src/menu/menu_old.ts

@@ -35,6 +35,9 @@ async function mountCfgMenu() {
   if(isCfgMenuMounted)
     return;
   isCfgMenuMounted = true;
+
+  BytmDialog.initDialogs();
+
   initLocale = getFeature("locale");
   initConfig = getFeatures();
 
@@ -417,11 +420,12 @@ async function mountCfgMenu() {
           const rel = "reloadRequired" in ftInfo && ftInfo.reloadRequired !== false ? " (reload required)" : "";
           const adv = ftInfo.advanced ? " (advanced feature)" : "";
 
-          featLeftSideElem.title = `${featKey}${rel}${adv}${extraTxts.length > 0 ? `\n${extraTxts.join(" - ")}` : ""}`;
+          ftConfElem.title = `${featKey}${rel}${adv}${extraTxts.length > 0 ? `\n${extraTxts.join(" - ")}` : ""}`;
         }
 
         const textElem = document.createElement("span");
-        textElem.textContent = t(`feature_desc_${featKey}`);
+        textElem.classList.add("bytm-ftitem-text", "bytm-ellipsis-wrap");
+        textElem.textContent = textElem.title = textElem.ariaLabel = t(`feature_desc_${featKey}`);
 
         let adornmentElem: undefined | HTMLElement;
 
@@ -505,6 +509,8 @@ async function mountCfgMenu() {
 
         const ctrlElem = document.createElement("span");
         ctrlElem.classList.add("bytm-ftconf-ctrl");
+        // to prevent dev mode title from propagating:
+        ctrlElem.title = "";
 
         let advCopyHiddenCont: HTMLElement | undefined;
 
@@ -796,10 +802,11 @@ async function mountCfgMenu() {
 
   const subtitleElemCont = document.createElement("div");
   subtitleElemCont.id = "bytm-menu-subtitle-cont";
+  subtitleElemCont.classList.add("bytm-ellipsis");
 
   const versionEl = document.createElement("a");
   versionEl.id = "bytm-menu-version-anchor";
-  versionEl.classList.add("bytm-link");
+  versionEl.classList.add("bytm-link", "bytm-ellipsis");
   versionEl.role = "button";
   versionEl.tabIndex = 0;
   versionEl.ariaLabel = versionEl.title = t("version_tooltip", scriptInfo.version, buildNumber);
@@ -825,6 +832,7 @@ async function mountCfgMenu() {
   if(modeItems.length > 0) {
     const modeDisplayEl = document.createElement("span");
     modeDisplayEl.id = "bytm-menu-mode-display";
+    modeDisplayEl.classList.add("bytm-ellipsis");
     modeDisplayEl.textContent = `[${t("active_mode_display", arrayWithSeparators(modeItems.map(v => t(`${v}_short`)), ", ", " & "))}]`;
     modeDisplayEl.ariaLabel = modeDisplayEl.title = tp("active_mode_tooltip", modeItems, arrayWithSeparators(modeItems.map(t), ", ", " & "));
 
@@ -834,7 +842,7 @@ async function mountCfgMenu() {
   menuContainer.appendChild(footerCont);
   backgroundElem.appendChild(menuContainer);
 
-  document.body.appendChild(backgroundElem);
+  (document.querySelector("#bytm-dialog-container") ?? document.body).appendChild(backgroundElem);
 
   window.addEventListener("resize", debounce(checkToggleScrollIndicator, 250, "rising"));