feat(popup): auto-fit table columns; remove unreliable per-row match indicator

Co-authored-by: Junie <junie@jetbrains.com>

Author: tsemachh

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on Keep a Changelog,
 and this project adheres to Semantic Versioning.
 
+## [1.0.17] - 2026-05-03
+### Changed
+- Captured Requests table now auto-sizes columns (▶ / Status / Method shrink to content; Path takes the remaining width with truncation + full-URL tooltip) so nothing overflows the popup.
+- Removed the per-row match indicator (●) column. The match indicator was unreliable — some matched URLs were not flagged — so it's been disabled until the matcher is fixed; the matched-row green tint is also gone.
+
 ## [1.0.16] - 2026-05-03
 ### Changed
 - Captured Requests table column order is now **▶ | Status | Method | ● | Path**, so Status is right after the include toggle and Path expands to fill the remaining width.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "apireplay",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "private": true,
   "type": "module",
   "scripts": {

src/popup/components/ApiPreview.ts

@@ -9,8 +9,10 @@ export function renderApiPaths(
   onUpdateStatus: (requestKey: string, status: number | undefined) => void,
   options: { matchedKeys?: Record<string, number>; isReplaying?: boolean } = {}
 ) {
-  const matchedKeys = options.matchedKeys || {};
-  const isReplaying = options.isReplaying === true;
+  // Match indicator is currently disabled — matching has known reliability gaps where
+  // some matched URLs were not flagged. Until the matcher is fixed, we hide the per-row
+  // indicator and the green-tint highlight so users are not misled by stale state.
+  void options;
   const rows = Object.entries(requests).sort(([a], [b]) => a.localeCompare(b));
 
   function statusColorClass(status: number | undefined): string {
@@ -25,21 +27,13 @@ export function renderApiPaths(
   container.innerHTML = `
     <h4 class="font-semibold mb-1 text-xs">API Requests:</h4>
     ${rows.length === 0 ? '<div class="text-xs opacity-70">No matching requests.</div>' : `
-      <div class="border border-gray-300 dark:border-gray-600 rounded">
-        <table class="w-full text-xs table-fixed">
-          <colgroup>
-            <col style="width: 2rem">
-            <col style="width: 3.4rem">
-            <col style="width: 3rem">
-            <col style="width: 1.2rem">
-            <col>
-          </colgroup>
+      <div class="border border-gray-300 dark:border-gray-600 rounded overflow-x-auto">
+        <table class="w-full text-xs">
           <thead class="bg-gray-200 dark:bg-gray-800">
             <tr>
-              <th class="text-left p-1" title="Include this request when replaying">▶</th>
-              <th class="text-left p-1" title="HTTP response status (color-coded). Click to edit. Number in parentheses = replay hits.">Status</th>
-              <th class="text-left p-1">Method</th>
-              <th class="text-left p-1" title="${isReplaying ? 'Green = matched at least once during replay; gray = not yet matched' : 'Match indicator is shown during replay'}">●</th>
+              <th class="text-left p-1 w-px whitespace-nowrap" title="Include this request when replaying">▶</th>
+              <th class="text-left p-1 w-px whitespace-nowrap" title="HTTP response status (color-coded). Click to edit. Number in parentheses = replay hits.">Status</th>
+              <th class="text-left p-1 w-px whitespace-nowrap">Method</th>
               <th class="text-left p-1">Path</th>
             </tr>
           </thead>
@@ -54,17 +48,6 @@ export function renderApiPaths(
                 const statusBase = statusNum !== undefined ? String(statusNum) : '—';
                 const statusText = replayCount > 0 ? `${statusBase} (${replayCount})` : statusBase;
                 const enabled = request.enabled !== false;
-                const matchHits = matchedKeys[key] || 0;
-                const matchColor = !isReplaying
-                  ? 'text-gray-300 dark:text-gray-600'
-                  : matchHits > 0
-                    ? 'text-green-500'
-                    : 'text-gray-400 dark:text-gray-500';
-                const matchTitle = !isReplaying
-                  ? 'Match indicator is shown during replay'
-                  : matchHits > 0
-                    ? `Matched ${matchHits} time(s) during current replay`
-                    : 'Not matched yet during current replay';
                 const fullUrlAttr = request.url.replace(/"/g, '&quot;');
                 const pathAttr = path.replace(/"/g, '&quot;');
                 const statusTitle = statusNum !== undefined
@@ -74,11 +57,11 @@ export function renderApiPaths(
                   : 'No status recorded (click to set)';
                 const statusBadgeWidth = statusText.length > 3 ? 'min-w-[2.1rem] px-1' : 'w-7';
                 return `
-                  <tr class="border-t border-gray-200 dark:border-gray-700${isReplaying && matchHits > 0 ? ' bg-green-50 dark:bg-green-900/20' : ''}">
-                    <td class="p-1">
+                  <tr class="border-t border-gray-200 dark:border-gray-700">
+                    <td class="p-1 w-px whitespace-nowrap">
                       <input type="checkbox" class="request-enabled-toggle" data-request-key="${encodeURIComponent(key)}" ${enabled ? 'checked' : ''}>
                     </td>
-                    <td class="p-1">
+                    <td class="p-1 w-px whitespace-nowrap">
                       <button
                         type="button"
                         class="request-status-icon inline-flex items-center justify-center ${statusBadgeWidth} h-5 rounded-full text-[9px] font-bold text-white whitespace-nowrap ${statusColorClass(statusNum)}"
@@ -87,9 +70,8 @@ export function renderApiPaths(
                         title="${statusTitle}"
                       >${statusText}</button>
                     </td>
-                    <td class="p-1">${request.method}</td>
-                    <td class="p-1 text-center ${matchColor}" title="${matchTitle}">●</td>
-                    <td class="p-1 cursor-pointer hover:text-blue-500 truncate" data-path="${pathAttr}" title="${fullUrlAttr}">${path}</td>
+                    <td class="p-1 w-px whitespace-nowrap">${request.method}</td>
+                    <td class="p-1 cursor-pointer hover:text-blue-500 truncate max-w-0" data-path="${pathAttr}" title="${fullUrlAttr}">${path}</td>
                   </tr>
                 `;
               })