adjust font size for menus

src/livecodes/core.ts

@@ -2593,6 +2593,8 @@ const handleAppMenuProject = () => {
   if (!menuProjectContainer || !menuProjectButton) return;
   menuProjectContainer.innerHTML = menuProjectHTML; // settingsMenuHTML;
   translateElement(menuProjectContainer);
+  adjustFontSize(menuProjectContainer);
+
   // This fixes the behaviour where :
   // clicking outside the settings menu but inside settings menu container,
   // hides the settings menu but not the container
@@ -2615,6 +2617,8 @@ const handleAppMenuSettings = () => {
   menuSettingsContainer.innerHTML = menuSettingsHTML; // settingsMenuHTML;
 
   translateElement(menuSettingsContainer);
+  adjustFontSize(menuSettingsContainer);
+
   // This fixes the behaviour where :
   // clicking outside the settings menu but inside settings menu container,
   // hides the settings menu but not the container
@@ -2636,6 +2640,8 @@ const handleAppMenuHelp = () => {
   if (!menuHelpContainer || !menuHelpButton) return;
   menuHelpContainer.innerHTML = menuHelpHTML;
   translateElement(menuHelpContainer);
+  adjustFontSize(menuHelpContainer);
+
   // This fixes the behaviour where :
   // clicking outside the settings menu but inside settings menu container,
   // hides the settings menu but not the container
@@ -2651,6 +2657,36 @@ const handleAppMenuHelp = () => {
   });
 };
 
+/**
+ * decrease font size in menus when text is too wide (for different languages)
+ */
+const adjustFontSize = (container: HTMLElement) => {
+  const adjustFont = (el: HTMLElement) =>
+    new Promise<void>((resolve) => {
+      const fontSize = Number(getComputedStyle(el).getPropertyValue('font-size').replace('px', ''));
+      const maxWidth =
+        Number(getComputedStyle(el).getPropertyValue('--label-max-width').replace('px', '')) || 188;
+      if (el.clientWidth <= maxWidth || fontSize <= 0) return resolve();
+      el.style.fontSize = fontSize - 1 + 'px';
+      requestAnimationFrame(async () => {
+        await adjustFont(el);
+        resolve();
+      });
+    });
+
+  setTimeout(async () => {
+    container.style.display = 'block';
+    container.style.visibility = 'hidden';
+    (container.children[0] as HTMLElement).style.display = 'block';
+    for (const el of container.querySelectorAll<HTMLElement>('span')) {
+      await adjustFont(el);
+    }
+    container.style.display = '';
+    container.style.visibility = '';
+    (container.children[0] as HTMLElement).style.display = '';
+  }, 1000);
+};
+
 const handleSettings = () => {
   const toggles = UI.getSettingToggles();
   toggles.forEach((toggle) => {

src/livecodes/i18n/locales/en/translation.lokalise.json

@@ -1736,6 +1736,10 @@
     "notes": "",
     "translation": "Add stylesheet/script URLs. Each URL should be in a separate line."
   },
+  "resultMode.linkText": {
+    "notes": "",
+    "translation": "Edit on LiveCodes"
+  },
   "savePrompt.heading": {
     "notes": "",
     "translation": "Unsaved changes"

src/livecodes/i18n/locales/en/translation.ts

@@ -708,6 +708,9 @@ const translation = {
     stylesheets: 'External Stylesheets',
     urlDesc: 'Add stylesheet/script URLs. Each URL should be in a separate line.',
   },
+  resultMode: {
+    linkText: 'Edit on LiveCodes',
+  },
   savePrompt: {
     heading: 'Unsaved changes',
     prompt: {

src/livecodes/styles/inc-menu.scss

@@ -67,11 +67,17 @@
   margin-top: 0;
   top: 0;
   width: 255px; // for font-size 14px
+  --label-max-width: 188px; // used in js to reduce label font size
 
   &:hover {
     animation: fadeIn 0.4s forwards;
     display: block !important;
   }
+
+  span {
+    display: inline-block;
+    text-wrap: nowrap;
+  }
 }
 
 #app-menu-i18n {
@@ -376,17 +382,6 @@ i.arrow {
   }
 }
 
-label:has(span[data-i18n='menu.formatOnsave'], span[data-i18n='menu.recoverUnsaved']) {
-  container: i18nlabel / inline-size; // Parent to set font-size based on size of container
-  white-space: nowrap;
-}
-
-@container i18nlabel (width < 236px) {
-  span {
-    font-size: 5.25cqi; // font-size based on size of container
-  }
-}
-
 .switch {
   cursor: pointer;
   display: inherit;