info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-08 00:00:42 +02:00
Code Issues Releases Wiki Activity

fix: responsiveness

Browse Source
This commit is contained in:
Arik Chakma
2025-07-04 00:36:15 +06:00
parent 3948f2cec6
commit c9418b0fa4
4 changed files with 65 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/AIQuiz/AIOpenEndedQuestion.tsx
View File

@@ -57,7 +57,6 @@ export function AIOpenEndedQuestion(props: AIOpenEndedQuestionProps) {
}
setCorrectAnswer(data.feedback || '');
onSubmit(data.status);
},
});

2
src/components/AIQuiz/AIQuiz.tsx
View File

@@ -65,7 +65,7 @@ export function AIQuiz(props: AIQuizProps) {
</div>
)}
<div className="grow overflow-y-auto p-4 pt-0">
<div className="grow">
{quizSlug && !aiQuizError && (
<AIQuizContent
quizSlug={quizSlug}

13
src/components/AIQuiz/AIQuizContent.tsx
View File

@@ -148,12 +148,10 @@ export function AIQuizContent(props: AIQuizContentProps) {
};
return (
<div
className={cn(
'mx-auto w-full max-w-lg py-10',
quizStatus === 'reviewing' && 'pb-24',
)}
>
<div className="flex h-full w-full flex-col">
<div className="relative flex h-full flex-col overflow-y-auto">
<div className="absolute inset-0 z-10">
<div className="mx-auto max-w-lg bg-white px-4 py-10">
{shouldShowQuestions && (
<QuizTopNavigation
activeQuestionIndex={activeQuestionIndex}
@@ -211,6 +209,9 @@ export function AIQuizContent(props: AIQuizContentProps) {
)}
</>
)}
</div>
</div>
</div>
{quizStatus === 'reviewing' && (
<AIQuizStripe

8
src/components/AIQuiz/AIQuizStripe.tsx
View File

@@ -20,9 +20,9 @@ export function AIQuizStripe(props: AIQuizStripeProps) {
const states = Object.values(questionStates);
return (
<div className="fixed right-0 bottom-0 w-[calc(100vw-255px)] border-t border-gray-200 bg-white p-3">
<div className="flex items-center justify-between gap-2">
<div className="flex w-full gap-2">
<div className="border-t border-gray-200 bg-white p-3">
<div className="flex flex-col items-center justify-between gap-2 md:flex-row">
<div className="flex w-full flex-wrap gap-2">
{states.map((state, quizIndex) => (
<QuizStateButton
key={quizIndex}
@@ -35,7 +35,7 @@ export function AIQuizStripe(props: AIQuizStripeProps) {
</div>
<button
className="flex shrink-0 items-center gap-2 rounded-xl bg-black px-4 py-2 text-white hover:bg-gray-900 disabled:opacity-70"
className="flex w-full shrink-0 items-center justify-center gap-2 rounded-xl bg-black px-4 py-2 text-white hover:bg-gray-900 disabled:opacity-70 md:w-auto md:justify-start"
onClick={onComplete}
>
Show Results <ArrowRightIcon className="h-4 w-4" />