🎨 Adjust comments style

Cussa · Cussa · commit 91ca844cf089 · 2025-12-29T09:55:37.000-03:00
diff --git a/by-type.mjs b/by-type.mjs
@@ -211,7 +211,7 @@ function renderItems(items) {
                     <span class="item-state">${stateIcon} ${item.state}</span>
                     <span class="item-dates">📅 ${createdDate} • 🔄 ${updatedDate}</span>
                     ${milestone}
-                    ${item.comments > 0 ? `<span>💬 ${item.comments}</span>` : ''}
+                    ${item.comments > 0 ? `<span class="interaction-metric" title="comments">💬 ${item.comments}</span>` : ''}
                     ${formatReactions(item.reactions)}
                     ${item.labels.slice(0, 3).map(label => {
                         const labelName = typeof label === 'string' ? label : label.name;
diff --git a/main.mjs b/main.mjs
@@ -240,7 +240,7 @@ function renderItems(items, isPR = false) {
                     <span class="item-state">${stateIcon} ${item.state}</span>
                     <span class="item-dates">📅 ${createdDate} • 🔄 ${updatedDate}</span>
                     ${milestone}
-                    ${item.comments > 0 ? `<span>💬 ${item.comments}</span>` : ''}
+                    ${item.comments > 0 ? `<span class="interaction-metric" title="comments">💬 ${item.comments}</span>` : ''}
                     ${formatReactions(item.reactions)}
                     ${item.labels.slice(0, 3).map(label => {
                         const labelName = typeof label === 'string' ? label : label.name;
diff --git a/shared.mjs b/shared.mjs
@@ -319,11 +319,11 @@ export function formatReactions(reactions) {
     
     const reactionElements = reactionMap
         .filter(r => reactions[r.key] && reactions[r.key] > 0)
-        .map(r => `<span title="${r.label}" style="display: inline-flex; align-items: center; gap: 2px; font-size: 12px;">${r.emoji} ${reactions[r.key]}</span>`);
+        .map(r => `<span class="interaction-metric" title="${r.label}">${r.emoji} ${reactions[r.key]}</span>`);
     
     if (reactionElements.length === 0) return '';
     
-    return `<span class="reactions" style="display: inline-flex; gap: 8px; align-items: center;">${reactionElements.join('')}</span>`;
+    return `<span class="reactions">${reactionElements.join('')}</span>`;
 }
 
 /**
diff --git a/styles.css b/styles.css
@@ -49,6 +49,20 @@ footer {
     font-size: 14px;
 }
 
+/* Interaction metrics (comments & reactions) */
+.interaction-metric {
+    display: inline-flex;
+    align-items: center;
+    gap: 2px;
+    font-size: 12px;
+}
+
+.reactions {
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+}
+
 footer .footer-credits {
     margin-bottom: 10px;
 }
