mobile fixes

frontend/src/components/BenchmarkDisplay.jsx

@@ -10,6 +10,8 @@ import {
   Link,
   CircularProgress,
   Tooltip,
+  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import AssessmentIcon from "@mui/icons-material/Assessment";
@@ -38,7 +40,9 @@ const BenchmarkDisplay = ({
 }) => {
   const [isDownloading, setIsDownloading] = useState(false);
   const { mode } = useThemeMode();
-  const theme = getTheme(mode);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const themeColors = getTheme(mode);
 
   // Default questions if none provided
   const questions =
@@ -95,8 +99,10 @@ const BenchmarkDisplay = ({
         sx={{
           mb: 4,
           display: "flex",
+          flexDirection: isMobile ? "column" : "row",
           justifyContent: "space-between",
-          alignItems: "center",
+          alignItems: isMobile ? "flex-start" : "center",
+          gap: isMobile ? 2 : 0,
         }}
       >
         <Box sx={{ display: "flex", alignItems: "center" }}>
@@ -104,7 +110,14 @@ const BenchmarkDisplay = ({
           <Typography variant="h6">Benchmark Created Successfully</Typography>
         </Box>
 
-        <Box sx={{ display: "flex", gap: 2 }}>
+        <Box
+          sx={{
+            display: "flex",
+            gap: 2,
+            width: isMobile ? "100%" : "auto",
+            flexDirection: isMobile ? "column" : "row",
+          }}
+        >
           <Tooltip title="Download the complete benchmark">
             <Button
               variant="outlined"
@@ -118,6 +131,7 @@ const BenchmarkDisplay = ({
               }
               onClick={handleDownloadClick}
               disabled={isDownloading || !sessionId}
+              fullWidth={isMobile}
             >
               {isDownloading ? "Downloading..." : "Download Benchmark"}
             </Button>
@@ -128,6 +142,7 @@ const BenchmarkDisplay = ({
             color="primary"
             startIcon={<AssessmentIcon />}
             onClick={handleEvaluationClick}
+            fullWidth={isMobile}
           >
             Start Evaluation
           </Button>
@@ -145,8 +160,8 @@ const BenchmarkDisplay = ({
             variant="outlined"
             sx={{
               mb: 2,
-              backgroundColor: theme.palette.background.subtle,
-              border: `1px solid ${theme.palette.divider}`,
+              backgroundColor: themeColors.palette.background.subtle,
+              border: `1px solid ${themeColors.palette.divider}`,
             }}
           >
             <CardContent>

frontend/src/components/ExternalLinks.jsx

@@ -1,13 +1,26 @@
-import React from "react";
-import { Box, Typography, IconButton, Tooltip } from "@mui/material";
+import React, { useState } from "react";
+import {
+  Box,
+  Typography,
+  IconButton,
+  Tooltip,
+  Menu,
+  MenuItem,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import ShareIcon from "@mui/icons-material/Share";
 import DarkModeOutlinedIcon from "@mui/icons-material/DarkModeOutlined";
 import LightModeOutlinedIcon from "@mui/icons-material/LightModeOutlined";
+import MenuIcon from "@mui/icons-material/Menu";
 import { useThemeMode } from "../hooks/useThemeMode";
 
 const ExternalLinks = () => {
   const { mode, toggleTheme } = useThemeMode();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const handleShare = async () => {
     try {
@@ -21,6 +34,33 @@ const ExternalLinks = () => {
     }
   };
 
+  const handleMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuClose = () => {
+    setAnchorEl(null);
+  };
+
+  const externalLinks = [
+    {
+      name: "GitHub",
+      url: "https://github.com/huggingface/yourbench",
+    },
+    {
+      name: "Dataset",
+      url: "https://huggingface.co/datasets/sumuks/tempora",
+    },
+    {
+      name: "Documentation",
+      url: "https://github.com/huggingface/yourbench/tree/main/docs",
+    },
+    {
+      name: "Full demo",
+      url: "https://huggingface.co/spaces/yourbench/yourbench-demo",
+    },
+  ];
+
   return (
     <Box
       sx={{
@@ -35,60 +75,97 @@ const ExternalLinks = () => {
         zIndex: 1000,
       }}
     >
-      <Typography
-        variant="body2"
-        sx={{
-          display: "flex",
-          gap: 2,
-          alignItems: "center",
-        }}
-      >
-        <a
-          href="https://github.com/huggingface/yourbench"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{ textDecoration: "none", color: "inherit" }}
-        >
-          GitHub
-          <OpenInNewIcon sx={{ fontSize: "0.75rem", ml: 0.5, opacity: 0.6 }} />
-        </a>
-        <Typography component="span" sx={{ opacity: 0.5 }}>
-          •
-        </Typography>
-        <a
-          href="https://huggingface.co/datasets/sumuks/tempora"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{ textDecoration: "none", color: "inherit" }}
-        >
-          Dataset
-          <OpenInNewIcon sx={{ fontSize: "0.75rem", ml: 0.5, opacity: 0.6 }} />
-        </a>
-        <Typography component="span" sx={{ opacity: 0.5 }}>
-          •
-        </Typography>
-        <a
-          href="https://github.com/huggingface/yourbench/tree/main/docs"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{ textDecoration: "none", color: "inherit" }}
+      {isMobile ? (
+        <>
+          <IconButton
+            onClick={handleMenuOpen}
+            size="small"
+            sx={{
+              color: "inherit",
+              opacity: 0.7,
+              "&:hover": {
+                opacity: 1,
+              },
+            }}
+          >
+            <MenuIcon />
+          </IconButton>
+          <Menu
+            anchorEl={anchorEl}
+            open={Boolean(anchorEl)}
+            onClose={handleMenuClose}
+            PaperProps={{
+              sx: {
+                mt: 1,
+                minWidth: 200,
+                borderRadius: 2,
+                boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
+              },
+            }}
+          >
+            {externalLinks.map((link) => (
+              <MenuItem
+                key={link.name}
+                onClick={handleMenuClose}
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  py: 1.5,
+                  px: 2,
+                }}
+              >
+                <a
+                  href={link.url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{
+                    textDecoration: "none",
+                    color: "inherit",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 0.5,
+                    width: "100%",
+                  }}
+                >
+                  {link.name}
+                  <OpenInNewIcon sx={{ fontSize: "0.75rem", opacity: 0.6 }} />
+                </a>
+              </MenuItem>
+            ))}
+          </Menu>
+        </>
+      ) : (
+        <Typography
+          variant="body2"
+          sx={{
+            display: "flex",
+            gap: 2,
+            alignItems: "center",
+          }}
         >
-          Documentation
-          <OpenInNewIcon sx={{ fontSize: "0.75rem", ml: 0.5, opacity: 0.6 }} />
-        </a>
-        <Typography component="span" sx={{ opacity: 0.5 }}>
-          •
+          {externalLinks.map((link, index) => (
+            <React.Fragment key={link.name}>
+              <a
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ textDecoration: "none", color: "inherit" }}
+              >
+                {link.name}
+                <OpenInNewIcon
+                  sx={{ fontSize: "0.75rem", ml: 0.5, opacity: 0.6 }}
+                />
+              </a>
+              {index < externalLinks.length - 1 && (
+                <Typography component="span" sx={{ opacity: 0.5 }}>
+                  •
+                </Typography>
+              )}
+            </React.Fragment>
+          ))}
         </Typography>
-        <a
-          href="https://huggingface.co/spaces/yourbench/yourbench-demo"
-          target="_blank"
-          rel="noopener noreferrer"
-          style={{ textDecoration: "none", color: "inherit" }}
-        >
-          Full demo
-          <OpenInNewIcon sx={{ fontSize: "0.75rem", ml: 0.5, opacity: 0.6 }} />
-        </a>
-      </Typography>
+      )}
       <Box sx={{ display: "flex", alignItems: "center" }}>
         <Tooltip title="Share">
           <IconButton