fix: issues with theme and icon title inline

FlorianWoelki · May 4, 2024 · c9cbd42 · c9cbd42
1 parent a6e7b71
commit c9cbd42
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/lib/icon-title.ts b/src/lib/icon-title.ts
@@ -32,7 +32,19 @@ const add = (
     titleIcon = document.createElement('div');
   }
 
-  titleIcon.style.removeProperty('display');
+  const isInline =
+    plugin.getSettings().iconInTitlePosition === IconInTitlePosition.Inline;
+
+  if (isInline) {
+    titleIcon.style.display = 'inline-block';
+    titleIcon.style.removeProperty('margin-inline');
+    titleIcon.style.removeProperty('width');
+  } else {
+    titleIcon.style.display = 'block';
+    titleIcon.style.width = 'var(--line-width)';
+    titleIcon.style.marginInline = 'var(--content-margin)';
+  }
+
   titleIcon.classList.add(config.TITLE_ICON_CLASS);
   // Checks if the passed element is an emoji.
   if (emoji.isEmoji(svgElement) && options.fontSize) {
@@ -50,9 +62,7 @@ const add = (
       plugin.getSettings().iconInTitlePosition === IconInTitlePosition.Above
     ) {
       inlineTitleEl.parentElement.prepend(titleIcon);
-    } else if (
-      plugin.getSettings().iconInTitlePosition === IconInTitlePosition.Inline
-    ) {
+    } else if (isInline) {
       inlineTitleEl.prepend(titleIcon);
     }
   }

diff --git a/src/styles.css b/src/styles.css
@@ -1,7 +1,5 @@
 .iconize-title-icon {
-  display: inline-block;
   max-width: var(--max-width);
-  width: var(--line-width);
   margin-right: var(--size-4-2);
   transform: translateY(13%);
 }