fix1607

src/components/SearchHistoryDropdown.tsx

@@ -38,7 +38,7 @@ const SearchHistoryDropdown: React.FC<SearchHistoryDropdownProps> = ({
   };
 
   return (
-    <div className="absolute top-full left-0 right-0 bg-white border border-gray-200 rounded-lg shadow-lg mt-2 z-50 max-h-60 overflow-y-auto">
+    <div className="search-history-dropdown-custom">
       {loading ? (
         <div className="p-4 text-center text-gray-500">
           <div className="flex items-center justify-center">
@@ -51,32 +51,24 @@ const SearchHistoryDropdown: React.FC<SearchHistoryDropdownProps> = ({
         </div>
       ) : uniqueQueries.length > 0 ? (
         <>
-          <div className="p-3 border-b border-gray-100">
-            <h3 className="text-xs font-medium text-gray-500 uppercase tracking-wide">
-              Последние запросы
-            </h3>
-          </div>
           {uniqueQueries.map((item) => (
             <button
               key={item.id}
               onClick={() => onItemClick(item.searchQuery)}
-              className="w-full text-left p-3 hover:bg-gray-50 border-b border-gray-100 last:border-b-0 transition-colors cursor-pointer"
+              className="search-history-item-custom"
               style={{ cursor: 'pointer' }}
             >
-              <div className="flex items-center justify-between">
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-gray-900 truncate">
-                    {item.searchQuery}
-                  </p>
-                  <p className="text-xs text-gray-500">
-                    {getSearchTypeLabel(item.searchType)}
-                  </p>
-                </div>
-                <div className="ml-2 flex-shrink-0">
-                  <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <div className="flex items-center gap-3">
+                <span className="search-history-icon-custom">
+                  <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" viewBox="0 0 24 24">
+                    <circle cx="12" cy="12" r="10" />
+                    <path d="M12 8v4l3 3" />
                   </svg>
-                </div>
+                </span>
+                <span className="search-history-inline">
+                  <span className="search-history-query-custom">{item.searchQuery}</span>
+                  <span className="search-history-type-custom">{getSearchTypeLabel(item.searchType)}</span>
+                </span>
               </div>
             </button>
           ))}
@@ -86,6 +78,91 @@ const SearchHistoryDropdown: React.FC<SearchHistoryDropdownProps> = ({
           <p className="text-sm">История поиска пуста</p>
         </div>
       )}
+      <style>{`
+        .search-history-dropdown-custom {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          background: #fff;
+          border-radius: 16px;
+          box-shadow: 0 8px 32px rgba(44,62,80,0.10), 0 1.5px 4px rgba(44,62,80,0.08);
+          margin-top: 12px;
+          z-index: 50;
+          max-height: 260px;
+          overflow-y: auto;
+          border: 1px solid #f0f0f0;
+          padding: 6px 0;
+          scrollbar-width: none; /* Firefox */
+          -ms-overflow-style: none; /* IE и Edge */
+        }
+        .search-history-dropdown-custom::-webkit-scrollbar {
+          display: none; /* Chrome, Safari, Opera */
+        }
+        .search-history-item-custom {
+          width: 100%;
+          background: none;
+          border: none;
+          outline: none;
+          padding: 12px 20px;
+          border-radius: 0;
+          transition: background 0.18s;
+          display: block;
+        }
+        .search-history-item-custom:hover, .search-history-item-custom:focus {
+          background: #e5e7eb;
+        }
+        .search-history-item-custom .flex {
+          flex-direction: row-reverse;
+        }
+        .search-history-icon-custom {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          background: #f3f4f6;
+          color: #222;
+          flex-shrink: 0;
+          margin-left: 12px;
+          margin-right: 0;
+        }
+        .search-history-item-custom:hover .search-history-icon-custom,
+        .search-history-item-custom:focus .search-history-icon-custom {
+          background: #ec1c24;
+          color: #fff;
+        }
+        .search-history-inline {
+          display: flex;
+          flex: 1 1 0%;
+          min-width: 0;
+          align-items: center;
+          gap: 8px;
+        }
+        .search-history-query-custom {
+          font-size: 15px;
+          font-weight: 500;
+          color: #222;
+          margin: 0;
+          line-height: 1.2;
+          letter-spacing: 0.01em;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1 1 0%;
+          min-width: 0;
+        }
+        .search-history-type-custom {
+          font-size: 12px;
+          color: #8e9aac;
+          margin: 0 0 0 8px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex-shrink: 0;
+        }
+      `}</style>
     </div>
   );
 };