css improvments

Author: Bud-Macaulay

src/components/OptimadeClient/DatabaseSelector.jsx

@@ -50,7 +50,7 @@ export function DatabaseSelector({ providers, onQueryUrlChange }) {
   }, [selectedProvider, childSelected, customUrl, onQueryUrlChange]);
 
   return (
-    <div className="flex flex-col items-start space-y-2 w-full sm:max-w-xs md:max-w-sm lg:max-w-md">
+    <div className="flex flex-col items-start space-y-2 w-full max-w-md">
       <select
         className={slateDropdown}
         value={selectedProvider}

src/components/OptimadeClient/OptimadeFilters/index.jsx

@@ -86,7 +86,7 @@ export default function OptimadeFilters({ initialFilter, onSubmit }) {
         </label>
       </div>
 
-      <div className="pb-4">
+      <div className="pb-4 text-sm md:text-base">
         <QueryTextBox
           value={filterString}
           onChange={manualMode ? setManualQuery : () => {}}

src/components/OptimadeClient/OptimadeHeader.jsx

@@ -1,10 +1,10 @@
 export default function OptimadeHeader() {
   return (
-    <div className="flex justify-center py-4 bg-white shadow w-full">
+    <div className="flex justify-center">
       <img
         src="optimade_logo.png"
         alt="OptimadeLogo"
-        className="h-24 sm:h-32 w-auto object-contain"
+        className="h-18 sm:h-24 md:h-32 w-auto object-contain"
       />
     </div>
   );

src/components/OptimadeClient/PaginationHandler.jsx

@@ -9,6 +9,9 @@ export function PaginationHandler({
 }) {
   if (!totalPages || totalPages < 1) return null;
 
+  const buttonClassName =
+    "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">
       <span className="text-slate-700 text-sm text-center w-full md:w-auto">
@@ -18,28 +21,28 @@ export function PaginationHandler({
       <button
         onClick={() => onPageChange(1)}
         disabled={currentPage === 1 || resultsLoading}
-        className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-default"
+        className={buttonClassName}
       >
         <FirstIcon />
       </button>
       <button
         onClick={() => onPageChange(currentPage - 1)}
         disabled={currentPage === 1 || resultsLoading}
-        className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-default"
+        className={buttonClassName}
       >
         <PreviousIcon />
       </button>
       <button
         onClick={() => onPageChange(currentPage + 1)}
         disabled={currentPage === totalPages || resultsLoading}
-        className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-default"
+        className={buttonClassName}
       >
         <NextIcon />
       </button>
       <button
         onClick={() => onPageChange(totalPages)}
         disabled={currentPage === totalPages || resultsLoading}
-        className="px-3 py-1 bg-gray-200 rounded hover:bg-gray-300 disabled:opacity-50 disabled:cursor-default"
+        className={buttonClassName}
       >
         <LastIcon />
       </button>

src/components/OptimadeClient/ResultViewer.jsx

@@ -27,18 +27,20 @@ export function ResultViewer({ selectedResult }) {
   );
 
   return (
-    <div className="w-full mt-4 flex flex-col">
+    <div className="w-full mt-2 md:mt-4 flex flex-col">
       {/* Result details */}
       {selectedResult && (
-        <div className="@container w-full flex flex-col md:flex-row gap-4">
+        <div className="@container w-full flex flex-col md:flex-row gap-2 md:gap-4">
           <div className="w-full md:w-1/2">
             <StructureViewerWithDownload
               OptimadeStructure={selectedResult}
               cifText={cifText}
             />
           </div>
-          <div className="w-full md:w-1/2 bg-slate-100 rounded shadow border p-2 min-h-[12rem] md:h-[450px] h-[200px] overflow-auto text-xs">
-            <p className="text-[14px] pb-2">OPTIMADE JSON RESPONSE</p>
+          <div className="w-full md:w-1/2 bg-slate-100 rounded shadow border p-2 min-h-48 md:h-[450px] h-[200px] overflow-auto text-xs">
+            <p className="text-sm md:text-md pb-1 md:pb-2">
+              OPTIMADE JSON RESPONSE
+            </p>
             <JsonView
               data={selectedResult}
               compactTopLevel
@@ -49,7 +51,7 @@ export function ResultViewer({ selectedResult }) {
         </div>
       )}
 
-      <div className="mt-4 flex justify-center">
+      <div className="mt-2 md:mt-4 flex justify-center">
         <QEInputButton cifText={cifText} />
       </div>
     </div>

src/components/OptimadeClient/index.jsx

@@ -90,7 +90,7 @@ export function OptimadeClient() {
         </div>
 
         {/* Query URL display */}
-        <div className="pt-2">
+        <div className="pt-2 text-sm md:text-base">
           Query Url:{" "}
           {queryUrl ? (
             <a
@@ -168,7 +168,7 @@ export function OptimadeClient() {
 
             {/* Implies success and */}
             {!loading && results && currentResult && (
-              <div className="py-2 ">
+              <div className="py-1 md:py-2 ">
                 <ResultsDropdown
                   results={results}
                   resultsLoading={loading}

src/components/OptimadeStructureHandler/index.jsx

@@ -3,8 +3,6 @@ import StructureVisualizer from "mc-react-structure-visualizer";
 import { StructureDownload } from "../common/StructureDownload";
 import { generateCIFfromMatrix } from "../../utils";
 
-import QEInputButton from "../common/QEInputButton";
-
 export function StructureViewerWithDownload({
   OptimadeStructure,
   className = "",

src/components/common/QEInputButton.jsx

@@ -45,7 +45,7 @@ export default function QEInputButton({ cifText }) {
       onClick={handleClick}
       disabled={!cifText}
       title="Use the chosen structure in the QE Input Generator Tool"
-      className="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-400"
+      className="px-2 py-1 md:px-4 md:py-2 rounded bg-blue-600 text-white hover:bg-blue-700 disabled:bg-gray-400 text-sm md:text-base"
     >
       Use in QE Input Generator
     </button>

src/components/common/RangeSlider.jsx

@@ -3,7 +3,7 @@ import React from "react";
 
 export default function RangeSlider({ title, value, onChange, min, max }) {
   return (
-    <div className="my-4">
+    <div className="my-4 text-sm md:text-base">
       <label className="block font mb-1">{title}</label>
       <Range
         step={1}
@@ -30,7 +30,7 @@ export default function RangeSlider({ title, value, onChange, min, max }) {
           />
         )}
       />
-      <div className="flex justify-between text-sm mt-1.5">
+      <div className="flex justify-between text-xs md:text-sm pt-2">
         <span>{value[0]}</span>
         <span>{value[1]}</span>
       </div>

src/components/common/StructureDownload.jsx

@@ -106,7 +106,7 @@ export function StructureDownload({ OptimadeStructure, download_formats }) {
               <li key={format}>
                 <button
                   onClick={() => handleDownload(format)}
-                  className="block w-full text-left px-3 py-1.5 text-sm text-slate-800 hover:bg-gray-100"
+                  className="block w-full text-left px-3 py-1.5 text-sm text-slate-800 hover:bg-gray-100 hover:cursor-pointer"
                 >
                   {label}
                 </button>