Kitap arama lsitesi z-index düzenlendi.

src/components/UploadStep.jsx

@@ -7,6 +7,7 @@ import {
   CardActionArea,
   CardContent,
   CardMedia,
+  ClickAwayListener,
   Divider,
   Grid,
   LinearProgress,
@@ -43,6 +44,7 @@ const UploadStep = () => {
   const [searchError, setSearchError] = useState(null);
   const [selectedBookId, setSelectedBookId] = useState(bookMetadata?.id || null);
   const skipSearchRef = useRef(false);
+  const [showResults, setShowResults] = useState(false);
 
   const onDrop = useCallback(
     (acceptedFiles) => {
@@ -110,6 +112,7 @@ const UploadStep = () => {
       setSearchResults([]);
       setSearchError(null);
       setSearching(false);
+      setShowResults(false);
       return;
     }
     const controller = new AbortController();
@@ -128,6 +131,7 @@ const UploadStep = () => {
         const items = Array.isArray(payload.items) ? payload.items : [];
         const normalized = items.map((item) => normalizeVolume(item));
         setSearchResults(normalized);
+        setShowResults(Boolean(normalized.length));
         if (!normalized.length) {
           setSearchError('Bu başlıkla eşleşen bir kayıt bulunamadı.');
         }
@@ -135,6 +139,7 @@ const UploadStep = () => {
         if (controller.signal.aborted) return;
         setSearchResults([]);
         setSearchError(error.message || 'Google Books araması başarısız oldu.');
+        setShowResults(false);
       } finally {
         if (!controller.signal.aborted) {
           setSearching(false);
@@ -164,10 +169,12 @@ const UploadStep = () => {
       setSelectedBookId(null);
       setSearchResults([]);
       setSearchError(null);
+      setShowResults(false);
     } else if (bookMetadata && bookMetadata.title !== value) {
       setBookMetadata(null);
       setSelectedBookId(null);
     }
+    setShowResults(Boolean(value?.trim()));
   };
 
   const handleSelectBook = (book) => {
@@ -177,6 +184,7 @@ const UploadStep = () => {
     setBookTitle(book.title || '');
     setSearchResults([]);
     setSearchError(null);
+    setShowResults(false);
   };
 
   const selectedBookSummary = useMemo(() => {
@@ -200,32 +208,42 @@ const UploadStep = () => {
           {bookMetadata.authors?.length ? ` • ${bookMetadata.authors.join(', ')}` : ''}
         </Typography>
       )}
-      <Box>
+      <Box sx={{ position: 'relative', zIndex: 1 }}>
         <Typography variant="h6" gutterBottom>
           Kitap adı
         </Typography>
+        <ClickAwayListener onClickAway={() => setShowResults(false)}>
+          <Box sx={{ position: 'relative' }}>
             <TextField
               fullWidth
               placeholder="Örn. Yapay Zeka İmparatorluğu"
               value={bookTitle}
               onChange={handleTitleChange}
+              onFocus={() => searchResults.length && setShowResults(true)}
               InputProps={{ sx: { borderRadius: 2 } }}
             />
-        <Typography variant="body2" color="text.secondary" mt={1}>
-          Google Books veritabanında arama yapmak için kitap adını yaz. Seçtiğin kaydın tüm meta bilgileri EPUB&apos;a işlenecek.
-        </Typography>
-        {searching && <LinearProgress sx={{ mt: 2, borderRadius: 999 }} />}
-        {searchError && bookTitle.trim() && !searching && (
-          <Typography variant="body2" color="error.main" mt={1}>
-            {searchError}
-          </Typography>
-        )}
-        {searchResults.length > 0 && bookTitle?.trim() && (
-          <Paper variant="outlined" sx={{ mt: 2 }}>
+            {showResults && searchResults.length > 0 && bookTitle?.trim() && (
+              <Paper
+                variant="outlined"
+                sx={{
+                  position: 'absolute',
+                  top: 'calc(100% + 8px)',
+                  left: 0,
+                  right: 0,
+                  borderRadius: 1.2,
+                  zIndex: 10,
+                  maxHeight: 420,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  overflow: 'hidden',
+                  boxShadow: (theme) => theme.shadows[6],
+                }}
+              >
                 <Typography variant="subtitle2" sx={{ px: 2, pt: 2, pb: 1, color: 'text.secondary' }}>
                   Google Books sonuçları
                 </Typography>
                 <Divider />
+                <Box sx={{ flex: 1, overflowY: 'auto', pr: 1.5 }}>
                   <Stack divider={<Divider />} spacing={0}>
                     {searchResults.map((book) => {
                       const detailLine = [
@@ -323,9 +341,21 @@ const UploadStep = () => {
                     );
                   })}
                 </Stack>
+              </Box>
             </Paper>
             )}
           </Box>
+        </ClickAwayListener>
+        <Typography variant="body2" color="text.secondary" mt={1}>
+          Google Books veritabanında arama yapmak için kitap adını yaz. Seçtiğin kaydın tüm meta bilgileri EPUB&apos;a işlenecek.
+        </Typography>
+        {searching && <LinearProgress sx={{ mt: 2, borderRadius: 999 }} />}
+        {searchError && bookTitle.trim() && !searching && (
+          <Typography variant="body2" color="error.main" mt={1}>
+            {searchError}
+          </Typography>
+        )}
+      </Box>
       <Box {...getRootProps()} sx={dropzoneStyle}>
         <input {...getInputProps()} />
         <Typography variant="h5" gutterBottom>