From fd1e3d67be7731534c51ffef131348c435f5ecbf Mon Sep 17 00:00:00 2001
From: Ivan <ivan@quad4.io>
Date: Wed, 1 Apr 2026 02:55:42 +0300
Subject: [PATCH] style(components): update font settings and layout for
 improved readability and consistency across ArchivesPage, MicronEditorPage,
 and NomadNetworkPage

---
 .../components/archives/ArchivesPage.vue      |  5 ++-
 .../micron-editor/MicronEditorPage.vue        | 33 ++++++++++++++++---
 .../nomadnetwork/NomadNetworkPage.vue         | 22 ++++++++-----
 meshchatx/src/frontend/js/MicronParser.js     | 22 ++++++-------
 4 files changed, 56 insertions(+), 26 deletions(-)

diff --git a/meshchatx/src/frontend/components/archives/ArchivesPage.vue b/meshchatx/src/frontend/components/archives/ArchivesPage.vue
index 67ccbe4..ebe4745 100644
--- a/meshchatx/src/frontend/components/archives/ArchivesPage.vue
+++ b/meshchatx/src/frontend/components/archives/ArchivesPage.vue
@@ -491,9 +491,12 @@ export default {
 
 <style scoped>
 pre {
-    font-family: "JetBrains Mono", "Roboto Mono", monospace;
+    font-family: "Roboto Mono Nerd Font", ui-monospace, monospace;
     font-size: 13px;
     line-height: 1.5;
+    letter-spacing: normal;
+    font-variant-ligatures: none;
+    font-feature-settings: normal;
 }
 
 /* Ensure long pages don't lag the layout */
diff --git a/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue b/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue
index 824a32b..a3ac1aa 100644
--- a/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue
+++ b/meshchatx/src/frontend/components/micron-editor/MicronEditorPage.vue
@@ -845,10 +845,11 @@ ${b}=
 
 <style scoped>
 .nodeContainer {
-    font-family:
-        Roboto Mono Nerd Font,
-        monospace;
+    font-family: "Roboto Mono Nerd Font", ui-monospace, monospace;
     line-height: normal;
+    letter-spacing: normal;
+    font-variant-ligatures: none;
+    font-feature-settings: normal;
 }
 
 :deep(.Mu-nl) {
@@ -856,14 +857,36 @@ ${b}=
 }
 :deep(.Mu-mnt) {
     display: inline-block;
-    width: 0.6em;
+    box-sizing: border-box;
+    min-width: 1ch;
+    width: 1ch;
+    max-width: 1ch;
     text-align: center;
     white-space: pre;
     text-decoration: inherit;
+    vertical-align: baseline;
+    line-height: 1.25;
+}
+:deep(.Mu-mnt-full) {
+    display: inline-block;
+    box-sizing: border-box;
+    min-width: 2ch;
+    width: 2ch;
+    max-width: 2ch;
+    text-align: center;
+    white-space: pre;
+    text-decoration: inherit;
+    vertical-align: baseline;
+    line-height: 1.25;
 }
 :deep(.Mu-mws) {
     text-decoration: inherit;
-    display: inline-block;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: 0;
+    row-gap: 0;
+    gap: 0;
 }
 
 :deep(a:hover) {
diff --git a/meshchatx/src/frontend/components/nomadnetwork/NomadNetworkPage.vue b/meshchatx/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
index f0627ec..5569318 100644
--- a/meshchatx/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
+++ b/meshchatx/src/frontend/components/nomadnetwork/NomadNetworkPage.vue
@@ -1624,11 +1624,19 @@ export default {
 </script>
 
 <style>
-pre {
-    font-family:
-        Roboto Mono Nerd Font,
-        monospace;
+.nodeContainer {
+    font-family: "Roboto Mono Nerd Font", ui-monospace, monospace;
+    letter-spacing: normal;
+    font-variant-ligatures: none;
+    font-feature-settings: normal;
+}
+
+.nodeContainer pre {
+    font-family: inherit;
     line-height: normal;
+    letter-spacing: inherit;
+    font-variant-ligatures: inherit;
+    font-feature-settings: inherit;
 }
 
 pre.text-wrap > div {
@@ -1641,15 +1649,13 @@ pre.text-wrap > div > :last-child {
     white-space: pre-wrap;
 }
 
-pre a:hover {
+.nodeContainer pre a:hover {
     text-decoration: underline;
 }
 
 .nodeContainer input[type="text"],
 .nodeContainer input[type="password"] {
-    font-family:
-        Roboto Mono Nerd Font,
-        monospace;
+    font-family: inherit;
     font-size: 1em;
     line-height: 1;
     padding: 0;
diff --git a/meshchatx/src/frontend/js/MicronParser.js b/meshchatx/src/frontend/js/MicronParser.js
index 18d4c13..c5fc0f5 100644
--- a/meshchatx/src/frontend/js/MicronParser.js
+++ b/meshchatx/src/frontend/js/MicronParser.js
@@ -9,9 +9,6 @@ const ALLOWED_URI_REGEXP =
  * partial includes, overlay style stripping, wide CJK monospace cells, and lxmf/nomadnetwork in DOMPurify.
  */
 export default class MicronParser extends BaseMicronParser {
-    static MU_CELL_EM_NARROW = 0.72;
-    static MU_CELL_EM_WIDE = 1.22;
-
     constructor(darkTheme = true, enableForceMonospace = true) {
         super(darkTheme, enableForceMonospace);
         if (this.enableForceMonospace) {
@@ -77,8 +74,6 @@ export default class MicronParser extends BaseMicronParser {
         const styleEl = document.createElement("style");
         styleEl.id = "micron-monospace-styles";
 
-        const n = MicronParser.MU_CELL_EM_NARROW;
-        const w = MicronParser.MU_CELL_EM_WIDE;
         styleEl.textContent = `
             .Mu-nl {
                 cursor: pointer;
@@ -86,32 +81,35 @@ export default class MicronParser extends BaseMicronParser {
             .Mu-mnt {
                 display: inline-block;
                 box-sizing: border-box;
-                min-width: ${n}em;
-                width: ${n}em;
+                min-width: 1ch;
+                width: 1ch;
+                max-width: 1ch;
                 text-align: center;
                 white-space: pre;
                 text-decoration: inherit;
                 vertical-align: baseline;
-                line-height: 1.45;
+                line-height: 1.25;
             }
             .Mu-mnt-full {
                 display: inline-block;
                 box-sizing: border-box;
-                min-width: ${w}em;
-                width: ${w}em;
+                min-width: 2ch;
+                width: 2ch;
+                max-width: 2ch;
                 text-align: center;
                 white-space: pre;
                 text-decoration: inherit;
                 vertical-align: baseline;
-                line-height: 1.45;
+                line-height: 1.25;
             }
             .Mu-mws {
                 text-decoration: inherit;
                 display: inline-flex;
                 flex-wrap: wrap;
                 align-items: baseline;
-                column-gap: 0.06em;
+                column-gap: 0;
                 row-gap: 0;
+                gap: 0;
             }
         `;
         document.head.appendChild(styleEl);