Dashboard: Fix contract overpage page overflow when there are too many events in single tx (#6700)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `ContractOverviewPage` and `LatestEvents` components in a React application by adding overflow handling and improving the display of event data.

### Detailed summary
- Added `overflow-hidden` class to the `div` in `ContractOverviewPage.tsx`.
- Refactored the mapping of `allEvents` in `LatestEvents.tsx` to use a block structure for better readability.
- Limited the displayed events to 3 and added a button to show additional events if more than 3 exist.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/ContractOverviewPage.tsx

@@ -39,7 +39,7 @@ export const ContractOverviewPage: React.FC<ContractOverviewPageProps> = ({
 }) => {
   return (
     <div className="flex flex-col gap-10 lg:flex-row lg:gap-8">
-      <div className="flex grow flex-col gap-10">
+      <div className="flex grow flex-col gap-10 overflow-hidden">
         <ContractChecklist
           isErc721={isErc721}
           isErc1155={isErc1155}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.tsx

@@ -48,7 +48,6 @@ export function LatestEventsUI(props: {
   trackingCategory: string;
 }) {
   const { allEvents, autoUpdate, eventsHref } = props;
-
   return (
     <div className="rounded-lg border bg-card">
       {/* header */}
@@ -93,37 +92,50 @@ export function LatestEventsUI(props: {
           </TableHeader>
 
           <TableBody>
-            {allEvents.slice(0, 3).map((transaction) => (
-              <TableRow key={transaction.transactionHash}>
-                <TableCell>
-                  <CopyTextButton
-                    textToShow={shortenString(transaction.transactionHash)}
-                    textToCopy={transaction.transactionHash}
-                    tooltip="Copy transaction hash"
-                    copyIconPosition="left"
-                    variant="ghost"
-                    className="-translate-x-2 font-mono"
-                  />
-                </TableCell>
-                <TableCell>
-                  <div className="flex w-max flex-wrap gap-2">
-                    {transaction.events.map((e) => (
-                      <Button
-                        key={e.logIndex + e.address + e.eventName}
-                        variant="outline"
-                        size="sm"
-                        className="h-auto rounded-full py-1"
-                        asChild
-                      >
-                        <Link href={`${eventsHref}?event=${e.eventName}`}>
-                          {e.eventName}
-                        </Link>
-                      </Button>
-                    ))}
-                  </div>
-                </TableCell>
-              </TableRow>
-            ))}
+            {allEvents.slice(0, 3).map((transaction) => {
+              return (
+                <TableRow key={transaction.transactionHash}>
+                  <TableCell>
+                    <CopyTextButton
+                      textToShow={shortenString(transaction.transactionHash)}
+                      textToCopy={transaction.transactionHash}
+                      tooltip="Copy transaction hash"
+                      copyIconPosition="left"
+                      variant="ghost"
+                      className="-translate-x-2 font-mono"
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex w-max flex-wrap gap-2">
+                      {transaction.events.slice(0, 3).map((e) => (
+                        <Button
+                          key={e.logIndex + e.address + e.eventName}
+                          variant="outline"
+                          size="sm"
+                          className="h-auto rounded-full py-1"
+                          asChild
+                        >
+                          <Link href={`${eventsHref}?event=${e.eventName}`}>
+                            {e.eventName}
+                          </Link>
+                        </Button>
+                      ))}
+
+                      {transaction.events.length > 3 && (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="h-auto rounded-full py-1 hover:bg-transparent"
+                          asChild
+                        >
+                          <div>+ {transaction.events.length - 3}</div>
+                        </Button>
+                      )}
+                    </div>
+                  </TableCell>
+                </TableRow>
+              );
+            })}
           </TableBody>
         </Table>
       </TableContainer>