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 { 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 { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
import { UserInfo, useUser } from "./UserContext";
@ -31,6 +33,9 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
} = props;
const location = useLocation();
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)
const formatRagSize = (size: number): string => {
if (size < 1000) return `${size} RAG elements`;
@ -60,9 +65,9 @@ const CandidateInfo: React.FC<CandidateInfoProps> = (props: CandidateInfoProps)
<Grid size={{ xs: 12, sm: 10 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', mb: 1 }}>
<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>}
<Typography variant="h5" component="h1" sx={{ fontWeight: 'bold' }}>
<Typography variant="h5" component="h1" sx={{ fontWeight: 'bold', whiteSpace: 'nowrap' }}>
{view.full_name}
</Typography>
</Box>

View File

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