flex-grow

return (
    <div className="relative">
      <div className="flex items-center">
        <form onSubmit={handleSearch} className="w-full relative">
          <div className="relative flex-grow">
            <input
              type="text"
              className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-...
              placeholder="Search repositories, PRs, issues..."
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              onFocus={() => setShowSuggestions(true)}
              onBlur={() => {
                // Delay hiding the suggestions to allow for clicks
                setTimeout(() => setShowSuggestions(false), 200);
              }}
            />
            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
              <svg className="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="cur...
                <path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 0...
              </svg>
            </div>
            {query && (
              <button

</div>
                    </div>
                    <h3 class="featured-repo-name text-center mb-3" data-bs-toggle="tooltip" data-bs-placement="top" ...
                        <a class="text-decoration-none" href="${repo.html_url}" target="_blank">${repo.name}</a>
                    </h3>
                    <p class="featured-repo-description text-center flex-grow-1 mb-3">${repo.description || "No descr...
                    <div class="featured-repo-stats d-grid grid-cols-2 gap-2 mb-3">
                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Repo's Stars" class=...
                            <i class="ri-star-line me-1"></i>${repo.stars.toLocaleString()}
                        </span>
                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Repo's Forks" class=...
                            <i class="ri-git-branch-line me-1"></i>${repo.forks.toLocaleString()}
                        </span>
                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Repo's Watching" cla...
                            <i class="ri-eye-line me-1"></i>${repo.watchers.toLocaleString()}
                        </span>
                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Repo's Type" class="...
                            <i class="ri-menu-search-line me-1"></i>${repo.type}
                        </span>
                    </div>
                    <div class="repo-topics d-flex flex-wrap gap-2 justify-content-center">
                        ${repo.topics.map(topic => `
                            <span class="badge bg-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data...
                                ${topic}
                            </span>