https://i.sstatic.net/FTfyi.png
I'm facing a challenge with positioning corner components on the screen using react and react-bootstrap. Even after trying various methods like modifying col size, adjusting right positioning, and using box-sizing property, I'm still unable to eliminate extra space added by the Col wrapping the SVG component on the right side. This issue prevents me from placing the components in the respective corners effectively. Below is the code snippet for the parent component and the corner component.
return (
<div>
{error && <Alert variant="danger">{error}</Alert>}
{searchParams.get("user") != null &&
<svg onClick={redirectAccount} width="60px" height="60px" style={{ position: "fixed", right : "48%", padding : "10px"}} viewBox="0 0 24.00 24.00" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="0.00024000000000000003">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_iconCarrier"> <g id="style=doutone"> <g id="add-box"> <path id="vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M1.25 8C1.25 4.27208 4.27208 1.25 8 1.25H16C19.7279 1.25 22.75 4.27208 22.75 8V16C22.75 19.7279...
</div>
And here's the code for the corner component:
import { ReactComponent as CornerImg } from '../img/corner.svg';
export default function Corner(props) {
const style = {
transform: "rotate(" + props.rotation + "deg)",
width: "70%",
height: "auto",
};
return (
<CornerImg style={style} />
);
}