Mobile tweaks

This commit is contained in:
James Ketr 2025-05-23 12:06:56 -07:00
parent 4d12de24a6
commit 4fde4a48c5
2 changed files with 7 additions and 3 deletions

View File

@ -1,5 +1,7 @@
import React from 'react'; import React from 'react';
import { Box, Link, Typography, Avatar, Paper, Grid, Chip, SxProps } from '@mui/material'; import { Box, Link, Typography, Avatar, Paper, Grid, Chip, SxProps } from '@mui/material';
import { useMediaQuery } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { styled } from '@mui/material/styles'; import { styled } from '@mui/material/styles';
import { Route, Routes, useLocation, useNavigate } from 'react-router-dom'; import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import { UserInfo, useUser } from "./UserContext"; import { UserInfo, useUser } from "./UserContext";
@ -31,6 +33,9 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
} = props; } = props;
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
// Format RAG content size (e.g., if it's in bytes, convert to KB/MB) // Format RAG content size (e.g., if it's in bytes, convert to KB/MB)
const formatRagSize = (size: number): string => { const formatRagSize = (size: number): string => {
if (size < 1000) return `${size} RAG elements`; if (size < 1000) return `${size} RAG elements`;
@ -60,9 +65,9 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
<Grid size={{ xs: 12, sm: 10 }}> <Grid size={{ xs: 12, sm: 10 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}> <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}>
<Box> <Box>
<Box sx={{ display: "flex", flexDirection: "row", alignItems: "center", gap: 1, "& > .MuiTypography-root": { m: 0 } }}> <Box sx={{ display: "flex", flexDirection: isMobile ? "column" : "row", alignItems: "center", gap: 1, "& > .MuiTypography-root": { m: 0 } }}>
{action !== '' && <Typography variant="body1">{action}</Typography>} {action !== '' && <Typography variant="body1">{action}</Typography>}
<Typography variant="h5" component="h1" sx={{ fontWeight: 'bold' }}> <Typography variant="h5" component="h1" sx={{ fontWeight: 'bold', whiteSpace: 'nowrap' }}>
{view.full_name} {view.full_name}
</Typography> </Typography>
</Box> </Box>

View File

@ -9,7 +9,6 @@
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
overflow-y: auto; overflow-y: auto;
height: 100%;
justify-content: center; justify-content: center;
} }