style: improve layout by displaying form and results side-by-side with better styling

Author: elainefan331

src/pages/SearchPage.tsx

@@ -25,65 +25,104 @@ const SearchPage: React.FC = () => {
   };
 
   return (
-    <Container maxWidth="md" style={{ marginTop: "2rem" }}>
+    <Container
+      //   maxWidth="md"
+      style={{
+        marginTop: "2rem",
+        // backgroundColor: "rgba(97, 109, 243, 0.4)",
+        // backdropFilter: "blur(10px)",
+        backgroundColor: Colors.white,
+        padding: "2rem",
+        borderRadius: 4,
+        width: "100%",
+      }}
+    >
       <Box
         sx={{
-          backgroundColor: "white",
-          p: 3,
-          borderRadius: 2,
-          boxShadow: 1,
+          //   backgroundColor: "white",
+          //   p: 3,
+          //   borderRadius: 2,
+          //   boxShadow: 1,
+          display: "flex",
+          gap: 3,
+          alignItems: "flex-start",
         }}
       >
-        <Form
-          schema={schema}
-          onSubmit={handleSubmit}
-          validator={validator}
-          liveValidate
-        />
+        <Box
+          sx={{
+            // flex: "0 0 300px", // fixed width
+            flex: 1,
+            backgroundColor: "white",
+            p: 3,
+            borderRadius: 2,
+            boxShadow: 1,
+          }}
+        >
+          <Form
+            schema={schema}
+            onSubmit={handleSubmit}
+            validator={validator}
+            liveValidate
+          />
+        </Box>
 
-        {hasSearched && searchResults && (
-          <Box mt={4}>
-            {Array.isArray(searchResults) ? (
-              searchResults.length > 0 ? (
-                <>
+        <Box
+          sx={{
+            flex: 2,
+            backgroundColor: "white",
+            paddingLeft: 3,
+            paddingRight: 3,
+            borderRadius: 2,
+            boxShadow: 1,
+          }}
+        >
+          {hasSearched && searchResults && (
+            <Box mt={4}>
+              {Array.isArray(searchResults) ? (
+                searchResults.length > 0 ? (
+                  <>
+                    <Typography
+                      variant="h6"
+                      sx={{ borderBottom: "1px solid lightgray" }}
+                    >
+                      {`Found ${searchResults.length} Datasets`}
+                    </Typography>
+                    <ul>
+                      {searchResults.map((item, idx) => {
+                        const label = `${item.dbname}/${item.dsname}`;
+                        const link = `${RoutesEnum.DATABASES}/${item.dbname}/${item.dsname}`;
+
+                        return (
+                          <Box key={idx} mb={1}>
+                            <Link
+                              to={link}
+                              style={{
+                                textDecoration: "none",
+                                color: Colors.blue,
+                              }}
+                            >
+                              {label}
+                            </Link>
+                          </Box>
+                        );
+                      })}
+                    </ul>
+                  </>
+                ) : (
                   <Typography variant="h6">
-                    {`Found ${searchResults.length} Datasets`}
+                    No matching dataset was found
                   </Typography>
-                  <ul>
-                    {searchResults.map((item, idx) => {
-                      const label = `${item.dbname}/${item.dsname}`;
-                      const link = `${RoutesEnum.DATABASES}/${item.dbname}/${item.dsname}`;
-
-                      return (
-                        <Box key={idx} mb={1}>
-                          <Link
-                            to={link}
-                            style={{
-                              textDecoration: "none",
-                              color: Colors.blue,
-                            }}
-                          >
-                            {label}
-                          </Link>
-                        </Box>
-                      );
-                    })}
-                  </ul>
-                </>
+                )
               ) : (
-                <Typography variant="h6">
-                  No matching dataset was found
+                <Typography color="error">
+                  {searchResults?.msg === "empty output"
+                    ? "No results found based on your criteria. Please adjust the filters and try again."
+                    : "Something went wrong. Please try again later."}
                 </Typography>
-              )
-            ) : (
-              <Typography color="error">
-                {searchResults?.msg === "empty output"
-                  ? "No results found based on your criteria. Please adjust the filters and try again."
-                  : "Something went wrong. Please try again later."}
-              </Typography>
-            )}
-          </Box>
-        )}
+              )}
+            </Box>
+          )}
+        </Box>
       </Box>
     </Container>
   );