Small px difference between Snoozed & Active/Archived

Very minor thing, but figured I’d mention: The grey bounding box on Snoozed seems to be a few px smaller than the Active and Archived boxes.

Hey, thanks @kaspth! 😊 Yeah, I saw that. It’s an inconsistency in the icon sizes that I need to fix in a separate pass across all icons. On the list!

😌 Ahhhh, went through and fixed the icons.

Longer explanation…

I typically use Heroicons, storing them in ERB files. They come with a default Tailwind size class:

<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4H3V18H1V4ZM5 4H17V6H5V4ZM5 9H19V11H5V9ZM5 14H15V16H5V14Z" fill="currentColor"/>
</svg>

But I sometimes need to override that size, which means hard-coding the change for all. So recently on another project, I realized this would be better, using strict locals with defaults:

<%# locals: (size: "size-5", other: "") -%>
<svg viewBox="0 0 20 20" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg" class="<%= class_names(size, other) %>">
  <path fill-rule="evenodd" clip-rule="evenodd" d="M1 4H3V18H1V4ZM5 4H17V6H5V4ZM5 9H19V11H5V9ZM5 14H15V16H5V14Z" fill="currentColor"/>
</svg>

Now I can override the size class, plus add other Tailwind classes for color styling, etc. Using a simple icon helper method, I can then call something this in the view:

<%= icon "heroicons/2.1.5/solid/lock-closed", size: "size-5", other: "text-slate-500" %>

Oh fun, didn’t realize <pre> tags blow out the layout…now on to fix that. 🤦‍♂️

Well, I spent over 3 hours just trying to figure out why <pre> overflows the container in the post body. I couldn’t find a good solution, but I have a hacky stop-gap in place for now. 🫠 Will be coming back to it.

I guess this means the layout’s not <pre>determined 😄

Thanks for fixing!