MaterialUI - Card Component positioning issues - css

Question

Newbie to React, have mercy on my soul.
I'm attempting to create a card with a Collapse component. Cool. I have the following ugly result:
now, once I expand the Collapse component, my bottom bottoms move a bit upwards,
making my ugly result even uglier:
If I turn on pesticide extension, I get the following result once expanded:
it seems like the item below pushes my like and review buttons upwards, or perhaps I'm wrong.
Now, what is weird for me is that my buttons are absolute. by my understanding, they're supposed to be 'relative' to their parents, and act as a 'free entity', so I don't get why would it be moved anyway?
The code for that component:
import React, { useContext, useState } from "react";
import { styled } from "#mui/material/styles";
import Card from "#mui/material/Card";
import CardHeader from "#mui/material/CardHeader";
import CardMedia from "#mui/material/CardMedia";
import CardContent from "#mui/material/CardContent";
import CardActions from "#mui/material/CardActions";
import Collapse from "#mui/material/Collapse";
import Avatar from "#mui/material/Avatar";
import IconButton from "#mui/material/IconButton";
import Typography from "#mui/material/Typography";
import { red } from "#mui/material/colors";
import FavoriteIcon from "#mui/icons-material/Favorite";
import ShareIcon from "#mui/icons-material/Share";
import ExpandMoreIcon from "#mui/icons-material/ExpandMore";
import ExpandLessIcon from "#mui/icons-material/ExpandLess";
import MoreVertIcon from "#mui/icons-material/MoreVert";
import ThumbUpIcon from '#mui/icons-material/ThumbUp';
import ThumbDownIcon from '#mui/icons-material/ThumbDown';
import AuthContext from "../Contexts/isLoggedIn-context";
import usersAndProductsContext from "../Contexts/usersAndProducts-context";
import RateReviewIcon from '#mui/icons-material/RateReview';
import Farmers from "../Pages/Farmers";
import { useNavigate } from "react-router-dom";
import { Paper } from "#mui/material";
import ReviewText from "./ReviewText";
import { Box } from "#mui/system";
import { ExpandLess } from "#mui/icons-material";
// import logo_img from "../../Images/logo.png";
const ExpandMore = styled((props) => {
const { expand, ...other } = props;
return <IconButton {...other} />;
})(({ theme, expand }) => ({
transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
marginLeft: "auto",
transition: theme.transitions.create("transform", {
duration: theme.transitions.duration.shortest,
}),
}));
function FarmerComponent(props) {
let navigate = useNavigate();
let authCtx = useContext(AuthContext)
let usersAndItemsCtx = useContext(usersAndProductsContext)
let [isWritingReviewFlag, edit_isWritingReviewFlag] = useState(false);
let current_logged_user = usersAndItemsCtx.usersVal.find(user => user.id === authCtx.currentLoggedUserId);
console.log(current_logged_user.likedProfilesId)
let flag = (current_logged_user.likedProfilesId.find((id) =>id === props.id) ? true : false)
console.log(flag)
let [isCurrentFarmerLikedFlag, isCurrentFarmerLikedFlagToggle] = useState(flag)
const [expanded, setExpanded] = React.useState(false);
// let [favouriteClicked, set_favouriteClicked] = useState(false);
const handleFavouriteClicked = () => {
let prevLikedStatus = isCurrentFarmerLikedFlag
if(isCurrentFarmerLikedFlag){
current_logged_user.likedProfilesId = current_logged_user.likedProfilesId.filter(userid => props.id !== userid)
isCurrentFarmerLikedFlagToggle(!prevLikedStatus)
}
else {
current_logged_user.likedProfilesId.push(props.id);
isCurrentFarmerLikedFlagToggle(!prevLikedStatus)
}
}
const handleExpandClick = () => {
setExpanded(!expanded);
};
const handleCardClick = () => { //choosing a farmer to view his shop/products.
navigate('/farmershop/'+props.id)
}
const handleNewReview = () => {
edit_isWritingReviewFlag(true)
}
return (
<Paper sx={{width: "300px", border: "none"}}>
{/* props===the farmer card we're on */}
{isWritingReviewFlag ? <ReviewText
edit_isWritingReviewFlag={edit_isWritingReviewFlag}
reviewingFarmer={current_logged_user}
reviewedFarmer={props}
/> : <></>}
<Card
sx={{
height: "600px",
width: "350px",
padding: "5px",
backgroundColor: "#D37C65",
marginTop: "20px",
marginLeft: "20px",
marginRight: "20px",
boxShadow: "5px 16px 5px 0px rgba(0,0,0,0.75)",
borderRadius: "7px",
border: "none",
padding: "50px"
}}>
<div onClick={handleCardClick} style={{marginTop: "10%", letterSpacing: "2px", fontFamily: "sans-serif", cursor: "pointer"}}><h1>{props.firstname + " " + props.lastname}</h1></div>
<CardMedia
component="img"
height="194"
image={props.img}
sx={{borderRadius: "5px"}}
title={props.firstname + " " + props.lastname}
onClick={handleCardClick}
style={{cursor: "pointer", backgroundColor: "#5CBEFD"}}
/>
<Box sx={{borderRadius: "5px", opacity: "80%", position: "relative"}}>
<Typography variant="body2" color="text.secondary" sx={{backgroundColor: "#5CBEFD"}}> <span>Location: {props.location}</span></Typography>
{expanded ? <></> : <Typography variant="body2" color="text.secondary" sx={{backgroundColor: "#5CBEFD"}}><span>more info...</span></Typography>}
<IconButton onClick={handleExpandClick}>
{expanded ? <ExpandLessIcon/> : <ExpandMoreIcon/> }
</IconButton>
<Box sx={{marginTop: "80%"}}>
<Collapse sx={{position: "absolute", marginTop: "-70%" }} in={expanded}>{props.about}</Collapse>
</Box>
</Box>
<Box sx={{position: "absolute", marginTop: "-5%"}}>
<CardActions>
<IconButton onClick={handleFavouriteClicked} aria-label="add to favorites">
{!isCurrentFarmerLikedFlag ? <ThumbUpIcon style={{color: "rgba(0, 194, 0, 1)"}}/> : <ThumbDownIcon style={{color: "rgba(255, 30, 127, 1"}}/> }
</IconButton>
<IconButton onClick={handleNewReview} sx={{display: "flex", alignItems: "center", flexWrap: 'wrap'}} aria-label="add review">
<RateReviewIcon/>
<span style={{letterSpacing: "1px", marginLeft: "3px", marginBottom: "5px", fontSize: "15px"}}>add new review</span>
</IconButton>
</CardActions>
</Box>
</Card>
</Paper>
);
}
export default FarmerComponent;
Many thanks!