Mobile tweaks
This commit is contained in:
parent
4d12de24a6
commit
4fde4a48c5
@ -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>
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user