Enhance UI and search functionality with improved styling and API query

index.html

@@ -35,7 +35,7 @@
 			width: 100%;
 			height: 600px;
 			pointer-events: none;
-      margin-top: 32px; /* Match header height */
+      margin-top: 48px; /* Match header height */
 		}
 
 		.grid-container {
@@ -70,12 +70,26 @@
       top: 0;
       left: 0;
       right: 0;
-      height: 32px;
-      background: rgba(0,0,0,0.5);
-      padding: 8px;
+      height: 48px;
+      background: rgba(0,0,0,0.75);
+      padding: 8px 16px;
       z-index: 10;
       display: flex;
       align-items: center;
+      width: 100%;
+    }
+
+    .grid-item-header h2 {
+      width: 100%;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+      hyphens: auto;
+      max-height: 32px;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      line-height: 1.2;
     }
     </style>
 
@@ -140,12 +154,17 @@
             data = await res.json();
           } else {
             const searchFilters = this.filter === 'tool' ? 'tool' : '(smolagent OR agent OR smolagents)';
-            const searchParam = this.searchQuery ?
-              (this.searchType === 'semantic' ? `&q=${encodeURIComponent(this.searchQuery)}` : `&search=${encodeURIComponent(this.searchQuery)}`)
-              : '';
-            const res = await fetch(
-              `https://huggingface.co/api/spaces?limit=100&filter=${searchFilters}${searchParam}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`
-            );
+            let searchUrl;
+            if (this.searchQuery) {
+              if (this.searchType === 'semantic') {
+                searchUrl = `https://huggingface.co/api/spaces/semantic-search?q=${encodeURIComponent(this.searchQuery)}`;
+              } else {
+                searchUrl = `https://huggingface.co/api/spaces?limit=500&filter=${searchFilters}&search=${encodeURIComponent(this.searchQuery)}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`;
+              }
+            } else {
+              searchUrl = `https://huggingface.co/api/spaces?limit=500&filter=${encodeURIComponent(searchFilters)}&expand[]=subdomain&expand[]=lastModified&expand[]=likes&expand[]=runtime`;
+            }
+            const res = await fetch(searchUrl);
             data = await res.json();
             console.log(data)
             // Transform the API response to match the expected format
@@ -192,8 +211,8 @@
       <section class="container px-6 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-14 mx-auto relative">
         <div class="col-span-2 lg:col-span-1 flex flex-col gap-14 row-start">
           <div class="flex items-center gap-2">
-            <img src="https://camo.githubusercontent.com/a8c1f1d12aa3114010c6e74b29d47fee91d8da10a915f065c38e6d0ea7f16568/68747470733a2f2f68756767696e67666163652e636f2f64617461736574732f68756767696e67666163652f646f63756d656e746174696f6e2d696d616765732f7265736f6c76652f6d61696e2f736d6f6c6167656e74732f6d6173636f742e706e67" alt="Smolagents mascot" class="w-14 h-14">
-            <h1 class="text-xl font-semibold text-gray-800 whitespace-nowrap">smolagents and tools gallery</h1>
+            <img src="https://camo.githubusercontent.com/a8c1f1d12aa3114010c6e74b29d47fee91d8da10a915f065c38e6d0ea7f16568/68747470733a2f2f68756767696e67666163652e636f2f64617461736574732f68756767696e67666163652f646f63756d656e746174696f6e2d696d616765732f7265736f6c76652f6d61696e2f736d6f6c6167656e74732f6d6173636f742e706e67" alt="Smolagents mascot" class="w-14 h-14 flex-shrink-0">
+            <h1 class="text-xl font-semibold text-gray-800 break-words">smolagents and tools gallery</h1>
           </div>
         </div>
         <div class="col-span-2 md:col-span-3 flex items-center gap-14 flex flex-wrap lg-auto lg:ml-auto text-sm">