From 1dedb1117ce6653828b75c8abe806daf4917d1a3 Mon Sep 17 00:00:00 2001
From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com>
Date: Mon, 29 Sep 2025 21:36:44 +0000
Subject: [PATCH] Add a close button and adjust spacing in the search pop-up
 window

Updates SearchModal component: adds a close (X) icon next to the search bar, reduces padding and margin between elements within the modal for a more compact layout, and imports the X icon from lucide-react.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bLfICpO
---
 client/src/components/SearchModal.tsx | 66 +++++++++++++++------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/client/src/components/SearchModal.tsx b/client/src/components/SearchModal.tsx
index f6ee415..69f9fa7 100644
--- a/client/src/components/SearchModal.tsx
+++ b/client/src/components/SearchModal.tsx
@@ -3,7 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 import { Link } from "wouter";
 import type { MediaOutlet, Article } from "@shared/schema";
 
@@ -59,10 +59,10 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden p-0 [&>button]:hidden">
         <DialogTitle className="sr-only">Search Articles and Media Outlets</DialogTitle>
         {/* Search Header */}
-        <div className="flex items-center pb-4 border-b pr-8">
+        <div className="flex items-center gap-2 p-3 border-b">
           <div className="relative flex-1">
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
             <Input
@@ -75,45 +75,53 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
               autoFocus
             />
           </div>
+          <button
+            onClick={handleClose}
+            className="p-2 hover:bg-gray-100 rounded transition-colors"
+            data-testid="search-modal-close"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4 text-gray-500" />
+          </button>
         </div>
 
         {/* Search Results */}
-        <div className="flex-1 overflow-y-auto p-4">
+        <div className="flex-1 overflow-y-auto p-3">
           {!debouncedQuery.trim() ? (
             /* Empty State */
-            <div className="text-center py-12 text-gray-500">
-              <p>Start typing to search articles and outlets</p>
+            <div className="text-center py-8 text-gray-500">
+              <p className="text-sm">Start typing to search articles and outlets</p>
             </div>
           ) : isLoading ? (
             /* Loading State */
-            <div className="space-y-4">
+            <div className="space-y-2">
               {Array.from({ length: 5 }).map((_, i) => (
                 <div key={i} className="animate-pulse">
-                  <div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
+                  <div className="h-4 bg-gray-200 rounded w-3/4 mb-1"></div>
                   <div className="h-3 bg-gray-200 rounded w-1/2"></div>
                 </div>
               ))}
             </div>
           ) : totalResults === 0 ? (
             /* No Results */
-            <div className="text-center py-12 text-gray-500">
-              <p>No results found for "{debouncedQuery}"</p>
-              <p className="text-sm mt-2">Try a different search term</p>
+            <div className="text-center py-8 text-gray-500">
+              <p className="text-sm">No results found for "{debouncedQuery}"</p>
+              <p className="text-xs mt-1">Try a different search term</p>
             </div>
           ) : (
             /* Search Results */
             <>
-              <div className="mb-4 text-sm text-gray-500">
+              <div className="mb-2 text-xs text-gray-500">
                 {totalResults} results found
               </div>
 
               {/* Outlets Section */}
               {searchResults && searchResults.outlets.length > 0 && (
-                <div className="mb-6">
-                  <h3 className="text-sm font-semibold text-gray-700 mb-3">
+                <div className="mb-3">
+                  <h3 className="text-sm font-semibold text-gray-700 mb-2">
                     Outlets ({searchResults.outlets.length})
                   </h3>
-                  <div className="space-y-3">
+                  <div className="space-y-2">
                     {searchResults.outlets.map((outlet) => (
                       <Link
                         key={outlet.id}
@@ -121,8 +129,8 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
                         onClick={handleLinkClick}
                         data-testid={`search-outlet-${outlet.id}`}
                       >
-                        <div className="flex items-center space-x-3 p-3 hover:bg-gray-50 rounded-lg border cursor-pointer">
-                          <div className="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden">
+                        <div className="flex items-center gap-2 p-2 hover:bg-gray-50 rounded border cursor-pointer">
+                          <div className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center overflow-hidden flex-shrink-0">
                             {outlet.imageUrl ? (
                               <img
                                 src={outlet.imageUrl}
@@ -130,21 +138,21 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
                                 className="w-full h-full object-cover"
                               />
                             ) : (
-                              <span className="text-gray-600 font-medium text-sm">
+                              <span className="text-gray-600 font-medium text-xs">
                                 {outlet.name.charAt(0)}
                               </span>
                             )}
                           </div>
                           <div className="flex-1 min-w-0">
-                            <div className="flex items-center space-x-2 mb-1">
-                              <h4 className="font-medium text-gray-900 truncate">
+                            <div className="flex items-center gap-1.5 mb-0.5">
+                              <h4 className="font-medium text-sm text-gray-900 truncate">
                                 {outlet.name}
                               </h4>
-                              <Badge variant="secondary" className="text-xs">
+                              <Badge variant="secondary" className="text-xs py-0">
                                 {outlet.category}
                               </Badge>
                             </div>
-                            <p className="text-sm text-gray-500 truncate">
+                            <p className="text-xs text-gray-500 truncate">
                               {outlet.description || "Media Outlet"}
                             </p>
                           </div>
@@ -158,10 +166,10 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
               {/* Articles Section */}
               {searchResults && searchResults.articles.length > 0 && (
                 <div>
-                  <h3 className="text-sm font-semibold text-gray-700 mb-3">
+                  <h3 className="text-sm font-semibold text-gray-700 mb-2">
                     Articles ({searchResults.articles.length})
                   </h3>
-                  <div className="space-y-3">
+                  <div className="space-y-2">
                     {searchResults.articles.map((article) => (
                       <Link
                         key={article.id}
@@ -169,9 +177,9 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
                         onClick={handleLinkClick}
                         data-testid={`search-article-${article.id}`}
                       >
-                        <div className="flex items-start space-x-3 p-3 hover:bg-gray-50 rounded-lg border cursor-pointer">
+                        <div className="flex items-start gap-2 p-2 hover:bg-gray-50 rounded border cursor-pointer">
                           {article.imageUrl && (
-                            <div className="w-16 h-12 rounded bg-gray-100 overflow-hidden flex-shrink-0">
+                            <div className="w-12 h-9 rounded bg-gray-100 overflow-hidden flex-shrink-0">
                               <img
                                 src={article.imageUrl}
                                 alt={article.title}
@@ -180,14 +188,14 @@ export default function SearchModal({ isOpen, onClose }: SearchModalProps) {
                             </div>
                           )}
                           <div className="flex-1 min-w-0">
-                            <h4 className="font-medium text-gray-900 line-clamp-2 mb-1">
+                            <h4 className="font-medium text-sm text-gray-900 line-clamp-2 mb-0.5">
                               {article.title}
                             </h4>
-                            <p className="text-sm text-gray-500 line-clamp-2">
+                            <p className="text-xs text-gray-500 line-clamp-1">
                               {article.excerpt || ""}
                             </p>
                             {article.publishedAt && (
-                              <p className="text-xs text-gray-400 mt-1">
+                              <p className="text-xs text-gray-400 mt-0.5">
                                 {new Date(article.publishedAt).toLocaleDateString('en-US', {
                                   month: 'short',
                                   day: 'numeric',