Bug: Inline code Icon

[Kang-geophysics]

Describe the bug

I am using "Minimal Theme." I tried to use parameter "icon" to show it up. The results were wired as I uploaded image. The icon was fully shown in a line.

Steps to reproduce

Minimal theme

This bug are only shown when I use minimal theme. However, when I turned off the function "Maximize media" of [Minimal Theme settings], the issue is solved.

Can you fix this regardless of whether I use this option or not?

[mayurankv]

Thanks for raising this! Will definitely try and get a fix for this when I can take a look! (Should be just some css manipulation I believe)

[Kol9yN]

Any Luck with fixes?!

[mayurankv]

Hiya, really sorry! Been so busy with my masters degree recently that I haven't had time to give this plugin any love. I have literally just (10 minutes ago) submitted my thesis so I hope to get back into this relatively soon and try address this and a number of other bugs!

Having said this I don't know exactly when I'll definitely have the time so if in the meantime you can determine what css problems are going on (as in which identifiers in minimal theme or this plugin conflict), that would be really helpful to get this done quickly!

[simoneR95]

Hi, a quick solution for the bug:

• open .obsidian/plugins/code-styler/styles.css
• find this class "body.code-styler span.code-styler-inline-opener > span > img.code-styler-inline-icon:not([class*=emoji])"
• add "width: auto !important;"

[ghost]

I have a similar bug on a different theme, Royal Velvet. In my case the icon also grows as wide as the row. The issue is in body.code-styler span.code-styler-inline-opener > span > img.code-styler-inline-icon:not([class*=emoji]) as @simoneR95 says. While the addition of width: auto !important to the class may solve the issue for Minimal, it is not a complete fix.

The issue is in this class, but for me it is with the attribute height: calc(var(--code-size) * 1.2);. In default Obsidian --code-size is set to --font-smaller which has a value of 0.875em. In Royal Velvet, --code-size is set to 100% instead of being relative to a font size. So when the height is calculated by Code Styler it becomes 120%. The CSS is just unable to work with this, so the height is unrestricted, and the icon fills the width of the row. Fixing Royal Velvet gets the size back to normal but the margins are incorrect and the icon is misaligned due to inherited styles from elsewhere in the theme.

I think the body.code-styler span.code-styler-inline-opener > span > img.code-styler-inline-icon:not([class*=emoji]) needs to be made more robust so that it acts as intended regardless of a theme's implementation. Going off of these two theme issues, I think the class should be changed from:

body.code-styler span.code-styler-inline-opener > span > img.code-styler-inline-icon:not([class*=emoji]) {
  display: inline !important;
  height: calc(var(--code-size) * 1.2);
  margin-bottom: 2px !important;
  vertical-align: middle;
}

to:

body.code-styler span.code-styler-inline-opener > span > img.code-styler-inline-icon:not([class*=emoji]) {
  display: inline !important;
  height: calc(var(--code-size) * 1.2);
  width: auto !important;
  margin: unset;
  margin-bottom: 2px !important;
  vertical-align: middle;
}

[mayurankv]

Cheers, will correct this and see if its an issue!

[mayurankv]

width: auto !important;
margin: unset;

This will be included in the refactor.