Fix popup icon+text spacing, alignment, and validation colors

- Add Primer margin utilities (mr-1, ml-1) for icon-text spacing
- Add Primer flex utilities (d-inline-flex, flex-items-center) for
  vertical alignment of icons with text
- Remove non-functional gap-* classes (never existed in Primer v22)
- Replace undefined validation color classes with Primer
  color-fg-success, color-fg-attention, color-fg-danger

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: richardkmichael

extension/assets/popup.html

@@ -41,8 +41,7 @@
     }
 
     .comments-icon {
-      padding-top: 2px;
-      padding-right: 2px;
+      display: inline-flex;
     }
 
     .remove-btn {
@@ -147,12 +146,12 @@
         <div class="f4 mb-1">
           <a target="_blank" rel="noopener noreferrer" class="Link--primary no-underline text-bold"></a>
         </div>
-        <div class="f6 color-fg-muted d-flex flex-items-center flex-wrap gap-2">
+        <div class="f6 color-fg-muted d-flex flex-items-center flex-wrap">
           <span class="repo-name"></span>
           <span class="issue-number"></span>
           <span class="issue-updated">· Updated <relative-time></relative-time></span>
-          <div class="comments d-none">
-            <span class="comments-icon"></span>
+          <div class="comments d-none d-inline-flex flex-items-center ml-1">
+            <span class="comments-icon mr-1"></span>
             <span class="comments-count"></span>
           </div>
         </div>
@@ -203,15 +202,15 @@ <h1 class="f4 mb-0">GitHub Bookmarked Issues</h1>
     <pre class="f6 color-fg-muted bg-canvas-subtle p-2 rounded-2 mb-3 overflow-x-auto">- https://github.com/org/project/issues/1
 - [Some title](https://github.com/org/project/issues/2)</pre>
     <textarea id="import-textarea" class="import-textarea" placeholder="Paste Markdown links or GitHub issue URLs..."></textarea>
-    <div id="import-validation" class="d-none d-flex flex-justify-end gap-3 mt-2 f6"></div>
+    <div id="import-validation" class="d-none d-flex flex-justify-end mt-2 f6"></div>
     <div class="d-flex mt-3">
       <button id="import-submit-btn" class="btn btn-primary mr-2" type="button" disabled>Import</button>
       <button id="import-cancel-btn" class="btn" type="button">Cancel</button>
     </div>
   </div>
 
-  <div id="rate-limit-warning" class="d-none m-3 p-2 border rounded-2 color-bg-attention color-border-attention f6 d-flex flex-items-center gap-2">
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+  <div id="rate-limit-warning" class="d-none m-3 p-2 border rounded-2 color-bg-attention color-border-attention f6 d-flex flex-items-center">
+    <svg class="mr-1" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
       <path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path>
     </svg>
     <span class="rate-limit-message"></span>

extension/assets/popup.js

@@ -373,26 +373,32 @@ function updateValidationDisplay(validation) {
   // Valid items (success - green)
   if (validation.valid.length > 0) {
     const item = document.createElement('span');
-    item.className = 'import-validation-item import-validation--success';
-    item.appendChild(getIcon('check-circle'));
+    item.className = 'import-validation-item color-fg-success d-inline-flex flex-items-center ml-3';
+    const icon = getIcon('check-circle');
+    icon.classList.add('mr-1');
+    item.appendChild(icon);
     item.appendChild(document.createTextNode(`${validation.valid.length} valid`));
     container.appendChild(item);
   }
 
   // Duplicate items (info - blue)
   if (validation.duplicates > 0) {
     const item = document.createElement('span');
-    item.className = 'import-validation-item import-validation--info';
-    item.appendChild(getIcon('info'));
+    item.className = 'import-validation-item color-fg-attention d-inline-flex flex-items-center ml-3';
+    const icon = getIcon('info');
+    icon.classList.add('mr-1');
+    item.appendChild(icon);
     item.appendChild(document.createTextNode(`${validation.duplicates} duplicate (ignored)`));
     container.appendChild(item);
   }
 
   // Invalid items (danger - red)
   if (validation.invalid > 0) {
     const item = document.createElement('span');
-    item.className = 'import-validation-item import-validation--danger';
-    item.appendChild(getIcon('x-circle'));
+    item.className = 'import-validation-item color-fg-danger d-inline-flex flex-items-center ml-3';
+    const icon = getIcon('x-circle');
+    icon.classList.add('mr-1');
+    item.appendChild(icon);
     item.appendChild(document.createTextNode(`${validation.invalid} invalid`));
     container.appendChild(item);
   }