new layout, filters on side

Author: Bud-Macaulay

src/components/OptimadeClient/PaginationHandler.jsx

@@ -13,9 +13,9 @@ export function PaginationHandler({
     "px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 hover:cursor-pointer disabled:opacity-50 disabled:cursor-default";
 
   return (
-    <div className="flex flex-wrap justify-center items-center gap-1 mt-4">
+    <div className="flex flex-wrap justify-center items-center gap-1">
       <span className="text-slate-700 text-sm text-center w-full md:w-auto">
-        {`Filtered results: ${metaData.data_returned} of ${metaData.data_available} | Page ${currentPage} of ${totalPages}`}
+        {`Filtered results: ${metaData.data_returned} of ${metaData.data_available} | Showing page ${currentPage} of ${totalPages}`}
       </span>
 
       <button

src/components/OptimadeClient/ResultsDropdown.jsx

@@ -7,7 +7,7 @@ export default function ResultsDropdown({
   setSelectedResult,
 }) {
   return (
-    <div className="w-full mb-4 relative">
+    <div className="max-w-md">
       <label className="block text-sm font-medium text-gray-700 mb-1">
         Select a result
       </label>

src/components/OptimadeClient/index.jsx

@@ -185,22 +185,28 @@ export function OptimadeClient({ hideProviderList = ["exmpl", "matcloud"] }) {
               {/* Implies success and */}
               {!loading && results && currentResult && (
                 <div className="py-1 md:py-2 ">
-                  <ResultsDropdown
-                    results={results}
-                    resultsLoading={loading}
-                    selectedResult={currentResult}
-                    setSelectedResult={setCurrentResult}
-                  />
+                  <div className="flex items-end gap-4">
+                    <div className="flex-1">
+                      <ResultsDropdown
+                        results={results}
+                        resultsLoading={loading}
+                        selectedResult={currentResult}
+                        setSelectedResult={setCurrentResult}
+                      />
+                    </div>
+
+                    <div>
+                      <PaginationHandler
+                        currentPage={currentPage}
+                        totalPages={totalPages}
+                        resultsLoading={loading}
+                        metaData={metaData}
+                        onPageChange={setCurrentPage}
+                      />
+                    </div>
+                  </div>
 
                   <ResultViewer selectedResult={currentResult} />
-
-                  <PaginationHandler
-                    currentPage={currentPage}
-                    totalPages={totalPages}
-                    resultsLoading={loading}
-                    metaData={metaData}
-                    onPageChange={setCurrentPage}
-                  />
                 </div>
               )}
             </div>