update mobile view for submit vote and quote pages

frontend/src/components/shared/AuthContainer.js

@@ -7,6 +7,8 @@ import {
   Stack,
   Paper,
   CircularProgress,
+  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import HFLogo from "../Logo/HFLogo";
 import { useAuth } from "../../hooks/useAuth";
@@ -16,6 +18,8 @@ import { useNavigate } from "react-router-dom";
 function AuthContainer({ actionText = "DO_ACTION" }) {
   const { isAuthenticated, user, login, logout, loading } = useAuth();
   const navigate = useNavigate();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   const handleLogout = () => {
     if (isAuthenticated && logout) {
@@ -63,7 +67,14 @@ function AuthContainer({ actionText = "DO_ACTION" }) {
         <Typography variant="h6" align="center">
           Login to {actionText}
         </Typography>
-        <Typography variant="body2" color="text.secondary" align="center">
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          align="center"
+          sx={{
+            px: isMobile ? 2 : 0,
+          }}
+        >
           You need to be logged in with your Hugging Face account to{" "}
           {actionText.toLowerCase()}
         </Typography>
@@ -87,6 +98,7 @@ function AuthContainer({ actionText = "DO_ACTION" }) {
             fontWeight: 600,
             py: 1,
             px: 2,
+            width: isMobile ? "100%" : "auto",
           }}
         >
           Sign in with Hugging Face
@@ -101,13 +113,22 @@ function AuthContainer({ actionText = "DO_ACTION" }) {
       sx={{ p: 2, border: "1px solid", borderColor: "grey.300", mb: 4 }}
     >
       <Stack
-        direction="row"
+        direction={isMobile ? "column" : "row"}
         spacing={2}
-        alignItems="center"
+        alignItems={isMobile ? "stretch" : "center"}
         justifyContent="space-between"
       >
-        <Stack direction="row" spacing={1} alignItems="center">
-          <Typography variant="body1">
+        <Stack
+          direction={isMobile ? "column" : "row"}
+          spacing={1}
+          alignItems={isMobile ? "stretch" : "center"}
+          sx={{ width: "100%" }}
+        >
+          <Typography
+            variant="body1"
+            align={isMobile ? "center" : "left"}
+            sx={{ mb: isMobile ? 1 : 0 }}
+          >
             Connected as <strong>{user?.username}</strong>
           </Typography>
           <Chip
@@ -115,6 +136,13 @@ function AuthContainer({ actionText = "DO_ACTION" }) {
             color="success"
             size="small"
             variant="outlined"
+            sx={{
+              width: isMobile ? "100%" : "auto",
+              height: isMobile ? 32 : 24,
+              "& .MuiChip-label": {
+                px: isMobile ? 2 : 1,
+              },
+            }}
           />
         </Stack>
         <Button
@@ -127,6 +155,7 @@ function AuthContainer({ actionText = "DO_ACTION" }) {
             height: 36,
             textTransform: "none",
             fontSize: "0.9375rem",
+            width: isMobile ? "100%" : "auto",
           }}
         >
           Logout

frontend/src/pages/AddModelPage/components/EvaluationQueues/EvaluationQueues.js

@@ -17,6 +17,8 @@ import {
   AccordionDetails,
   Stack,
   Tooltip,
+  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
@@ -359,90 +361,133 @@ const QueueAccordion = ({
   expanded,
   onChange,
   loading,
-}) => (
-  <Accordion
-    expanded={expanded}
-    onChange={onChange}
-    disabled={loading}
-    sx={{
-      "&:before": { display: "none" },
-      boxShadow: "none",
-      border: "none",
-    }}
-  >
-    <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Typography>{title}</Typography>
-        <Stack direction="row" spacing={1} alignItems="center">
-          <Chip
-            label={models.length}
-            size="small"
-            color={
-              status === "finished"
-                ? "success"
-                : status === "evaluating"
-                ? "warning"
-                : "info"
-            }
-            variant="outlined"
-            sx={(theme) => ({
-              borderWidth: 2,
-              fontWeight: 600,
-              bgcolor:
-                status === "finished"
-                  ? theme.palette.success[100]
-                  : status === "evaluating"
-                  ? theme.palette.warning[100]
-                  : theme.palette.info[100],
-              borderColor:
-                status === "finished"
-                  ? theme.palette.success[400]
-                  : status === "evaluating"
-                  ? theme.palette.warning[400]
-                  : theme.palette.info[400],
-              color:
+}) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onChange={onChange}
+      disabled={loading}
+      sx={{
+        "&:before": { display: "none" },
+        boxShadow: "none",
+        border: "none",
+      }}
+    >
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon />}
+        sx={{
+          px: { xs: 2, sm: 3 },
+          py: { xs: 1.5, sm: 2 },
+          alignItems: { xs: "flex-start", sm: "center" },
+          "& .MuiAccordionSummary-expandIconWrapper": {
+            marginTop: { xs: "4px", sm: 0 },
+          },
+        }}
+      >
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={{ xs: 1, sm: 2 }}
+          alignItems={{ xs: "flex-start", sm: "center" }}
+          sx={{ width: "100%" }}
+        >
+          <Typography
+            sx={{
+              fontSize: { xs: "0.95rem", sm: "1rem" },
+              fontWeight: 500,
+            }}
+          >
+            {title}
+          </Typography>
+          <Stack
+            direction={{ xs: "column", sm: "row" }}
+            spacing={1}
+            alignItems={{ xs: "stretch", sm: "center" }}
+            sx={{
+              ml: { xs: 0, sm: "auto" },
+              width: { xs: "100%", sm: "auto" },
+            }}
+          >
+            <Chip
+              label={models.length}
+              size={isMobile ? "small" : "medium"}
+              color={
                 status === "finished"
-                  ? theme.palette.success[700]
+                  ? "success"
                   : status === "evaluating"
-                  ? theme.palette.warning[700]
-                  : theme.palette.info[700],
-              "& .MuiChip-label": {
-                px: 1.2,
-              },
-              "&:hover": {
+                  ? "warning"
+                  : "info"
+              }
+              variant="outlined"
+              sx={(theme) => ({
+                borderWidth: 2,
+                fontWeight: 600,
+                fontSize: { xs: "0.75rem", sm: "0.875rem" },
+                height: { xs: "24px", sm: "32px" },
+                width: { xs: "100%", sm: "auto" },
                 bgcolor:
                   status === "finished"
-                    ? theme.palette.success[200]
+                    ? theme.palette.success[100]
                     : status === "evaluating"
-                    ? theme.palette.warning[200]
-                    : theme.palette.info[200],
-              },
-            })}
-          />
-          {loading && (
-            <CircularProgress size={16} color="inherit" sx={{ opacity: 0.5 }} />
-          )}
+                    ? theme.palette.warning[100]
+                    : theme.palette.info[100],
+                borderColor:
+                  status === "finished"
+                    ? theme.palette.success[400]
+                    : status === "evaluating"
+                    ? theme.palette.warning[400]
+                    : theme.palette.info[400],
+                color:
+                  status === "finished"
+                    ? theme.palette.success[700]
+                    : status === "evaluating"
+                    ? theme.palette.warning[700]
+                    : theme.palette.info[700],
+                "& .MuiChip-label": {
+                  px: { xs: 1, sm: 1.2 },
+                  width: "100%",
+                },
+                "&:hover": {
+                  bgcolor:
+                    status === "finished"
+                      ? theme.palette.success[200]
+                      : status === "evaluating"
+                      ? theme.palette.warning[200]
+                      : theme.palette.info[200],
+                },
+              })}
+            />
+            {loading && (
+              <CircularProgress
+                size={isMobile ? 14 : 16}
+                color="inherit"
+                sx={{ opacity: 0.5 }}
+              />
+            )}
+          </Stack>
         </Stack>
-      </Stack>
-    </AccordionSummary>
-    <AccordionDetails sx={{ p: 2 }}>
-      <Box
-        sx={{
-          border: "1px solid",
-          borderColor: "grey.200",
-          borderRadius: 1,
-          overflow: "hidden",
-        }}
-      >
-        <ModelTable
-          models={models}
-          emptyMessage={emptyMessage}
-          status={status}
-        />
-      </Box>
-    </AccordionDetails>
-  </Accordion>
-);
+      </AccordionSummary>
+      <AccordionDetails sx={{ p: { xs: 1, sm: 2 } }}>
+        <Box
+          sx={{
+            border: "1px solid",
+            borderColor: "grey.200",
+            borderRadius: 1,
+            overflow: "hidden",
+          }}
+        >
+          <ModelTable
+            models={models}
+            emptyMessage={emptyMessage}
+            status={status}
+          />
+        </Box>
+      </AccordionDetails>
+    </Accordion>
+  );
+};
 
 const EvaluationQueues = ({ defaultExpanded = true }) => {
   const [expanded, setExpanded] = useState(defaultExpanded);
@@ -454,6 +499,8 @@ const EvaluationQueues = ({ defaultExpanded = true }) => {
   });
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   useEffect(() => {
     const fetchModels = async () => {
@@ -534,11 +581,12 @@ const EvaluationQueues = ({ defaultExpanded = true }) => {
           opacity: 0.9,
         },
         "& .MuiAccordionSummary-root": {
-          minHeight: 64,
+          minHeight: { xs: 56, sm: 64 },
           bgcolor: "background.paper",
           borderRadius: "8px",
+          alignItems: { xs: "flex-start", sm: "center" },
           "&.Mui-expanded": {
-            minHeight: 64,
+            minHeight: { xs: 56, sm: 64 },
             borderRadius: "8px 8px 0 0",
           },
         },
@@ -553,52 +601,74 @@ const EvaluationQueues = ({ defaultExpanded = true }) => {
       <AccordionSummary
         expandIcon={<ExpandMoreIcon />}
         sx={{
-          px: 3,
+          px: { xs: 2, sm: 3 },
           "& .MuiAccordionSummary-expandIconWrapper": {
             color: "text.secondary",
             transform: "rotate(0deg)",
             transition: "transform 150ms",
+            marginTop: { xs: "4px", sm: 0 },
             "&.Mui-expanded": {
               transform: "rotate(180deg)",
             },
           },
         }}
       >
-        <Stack direction="row" spacing={2} alignItems="center">
+        <Stack
+          direction={{ xs: "column", sm: "row" }}
+          spacing={{ xs: 1, sm: 2 }}
+          alignItems={{ xs: "flex-start", sm: "center" }}
+          sx={{ width: "100%" }}
+        >
           <Typography
             variant="h6"
             sx={{
               fontWeight: 600,
               color: "text.primary",
               letterSpacing: "-0.01em",
+              fontSize: { xs: "1.1rem", sm: "1.25rem" },
             }}
           >
             Evaluation Status
           </Typography>
           {!loading && (
             <Stack
-              direction="row"
+              direction={{ xs: "column", sm: "row" }}
               spacing={1}
               sx={{
                 transition: "opacity 0.2s",
                 ".Mui-expanded &": {
                   opacity: 0,
+                  height: 0,
+                  m: 0,
+                  overflow: "hidden",
+                },
+                width: { xs: "100%", sm: "auto" },
+                alignItems: { xs: "stretch", sm: "center" },
+                mb: { xs: 1, sm: 0 },
+                ".Mui-expanded &": {
+                  mb: 0,
                 },
               }}
             >
               <Chip
                 label={`${models.pending.length} In Queue`}
-                size="small"
+                size={isMobile ? "small" : "medium"}
                 color="info"
                 variant="outlined"
                 sx={{
                   borderWidth: 2,
                   fontWeight: 600,
+                  fontSize: { xs: "0.75rem", sm: "0.875rem" },
+                  height: { xs: "24px", sm: "32px" },
                   bgcolor: "info.100",
                   borderColor: "info.400",
                   color: "info.700",
+                  width: { xs: "100%", sm: "auto" },
                   "& .MuiChip-label": {
-                    px: 1.2,
+                    px: { xs: 1, sm: 1.2 },
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
                   },
                   "&:hover": {
                     bgcolor: "info.200",
@@ -607,17 +677,23 @@ const EvaluationQueues = ({ defaultExpanded = true }) => {
               />
               <Chip
                 label={`${models.evaluating.length} Evaluating`}
-                size="small"
+                size={isMobile ? "small" : "medium"}
                 color="warning"
                 variant="outlined"
                 sx={{
                   borderWidth: 2,
                   fontWeight: 600,
+                  fontSize: { xs: "0.75rem", sm: "0.875rem" },
+                  height: { xs: "24px", sm: "32px" },
                   bgcolor: "warning.100",
                   borderColor: "warning.400",
                   color: "warning.700",
+                  width: { xs: "100%", sm: "auto" },
                   "& .MuiChip-label": {
-                    px: 1.2,
+                    px: { xs: 1, sm: 1.2 },
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
                   },
                   "&:hover": {
                     bgcolor: "warning.200",
@@ -626,17 +702,23 @@ const EvaluationQueues = ({ defaultExpanded = true }) => {
               />
               <Chip
                 label={`${models.finished.length} Evaluated`}
-                size="small"
+                size={isMobile ? "small" : "medium"}
                 color="success"
                 variant="outlined"
                 sx={{
                   borderWidth: 2,
                   fontWeight: 600,
+                  fontSize: { xs: "0.75rem", sm: "0.875rem" },
+                  height: { xs: "24px", sm: "32px" },
                   bgcolor: "success.100",
                   borderColor: "success.400",
                   color: "success.700",
+                  width: { xs: "100%", sm: "auto" },
                   "& .MuiChip-label": {
-                    px: 1.2,
+                    px: { xs: 1, sm: 1.2 },
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
                   },
                   "&:hover": {
                     bgcolor: "success.200",
@@ -647,7 +729,7 @@ const EvaluationQueues = ({ defaultExpanded = true }) => {
           )}
           {loading && (
             <CircularProgress
-              size={20}
+              size={isMobile ? 18 : 20}
               sx={{
                 color: "primary.main",
               }}

frontend/src/pages/VoteModelPage/VoteModelPage.js

@@ -13,6 +13,8 @@ import {
   IconButton,
   Stack,
   Link,
+  useTheme,
+  useMediaQuery,
 } from "@mui/material";
 import AccessTimeIcon from "@mui/icons-material/AccessTime";
 import PersonIcon from "@mui/icons-material/Person";
@@ -75,6 +77,8 @@ function VoteModelPage() {
   const [error, setError] = useState(null);
   const [userVotes, setUserVotes] = useState(new Set());
   const [loadingVotes, setLoadingVotes] = useState({});
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
 
   // Create a unique identifier for a model
   const getModelUniqueId = (model) => {
@@ -447,7 +451,7 @@ function VoteModelPage() {
             borderBottom: "1px solid",
             borderColor: "divider",
             bgcolor: "background.paper",
-            display: "grid",
+            display: { xs: "none", sm: "grid" },
             gridTemplateColumns: "1fr 200px 160px",
             gap: 3,
             alignItems: "center",
@@ -498,9 +502,9 @@ function VoteModelPage() {
                       py: 2.5,
                       px: 3,
                       display: "grid",
-                      gridTemplateColumns: "1fr 200px 160px",
-                      gap: 3,
-                      alignItems: "center",
+                      gridTemplateColumns: { xs: "1fr", sm: "1fr 200px 160px" },
+                      gap: { xs: 2, sm: 3 },
+                      alignItems: "start",
                       position: "relative",
                       "&:hover": {
                         bgcolor: "action.hover",
@@ -511,7 +515,11 @@ function VoteModelPage() {
                     <Box>
                       <Stack spacing={1}>
                         {/* Model name and link */}
-                        <Stack direction="row" spacing={1} alignItems="center">
+                        <Stack
+                          direction={{ xs: "column", sm: "row" }}
+                          spacing={1}
+                          alignItems={{ xs: "stretch", sm: "center" }}
+                        >
                           <Stack
                             direction="row"
                             spacing={1}
@@ -529,6 +537,8 @@ function VoteModelPage() {
                                 "&:hover": {
                                   textDecoration: "underline",
                                 },
+                                fontSize: { xs: "0.9rem", sm: "inherit" },
+                                wordBreak: "break-word",
                               }}
                             >
                               {model.name}
@@ -550,7 +560,19 @@ function VoteModelPage() {
                               <OpenInNewIcon sx={{ fontSize: "1rem" }} />
                             </IconButton>
                           </Stack>
-                          <Stack direction="row" spacing={1}>
+                          <Stack
+                            direction="row"
+                            spacing={1}
+                            sx={{
+                              width: { xs: "100%", sm: "auto" },
+                              justifyContent: {
+                                xs: "flex-start",
+                                sm: "flex-end",
+                              },
+                              flexWrap: "wrap",
+                              gap: 1,
+                            }}
+                          >
                             <Chip
                               label={model.precision}
                               size="small"
@@ -582,7 +604,11 @@ function VoteModelPage() {
                           </Stack>
                         </Stack>
                         {/* Metadata row */}
-                        <Stack direction="row" spacing={2} alignItems="center">
+                        <Stack
+                          direction={{ xs: "column", sm: "row" }}
+                          spacing={{ xs: 1, sm: 2 }}
+                          alignItems={{ xs: "flex-start", sm: "center" }}
+                        >
                           <Stack
                             direction="row"
                             spacing={0.5}
@@ -618,17 +644,22 @@ function VoteModelPage() {
                     </Box>
 
                     {/* Vote Column */}
-                    <Box sx={{ textAlign: "right" }}>
+                    <Box
+                      sx={{
+                        textAlign: { xs: "left", sm: "right" },
+                        mt: { xs: 2, sm: 0 },
+                      }}
+                    >
                       <Stack
-                        direction="row"
+                        direction={{ xs: "row", sm: "row" }}
                         spacing={2.5}
-                        justifyContent="flex-end"
+                        justifyContent={{ xs: "space-between", sm: "flex-end" }}
                         alignItems="center"
                       >
                         <Stack
-                          alignItems="center"
+                          alignItems={{ xs: "flex-start", sm: "center" }}
                           sx={{
-                            minWidth: "90px",
+                            minWidth: { xs: "auto", sm: "90px" },
                           }}
                         >
                           <Typography
@@ -637,7 +668,7 @@ function VoteModelPage() {
                             sx={{
                               fontWeight: 700,
                               lineHeight: 1,
-                              fontSize: "2rem",
+                              fontSize: { xs: "1.75rem", sm: "2rem" },
                               display: "flex",
                               alignItems: "center",
                               justifyContent: "center",
@@ -646,7 +677,7 @@ function VoteModelPage() {
                             <Typography
                               component="span"
                               sx={{
-                                fontSize: "1.5rem",
+                                fontSize: { xs: "1.25rem", sm: "1.5rem" },
                                 fontWeight: 600,
                                 color: "primary.main",
                                 lineHeight: 1,
@@ -686,7 +717,7 @@ function VoteModelPage() {
                         </Stack>
                         <Button
                           variant={model.hasVoted ? "contained" : "outlined"}
-                          size="large"
+                          size={isMobile ? "medium" : "large"}
                           onClick={() => handleVote(model)}
                           disabled={
                             !isAuthenticated ||
@@ -695,11 +726,11 @@ function VoteModelPage() {
                           }
                           color="primary"
                           sx={{
-                            minWidth: "100px",
-                            height: "40px",
+                            minWidth: { xs: "80px", sm: "100px" },
+                            height: { xs: "36px", sm: "40px" },
                             textTransform: "none",
                             fontWeight: 600,
-                            fontSize: "0.95rem",
+                            fontSize: { xs: "0.875rem", sm: "0.95rem" },
                             ...(model.hasVoted
                               ? {
                                   bgcolor: "primary.main",
@@ -721,7 +752,7 @@ function VoteModelPage() {
                           }}
                         >
                           {loadingVotes[getModelUniqueId(model)] ? (
-                            <CircularProgress size={24} color="inherit" />
+                            <CircularProgress size={20} color="inherit" />
                           ) : model.hasVoted ? (
                             <Stack
                               direction="row"
@@ -739,7 +770,13 @@ function VoteModelPage() {
                     </Box>
 
                     {/* Priority Column */}
-                    <Box sx={{ textAlign: "right" }}>
+                    <Box
+                      sx={{
+                        textAlign: { xs: "left", sm: "right" },
+                        mt: { xs: 2, sm: 0 },
+                        display: { xs: "none", sm: "block" },
+                      }}
+                    >
                       <Chip
                         label={
                           <Stack