fix: payment notice collaspible

src/components/Callout/Callout.tsx

@@ -2,9 +2,8 @@ import {
   ChevronDownIcon,
   InformationCircleIcon,
 } from '@heroicons/react/24/solid'
-import { PropsWithChildren, useCallback, useState } from 'react'
+import { PropsWithChildren, useState } from 'react'
 import { twJoin, twMerge } from 'tailwind-merge'
-import { classNames } from 'utils/classNames'
 import { InfoCallout } from './InfoCallout'
 import { WarningCallout } from './WarningCallout'
 
@@ -29,19 +28,14 @@ export const Callout: React.FC<React.PropsWithChildren<CalloutProps>> &
   // Whether the callout is collapsed. Only relevant if collapsible is true.
   const [expanded, setExpanded] = useState<boolean>(false)
 
-  // react callback handler to expand the callout text
-  const handleToggleExpand = useCallback(() => {
-    setExpanded(!expanded)
-  }, [expanded])
-
   return (
     <div
       className={twMerge(
         'flex items-start gap-4 rounded-lg p-4',
         collapsible ? 'cursor-pointer select-none' : undefined,
         className,
       )}
-      onClick={collapsible ? handleToggleExpand : undefined}
+      onClick={collapsible ? () => setExpanded(!expanded) : undefined}
       role={collapsible ? 'button' : undefined}
     >
       {iconComponent !== null && (
@@ -50,7 +44,7 @@ export const Callout: React.FC<React.PropsWithChildren<CalloutProps>> &
         </span>
       )}
       <div
-        className={classNames(
+        className={twMerge(
           'inline-block overflow-hidden overflow-ellipsis',
           collapsible && !expanded ? 'whitespace-nowrap' : 'whitespace-normal',
         )}

src/components/v2v3/V2V3Project/ProjectDashboard/components/PayProjectModal/components/MessageSection.tsx

@@ -33,14 +33,12 @@ export const MessageSection = () => {
           className="mt-6 border border-bluebs-100 bg-bluebs-25 text-bluebs-700 dark:border-bluebs-800 dark:bg-bluebs-950 dark:text-bluebs-400"
           iconComponent={<EnvelopeIcon className="h-6 w-6" />}
         >
-          <div>
+          <>
             <div className="font-medium text-bluebs-700 dark:text-bluebs-300">
               <Trans>Notice from {projectName}</Trans>
             </div>
-            <p className="mt-2 mb-0 whitespace-pre-wrap">
-              {projectPayDisclosure}
-            </p>
-          </div>
+            <p className="mt-2 mb-0">{projectPayDisclosure}</p>
+          </>
         </Callout>
       )}
     </div>