Technology icons appear incorrect after a certain point

[alistairgrom]

Bug report

Technnology logos are incorrect after a few in the list. They seem to be fine from A-C then some point from C there is an issue which causes an off by one mis-match and the logos do not match up correctly.

OS information

Macos 15.6.1 (24G90)
Chrome Version 144.0.7559.112 (Official Build) (arm64)

Steps to reproduce

Opening site onto https://devdocs.io/

More resources

Appears correct for the first few:

Then by around C, they are off by one:

Possible fix

Icon directory mismatch possibly, in the #icon-dir of this file assets/javascripts/templates/path_tmpl.js

[nerduard]

I confirm I've also been encountering this issue:

[aditya-arcot]

Same here

[blfpd]

Confirmed on Firefox and Chromium

[thedanbob]

The problem is with CouchDB. It's displayed with the first icon (Angular) and all the icons after it are shifted by one. I'm guessing the icon styles didn't get regenerated after it was added.

[padi]

If anybody isn't working on this, I might try to take on this one (if this is a reproducible bug in dev). If there's a point person for this project, that would be much appreciated.

[spamguy]

If anybody isn't working on this, I might try to take on this one (if this is a reproducible bug in dev). If there's a point person for this project, that would be much appreciated.

I'm the person that added CouchDB docs. AFAICT this is not a bug per se. An asset compilation task didn't get run, so the icon is present in code but missing from the sprite sheet. If you fetch CouchDB docs locally all the icons should be associated correctly.

If I'm wrong, yell at me for breaking prod! I'm on the Discord server if you want to investigate further.

[thedanbob]

I figured it out: _icons.scss was deleted back in 2018 and replaced with _icons.scss.erb, which automatically recalculates the sprite offsets when new icons are added. A new _icons.scss was added last week (by accident, I'm sure) in this commit which takes priority over the erb version. Thus the CSS wasn't updated when CouchDB was added.

The solution is to just delete _icons.scss and redeploy. I confirmed this by building the docker image locally.

[padi]

@thedanbob FWIW to the reviewer of your PR, cloned the repo at what was the current main branch at 117e015, saw the same misplaced icons starting from CouchDB locally, removed the _icons.scss in the project and in the local docker instance, run the rake tasks that seemed to be related assets:clean assets:compile sprites:generate and cleared browser cache for good measure, and was able to recover the correct icons again.

[spamguy]

Thanks for catching that, and sorry. Those files leaked from the branch I used to make SCSS updates.

[simon04]

Thanks for reporting and thanks for fixing this issue. I've overlooked the file accidentally being committed while performing docs updates.