annotation list is extracted to a component

src/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItem.component.tsx

-import { Icon } from '@/shared/Icon';
 import { Reference } from '@/types/models';
+import { twMerge } from 'tailwind-merge';
 
 type AnnotationItemProps = Pick<Reference, 'link' | 'type' | 'resource'>;
 
 export const AnnotationItem = ({ link, type, resource }: AnnotationItemProps): JSX.Element => (
-  <a className="pl-3 text-sm font-normal" href={link?.toString()} target="_blank">
+  <a
+    className={twMerge('pl-3 text-sm font-normal', link ? 'underline' : '')}
+    href={link?.toString()}
+    target="_blank"
+  >
     <div className="flex justify-between">
-      <span>
-        Source:{' '}
-        <b className="font-semibold">
-          {type} ({resource})
-        </b>
+      <span className="w-full font-semibold">
+        {type} ({resource})
       </span>
-      <Icon name="arrow" className="h-6 w-6 fill-font-500" />
     </div>
   </a>
 );

src/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItemList.component.tsx

+import { Reference } from '@/types/models';
+import { AnnotationItem } from '@/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItem.component';
+import React from 'react';
+import { ZERO } from '@/constants/common';
+
+type AnnotationItemListProps = {
+  references: Reference[];
+};
+
+export const AnnotationItemList = ({ references }: AnnotationItemListProps): React.ReactNode => {
+  const isReferenceAvailable = references.length > ZERO;
+  return (
+    <div>
+      <h3 className="font-semibold">
+        Annotations: {!isReferenceAvailable && <span className="font-normal">No annotations</span>}
+      </h3>
+      <div className="flex max-h-full flex-col gap-2 overflow-x-hidden pt-2">
+        {isReferenceAvailable &&
+          references.map(reference => (
+            <AnnotationItem
+              key={reference.id}
+              type={reference.type}
+              link={reference.link}
+              resource={reference.resource}
+            />
+          ))}
+      </div>
+    </div>
+  );
+};

src/components/Map/Drawer/BioEntityDrawer/BioEntityDrawer.component.tsx

@@ -16,8 +16,8 @@ import { CommentItem } from '@/components/Map/Drawer/BioEntityDrawer/Comments/Co
 import { getTypeBySBOTerm } from '@/utils/bioEntity/getTypeBySBOTerm';
 import { ModificationResidueItem } from '@/components/Map/Drawer/BioEntityDrawer/ModificationResidueItem';
 import React from 'react';
+import { AnnotationItemList } from '@/components/Map/Drawer/BioEntityDrawer/AnnotationItem/AnnotationItemList.component';
 import { CollapsibleSection } from '../ExportDrawer/CollapsibleSection';
-import { AnnotationItem } from './AnnotationItem';
 import { AssociatedSubmap } from './AssociatedSubmap';
 import { ChemicalsList } from './ChemicalsList';
 import { DrugsList } from './DrugsList';
@@ -42,7 +42,6 @@ export const BioEntityDrawer = (): React.ReactNode => {
     return null;
   }
 
-  const isReferenceAvailable = bioEntityData.references.length > ZERO;
   const isCommentAvailable = commentsData.length > ZERO;
   const modificationResidues = (
     bioEntityData.modificationResidues ? bioEntityData.modificationResidues : []
@@ -92,19 +91,7 @@ export const BioEntityDrawer = (): React.ReactNode => {
             ))}
           </ul>
         )}
-        <h3 className="font-semibold">
-          Annotations:{' '}
-          {!isReferenceAvailable && <span className="font-normal">No annotations</span>}
-        </h3>
-        {isReferenceAvailable &&
-          bioEntityData.references.map(reference => (
-            <AnnotationItem
-              key={reference.id}
-              type={reference.type}
-              link={reference.link}
-              resource={reference.resource}
-            />
-          ))}
+        <AnnotationItemList references={bioEntityData.references} />
         <AssociatedSubmap />
         {!relatedSubmap && (
           <>