Fix layout issues with the empty states (#96)

Author: nedtwigg

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>
   )
 }

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="cursor-pointer text-blue-600 hover:underline"
       >
         Clear filters
       </button>

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>

src/entrypoints/popup/style.css

@@ -8,7 +8,7 @@
 
 body {
   width: var(--popup-width);
-  height: var(--popup-height);
+  max-height: var(--popup-height);
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-size: 14px;

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;