Before I pose my question, let me quickly go over the relevant code:
The Homepage Component
const Home = () => {
return (
<div>
<div>
{questions.map((question) => (
<div key={question.id} className="mb-4">
<Question
title={question.title}
contentPreview={question.contentPreview}
/>
</div>
))}
</div>
<Card className="p-4">Side Controls</Card>
</div>
);
};
The Question Component
const Question = ({ title, contentPreview }) => (
<Card className="p-4 break-words">
<h1 className="mb-4 text-lg text-blue-600">{title}</h1>
<p className="text-gray-500">{contentPreview}</p>
<div className="flex mt-4 gap-4">
<InfoIcon
icon={<HeartIcon />}
info={20}
iconClassName="text-red-400 w-6 h-6"
infoClassName="text-gray-500"
/>
<InfoIcon
icon={<CommentIcon />}
info={40}
iconClassName="text-blue-400 w-6 h-6"
infoClassName="text-gray-500"
/>
</div>
</Card>
);
The Layout Component that wraps Homepage
const Layout = ({ children }) => (
<div className="bg-gray-100">
<div className="flex flex-col min-h-screen">
<NavBar />
<div className="mt-4 max-w-7xl self-center w-full px-4">{children}</div>
</div>
</div>
);
Now, let's take a look at some screenshots depicting the issue:
First, a screenshot showing the background of the Homepage Component for clarity: https://gyazo.com/b8aa356912f973f854299c665c66de76
Next, a screenshot showcasing the div containing the questions in a reddish color, and the controls/sidebar in green: https://gyazo.com/2ceb6a1277f1de4506531a2bcf0b9b17
Lastly, the main issue arises when attempting to place the controls and list of questions side by side. By using the "flex" class on the container div of both elements, the controls extend beyond the intended boundaries: https://gyazo.com/af6206b95dc684bbcb316a8d33362b62 If you have any insights or solutions to this problem, please share. Thank you in advance.
(Please refrain from suggesting the use of Bootstrap or another UI framework, as I am specifically utilizing Tailwind CSS and prefer to remain within its constraints.)