From d246489260f3035477016fff7a5024972764b6f0 Mon Sep 17 00:00:00 2001
From: Sujal Agarwal <sujalagarwal.nitdgp@gmail.com>
Date: Fri, 4 Sep 2026 11:22:11 +0530
Subject: [PATCH] fix(ui): made the interview exp preview scrollable

---
 .../InterviewExperiences/PostExperience.jsx   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/InterviewExperiences/PostExperience.jsx b/src/components/InterviewExperiences/PostExperience.jsx
index a81bc28..e7a248d 100644
--- a/src/components/InterviewExperiences/PostExperience.jsx
+++ b/src/components/InterviewExperiences/PostExperience.jsx
@@ -197,14 +197,13 @@ const PostExperience = () => {
             </NumberInput>
           </FormControl>
 
-          <FormControl className="flex flex-col items-start">
-           
+          <FormControl className="flex flex-col items-start w-full">
             <div className="flex justify-start items-center">
               <FormLabel className="mt-0" htmlFor="details">
-              Details
+                Details
               </FormLabel>
             </div>
-            <div className="w-full flex flex-col md:flex-row items-center justify-center">
+            <div className="w-full flex flex-col md:flex-row items-start justify-center gap-4">
               <Textarea
                 id="details"
                 name="details"
@@ -214,18 +213,19 @@ const PostExperience = () => {
                 size="lg"
                 height="150px"
                 width={{ base: "100%", md: "50%" }}
+                resize="none"
               />
-              <div className="w-full md:w-1/2 flex flex-col items-start justify-center border border-white rounded-lg mx-2 mt-4 md:mt-0">
-                <Box w="100%">
-                  <Heading as="h5" size="sm" textAlign="center" h="100%">
+              <div className="w-full md:w-1/2 flex flex-col items-start justify-start border border-white rounded-lg mt-4 md:mt-0 h-[150px] overflow-hidden">
+                <Box w="100%" py={1}>
+                  <Heading as="h5" size="sm" textAlign="center">
                     Preview
                   </Heading>
-                  <Box borderBottom="1px solid white" />
                 </Box>
-                <div className="w-full h-[130px] text-left">
+                <Box w="100%" borderBottom="1px solid white" />
+                <div className="w-full flex-1 text-left overflow-y-auto break-all p-2">
                   <ReactMarkdown
                     children={experienceData.details}
-                    className="font-sub text-md lg:text-lg ml-2 mt-2"
+                    className="font-sub text-md lg:text-lg"
                     remarkPlugins={[remarkGfm]}
                     rehypePlugins={[rehypeRaw]}
                   />