Tabs Icon position issue

[mfirhas]

After latest update for Seti-UI today, I found out that it make the tabs icon position shift upside.

[jesseweed]

@MFathirIrhas can you try a hard refresh of Atom (close and re-open)? Sometimes tabs get stuck in a weird state after updating.

[mfirhas]

@jesseweed I've restarted Atom, disable and re-enable, change back the theme, and even restarted pc, nothing work. The icons still shifted upside.

[jesseweed]

Hmm, okay thanks @MFathirIrhas! I'll see if I can repro. Can you confirm what version of Atom you're running?

[jesseweed]

Are you running the file-icons or similar plugin by any chance? If so, be sure to disable "Custom Icons" in settings for Seti UI as they conflict with each other.

[mfirhas]

@jesseweed I'm running version 1.12.6. I disable the Custom icon in Seti's settings, it solved the problem and icons gone. I hope it soon be fixed like it was before latest update. Thanks.

[jessy1092]

I have the same problem. I only install default theme and seti theme.

If I increase the line-height to 41px. It would solve this problem. I not sure the root cause.

Edit: Platform OS: Windows 10 Atom: 1.2.6 Seti: 1.4.0

[jessy1092]

But it did not have problem on the macOS

platform: OS: macOS 10.12.1 Atom: 1.2.6 Seti: 1.4.0 Seti: 1.4.0

[craigbuckler]

The issue also affects my Windows 10 installation. Workaround fix: File > Stylesheet... then add:

// fixes seti-ui icon position in tabs
atom-workspace.seti-icons .tab-bar .tab .title::before {
  line-height: 36px;
}

[hielfx]

Thanks @craigbuckler, it worked like a charm

[raworre]

@craigbuckler Thanks for the workaround. Fixed the issue perfectly.

[mfirhas]

@craigbuckler Thanks, work perfectly.

[odegraciajr]

@craigbuckler worked! Thanks!

[tomorekoya]

@craigbuckler This is probably a noob question, but how do I get to File > Stylesheet?

[craigbuckler]

@TRiddle It's Atom's menu at the top.

[tomorekoya]

@craigbuckler Thanks

[jesseweed]

So it sounds like this is only happening on Linux? I'll double check the fix doesn't break other platforms, and push it out as a bugfix release.

[hielfx]

@jesseweed It happened to me in Windows 10 too.

[jaredtm]

Happened to me on Windows 10 as well, employed @craigbuckler 's temp fix for now (worked nicely). Thanks for the great theme, tho, @jesseweed .

[jesseweed]

The solutions I've seen so far all seem to fix the issue on Windows, but break on Mac.

I'll work on finding a solution that will work for both, but in the meantime, you can add this to user user stylesheet as a temporary fix on Windows:

// fixes seti-ui icon position in tabs
atom-workspace.seti-icons .tab-bar .tab .title::before {
  line-height: 36px;
}

[craigbuckler]

As a thought, line-height is a unit-less property because it's relative to the font size. Would this work on all platforms?...

// fixes seti-ui icon position in tabs
atom-workspace.seti-icons .tab-bar .tab .title::before {
  line-height: 1.6;
}

[aeschli]

I've seen similar positioning issues on Windows in VSCode where we use the seti.woff font. I tracked it down to this change in the 'cake.svg' icon. Removing the first path element (<path class="st0" d="M-351.2 98.1c-.4.1-.7.2-1.1.3v-134c.4.1.7.1 1.1.2V98.1z"/>) fixes the problem.

[Shockolate]

@craigbuckler et al Looks like a recent update has fixed this offset issue, causing the reverse :P Removing that line returns it normal! Thanks again for adding that workaround. Thanks for the support @jesseweed

[jesseweed]

This issue has been resolved.