CSS tweak for bigger avatar icons in polls?

[Cozdabuch (cosmo)]

Can anyone identify a quick CSS tweak to make the user thumbnails within polls display a different size (say 2x for example sake)?

[awesomerobot (Kris)]

You don’t want to do this with CSS because the avatars are only 20x20px, so increasing the size will make them noticeably blurry.

You’d instead want to reopen the widget and request a larger avatar size… You can add this to your theme’s /head file. This overrides the existing widget and requests a large avatar instead of a tiny one.

<script type="text/discourse-plugin" version="0.8.13">
const { h } = require('virtual-dom');
const { avatarFor } = require('discourse/widgets/post');

api.reopenWidget("discourse-poll-voters", {
  html(attrs, state) {
    if (attrs.voters && state.loaded === "new") {
      state.voters = attrs.voters;
    }

    const contents = state.voters.map(user => {
      return h("li", [
        avatarFor("large", {
          username: user.username,
          template: user.avatar_template
        }),
        " "
      ]);
    });

    if (state.voters.length < attrs.totalVotes) {
      contents.push(this.attach("discourse-poll-load-more", attrs));
    }

    return h("div.poll-voters", contents);
  }
});
</script>

Then you’d have a 45px avatar to work with, and if you optionally wanted to adjust the size a little more with CSS:

.poll-voters-list {
  img.avatar {
    width: 40px;
    height: 40px;
  }
}