feat: make left and right panels stack vertically on small screens for better responsiveness

Author: elainefan331

src/components/DatasetDetailPage/LoadDatasetTabs.tsx

@@ -9,13 +9,11 @@ import cpp from "react-syntax-highlighter/dist/esm/languages/hljs/cpp";
 import javascript from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
 import matlab from "react-syntax-highlighter/dist/esm/languages/hljs/matlab";
 import python from "react-syntax-highlighter/dist/esm/languages/hljs/python";
-import {
-  docco,
-  atomOneDark,
-} from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { Color } from "three";
+import { atomOneDark } from "react-syntax-highlighter/dist/esm/styles/hljs";
 
-// Register them
+// import { Color } from "three";
+
+// Register language theme
 SyntaxHighlighter.registerLanguage("python", python);
 SyntaxHighlighter.registerLanguage("bash", bash);
 SyntaxHighlighter.registerLanguage("cpp", cpp);
@@ -101,31 +99,12 @@ const LoadDatasetTabs: React.FC<LoadDatasetTabsProps> = ({
     );
   };
 
-  // const CopyableCodeBlock = ({ code }: { code: string }) => {
-  //   const handleCopy = () => {
-  //     navigator.clipboard.writeText(code);
-  //   };
-  //   return (
-  //     <Box sx={{ position: "relative" }}>
-  //       <IconButton
-  //         onClick={handleCopy}
-  //         size="small"
-  //         sx={{ position: "absolute", top: 5, right: 5 }}
-  //       >
-  //         <Tooltip title="Copy to clipboard">
-  //           <ContentCopyIcon fontSize="small" />
-  //         </Tooltip>
-  //       </IconButton>
-  //       <code style={flashcardStyles.codeBlock}>{code}</code>
-  //     </Box>
-  //   );
-  // };
   const CopyableCodeBlock = ({
     code,
-    language = "python", // optionally allow language selection
+    language = "python",
   }: {
     code: string;
-    language?: string;
+    language?: string; // optional prop
   }) => {
     const handleCopy = () => {
       navigator.clipboard.writeText(code);

src/pages/DatasetDetailPage.tsx

@@ -733,8 +733,14 @@ const DatasetDetailPage: React.FC = () => {
             gap: 2,
             alignItems: "flex-start",
             marginTop: 2,
-            height: "960px", // fixed height container
-            // border: "2px solid red",
+            flexDirection: {
+              xs: "column",
+              md: "row",
+            },
+            height: {
+              xs: "auto",
+              md: "960px", // fixed height container
+            },
           }}
         >
           {/* ✅ JSON Viewer (left panel) */}
@@ -745,8 +751,18 @@ const DatasetDetailPage: React.FC = () => {
               padding: 2,
               borderRadius: "8px",
               overflowX: "auto",
-              height: "100%",
-              // border: "2px solid yellow",
+              height: {
+                xs: "auto",
+                md: "100%",
+              },
+              width: {
+                xs: "100%",
+                md: "auto",
+              },
+              minWidth: {
+                xs: "100%",
+                md: "350px",
+              },
             }}
           >
             <ReactJson
@@ -763,22 +779,28 @@ const DatasetDetailPage: React.FC = () => {
           {/* ✅ Data panels (right panel) */}
           <Box
             sx={{
-              width: "460px",
-              minWidth: "360px",
+              width: {
+                xs: "100%",
+                md: "460px",
+              },
+              minWidth: {
+                xs: "100%",
+                md: "360px",
+              },
+              height: {
+                xs: "auto",
+                md: "100%",
+              },
               display: "flex",
               flexDirection: "column",
               gap: 2,
-              height: "100%",
-              // border: "2px solid green",
             }}
           >
             <Box
               sx={{
                 backgroundColor: Colors.lightBlue,
                 padding: 2,
                 borderRadius: "8px",
-                // marginTop: 4,
-                // border: "2px solid orange",
                 flex: 1,
                 // overflowY: "auto",
               }}
@@ -884,10 +906,8 @@ const DatasetDetailPage: React.FC = () => {
                 backgroundColor: "#eaeaea",
                 padding: 2,
                 borderRadius: "8px",
-                // marginTop: 4,
                 flex: 1,
                 // overflowY: "auto",
-                // border: "2px solid blue",
               }}
             >
               {/* ✅ Header with toggle */}