From 76060a165a2488b9e870c9abf4d649f78abde853 Mon Sep 17 00:00:00 2001
From: Todd Riley <todd@websbytodd.com>
Date: Mon, 29 Sep 2025 15:05:42 -0400
Subject: [PATCH 1/2] Fix layout issues with the empty states.

---
 src/components/EmptyState.tsx          | 11 +------
 src/components/NoMatchesState.tsx      |  4 +--
 src/components/PopupRoot.tsx           | 44 ++++++++++++--------------
 src/entrypoints/popup/style.css        |  5 ++-
 tests/playground/playground-styles.css |  2 +-
 5 files changed, 27 insertions(+), 39 deletions(-)

diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
index a1b694a..99fd2a0 100644
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -1,20 +1,11 @@
 export function EmptyState() {
   return (
-    <div className="mx-auto max-w-4xl py-16 text-center">
+    <div className="mx-auto max-w-4xl py-8 text-center">
       <h2 className="mb-4 font-semibold text-2xl">No comments open</h2>
       <p className="mb-6 text-gray-600">
         Your drafts will appear here when you start typing in comment boxes
         across GitHub and Reddit.
       </p>
-      <div className="space-y-2">
-        <button type="button" className="text-blue-600 hover:underline">
-          How it works
-        </button>
-        <span className="mx-2">·</span>
-        <button type="button" className="text-blue-600 hover:underline">
-          Check permissions
-        </button>
-      </div>
     </div>
   )
 }
diff --git a/src/components/NoMatchesState.tsx b/src/components/NoMatchesState.tsx
index 9076bde..4402b30 100644
--- a/src/components/NoMatchesState.tsx
+++ b/src/components/NoMatchesState.tsx
@@ -3,12 +3,12 @@ type NoMatchesStateProps = {
 }
 export function NoMatchesState({ onClearFilters }: NoMatchesStateProps) {
   return (
-    <div className="py-16 text-center">
+    <div className="py-8 text-center">
       <p className="mb-4 text-gray-600">No matches found</p>
       <button
         type="button"
         onClick={onClearFilters}
-        className="text-blue-600 hover:underline"
+        className="text-blue-600 hover:underline cursor-pointer"
       >
         Clear filters
       </button>
diff --git a/src/components/PopupRoot.tsx b/src/components/PopupRoot.tsx
index 0725a49..0484797 100644
--- a/src/components/PopupRoot.tsx
+++ b/src/components/PopupRoot.tsx
@@ -101,28 +101,8 @@ export function PopupRoot({ drafts }: PopupRootProps) {
     })
   }
 
-  const getTableBody = () => {
-    if (drafts.length === 0) {
-      return <EmptyState />
-    }
-
-    if (
-      filteredDrafts.length === 0 &&
-      (filters.searchQuery || filters.sentFilter !== "both")
-    ) {
-      return <NoMatchesState onClearFilters={clearFilters} />
-    }
-
-    return filteredDrafts.map((row) => (
-      <CommentRow
-        key={row.spot.unique_key}
-        row={row}
-        selectedIds={selectedIds}
-        toggleSelection={toggleSelection}
-        handleOpen={handleOpen}
-        handleTrash={handleTrash}
-      />
-    ))
+  if (drafts.length === 0) {
+    return <EmptyState />
   }
 
   return (
@@ -233,7 +213,25 @@ export function PopupRoot({ drafts }: PopupRootProps) {
               </th>
             </tr>
           </thead>
-          <tbody className="divide-y divide-gray-200">{getTableBody()}</tbody>
+          <tbody className="divide-y divide-gray-200">
+            {filteredDrafts.length === 0 && (
+              <tr>
+                <td colSpan={2}>
+                  <NoMatchesState onClearFilters={clearFilters} />
+                </td>
+              </tr>
+            )}
+            {filteredDrafts.map((row) => (
+              <CommentRow
+                key={row.spot.unique_key}
+                row={row}
+                selectedIds={selectedIds}
+                toggleSelection={toggleSelection}
+                handleOpen={handleOpen}
+                handleTrash={handleTrash}
+              />
+            ))}
+          </tbody>
         </table>
       </div>
     </div>
diff --git a/src/entrypoints/popup/style.css b/src/entrypoints/popup/style.css
index 7a0144e..1683cae 100644
--- a/src/entrypoints/popup/style.css
+++ b/src/entrypoints/popup/style.css
@@ -8,9 +8,8 @@
 
 body {
   width: var(--popup-width);
-  height: var(--popup-height);
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  max-height: var(--popup-height);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: 14px;
   line-height: 1.4;
   margin: 0;
diff --git a/tests/playground/playground-styles.css b/tests/playground/playground-styles.css
index e6587c5..4b0fece 100644
--- a/tests/playground/playground-styles.css
+++ b/tests/playground/playground-styles.css
@@ -17,7 +17,7 @@ body {
 /* Popup simulator frame */
 .popup-frame {
   width: var(--popup-width);
-  height: var(--popup-height);
+  max-height: var(--popup-height);
   font-size: 14px;
   line-height: 1.4;
   background: white;

From 4faceccc2e734ebdca7c5dfdb0278616fae0901e Mon Sep 17 00:00:00 2001
From: Todd Riley <todd@websbytodd.com>
Date: Mon, 29 Sep 2025 15:22:51 -0400
Subject: [PATCH 2/2] biome

---
 src/components/NoMatchesState.tsx | 2 +-
 src/entrypoints/popup/style.css   | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/NoMatchesState.tsx b/src/components/NoMatchesState.tsx
index 4402b30..30e25af 100644
--- a/src/components/NoMatchesState.tsx
+++ b/src/components/NoMatchesState.tsx
@@ -8,7 +8,7 @@ export function NoMatchesState({ onClearFilters }: NoMatchesStateProps) {
       <button
         type="button"
         onClick={onClearFilters}
-        className="text-blue-600 hover:underline cursor-pointer"
+        className="cursor-pointer text-blue-600 hover:underline"
       >
         Clear filters
       </button>
diff --git a/src/entrypoints/popup/style.css b/src/entrypoints/popup/style.css
index 1683cae..114f6e7 100644
--- a/src/entrypoints/popup/style.css
+++ b/src/entrypoints/popup/style.css
@@ -9,7 +9,8 @@
 body {
   width: var(--popup-width);
   max-height: var(--popup-height);
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: 14px;
   line-height: 1.4;
   margin: 0;