[bugfix] UI: Transliteration: Fix the bug that isn't shown when only hiragana or only hepburn is provided.

src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx

@@ -94,6 +94,7 @@ const MessageWithTransliteration = ({ item }) => {
         const hira = token.hira ?? "";
         const hepburn = token.hepburn ?? "";
 
+        // Only hovered romaji if it exists. (No ruby cuz 'orig' and 'hira' are same.)
         if (hira && hira === orig && hepburn) {
             return (
                 <span key={key} title={hepburn} className={styles.with_hepburn}>
@@ -102,7 +103,8 @@ const MessageWithTransliteration = ({ item }) => {
             );
         }
 
-        if (hira && hira !== orig && hepburn) {
+        // Ruby hiragana and hovered romaji.
+        if (hira && hepburn) {
             return (
                 <ruby key={key} title={hepburn} className={styles.with_hepburn}>
                     {orig}
@@ -111,15 +113,20 @@ const MessageWithTransliteration = ({ item }) => {
             );
         }
 
-        if (hepburn && hepburn !== orig) {
+        // Ruby romaji or hiragana.
-            return (
+        if (hepburn || hira) {
-                <ruby key={key} className={styles.ruby}>
+            const ruby = hepburn ? hepburn : hira;
-                    {orig}
+            if (ruby !== orig) {
-                    <rt>{hepburn}</rt>
+                return (
-                </ruby>
+                    <ruby key={key} className={styles.ruby}>
-            );
+                        {orig}
+                        <rt>{ruby}</rt>
+                    </ruby>
+                );
+            };
         }
 
+        // Nothing. Original only.
         return (
             <span key={key} className={styles.original_only}>
                 {orig}