fix(ourlogs): Do not double nest buttons (#92330)

Author: colin-sentry

static/app/components/events/ourlogs/ourlogsSection.tsx

@@ -68,7 +68,7 @@ function OurlogsSectionContent({
   const logsSearch = useLogsSearch();
   const abbreviatedTableData = (tableData.data ?? []).slice(0, 5);
   const {openDrawer} = useDrawer();
-  const logsTableRef = useRef<HTMLButtonElement>(null);
+  const viewAllButtonRef = useRef<HTMLButtonElement>(null);
   const sharedHoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   const limitToTraceId = event.contexts?.trace?.trace_id;
@@ -97,11 +97,8 @@ function OurlogsSectionContent({
         drawerKey: 'logs-issue-drawer',
 
         shouldCloseOnInteractOutside: element => {
-          const viewAllButton = logsTableRef.current;
-          if (viewAllButton?.contains(element)) {
-            return false;
-          }
-          return true;
+          const viewAllButton = viewAllButtonRef.current;
+          return !viewAllButton?.contains(element);
         },
       }
     );
@@ -128,7 +125,7 @@ function OurlogsSectionContent({
       title={t('Logs')}
       data-test-id="logs-data-section"
     >
-      <SmallTableContentWrapper ref={logsTableRef} onClick={() => onOpenLogsDrawer()}>
+      <SmallTableContentWrapper onClick={() => onOpenLogsDrawer()}>
         <SmallTable>
           <TableBody>
             {abbreviatedTableData?.map((row, index) => (
@@ -149,6 +146,7 @@ function OurlogsSectionContent({
               aria-label={t('View more')}
               size="sm"
               onClick={() => onOpenLogsDrawer()}
+              ref={viewAllButtonRef}
             >
               {t('View more')}
             </Button>
@@ -164,8 +162,7 @@ const SmallTable = styled('table')`
   grid-template-columns: 15px auto 1fr;
 `;
 
-const SmallTableContentWrapper = styled('button')`
-  all: unset;
+const SmallTableContentWrapper = styled('div')`
   display: flex;
   flex-direction: column;
 `;