adjust scroll area expertise | deploy sudirman

platform/ui-next/src/components/SidePanel/SidePanel.tsx

@@ -441,7 +441,7 @@ const SidePanel = ({
     });
 
     return (
-      <ScrollArea className="border-input bg-background h-[500px] w-[350px] rounded-md border p-2 text-sm text-white">
+      <ScrollArea className="border-input bg-background h-[500px] w-full rounded-md border p-2 text-sm text-white">
         <h3 className="mb-4 text-lg font-bold">Expertise</h3>
         {formattedData.map((section, index) => (
           <div
@@ -452,11 +452,16 @@ const SidePanel = ({
             {Array.isArray(section.value) ? (
               <ul className="list-disc pl-6">
                 {section.value.map((item, idx) => (
-                  <li key={idx}>{item}</li>
+                  <li
+                    key={idx}
+                    className="break-words"
+                  >
+                    {item}
+                  </li>
                 ))}
               </ul>
             ) : (
-              <p>{section.value}</p>
+              <p className="break-words">{section.value}</p>
             )}
           </div>
         ))}