fix(Audio,Transcript): let the components inherit parent width (#750)

Author: huyenltnguyen

src/quiz-question/audio/audio.tsx

@@ -124,7 +124,7 @@ export const Audio = ({
 			{/* Transcript is added separately in a different component */}
 			{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
 			<audio ref={audioRef} src={audioSrc} aria-label={ariaLabel}></audio>
-			<div className="flex items-center gap-3 bg-background-primary px-2.5 py-2 w-full max-w-md rounded border-x-4 border-t-4 border-b-4 border-background-tertiary">
+			<div className="flex items-center gap-3 bg-background-primary px-2.5 py-2 rounded border-x-4 border-t-4 border-b-4 border-background-tertiary">
 				<button
 					onClick={togglePlay}
 					className="text-foreground-tertiary bg-transparent border-none p-0 scale-75 transition-transform"

src/quiz-question/quiz-question.tsx

@@ -74,11 +74,10 @@ export const QuizQuestion = <AnswerT extends number | string>({
 				</RadioGroup.Label>
 
 				{audioUrl && (
-					<div className="ps-4">
+					<div className="ps-4 w-full max-w-lg mt-3 space-y-3">
 						<Audio
 							src={audioUrl}
 							aria-label={audioAriaLabel}
-							className="mt-3"
 							startTime={audioStartTime}
 							finishTime={audioFinishTime}
 						/>

src/quiz-question/transcript/transcript.tsx

@@ -42,7 +42,7 @@ export const Transcript = ({ transcript }: TranscriptProps) => {
 				Transcript
 			</summary>
 			<div
-				className="mt-4 border border-foreground-primary [&_p]:px-3.5 [&_p]:py-2 [&_p]:mb-0 [&_p]:text-foreground-primary [&_p:nth-child(odd)]:bg-background-tertiary"
+				className="mt-3 border border-foreground-primary [&_p]:px-2.5 [&_p]:py-2 [&_p]:mb-0 [&_p]:text-foreground-primary [&_p:nth-child(odd)]:bg-background-tertiary"
 				dangerouslySetInnerHTML={{ __html: sanitizedTranscript }}
 			/>
 		</details>