Merge pull request #26487 from overleaf/dp-error-log-clickbox

Expand clickable area of log header in new editor

GitOrigin-RevId: dbb24ea84d04b41ce779f0490b34d51f44164f9e

services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx

@@ -10,6 +10,7 @@ import {
 import useResizeObserver from '@/features/preview/hooks/use-resize-observer'
 import OLIconButton from '@/features/ui/components/ol/ol-icon-button'
 import importOverleafModules from '../../../../../macros/import-overleaf-module.macro'
+import MaterialIcon from '@/shared/components/material-icon'
 
 const actionComponents = importOverleafModules(
   'pdfLogEntryHeaderActionComponents'
@@ -102,32 +103,36 @@ function LogEntryHeader({
         description={collapsed ? t('expand') : t('collapse')}
         overlayProps={{ placement: 'bottom' }}
       >
-        <OLIconButton
-          size="sm"
-          variant="ghost"
-          icon={
-            openCollapseIconOverride ??
-            (collapsed ? 'chevron_right' : 'expand_more')
-          }
+        <button
+          className="log-entry-header-button"
           onClick={onToggleCollapsed}
-          accessibilityLabel={collapsed ? t('expand') : t('collapse')}
-        />
+          aria-label={collapsed ? t('expand') : t('collapse')}
+        >
+          <MaterialIcon
+            onClick={onToggleCollapsed}
+            type={
+              openCollapseIconOverride ??
+              (collapsed ? 'chevron_right' : 'expand_more')
+            }
+          />
+          <div className="log-entry-header-content">
+            <h3 className={logEntryHeaderTextClasses}>{headerTitleText}</h3>
+            {locationSpanOverflown && formattedLocationText && locationText ? (
+              <OLTooltip
+                id={locationText}
+                description={locationText}
+                overlayProps={{ placement: 'left' }}
+                tooltipProps={{ className: 'log-location-tooltip' }}
+              >
+                {formattedLocationText}
+              </OLTooltip>
+            ) : (
+              formattedLocationText
+            )}
+          </div>
+        </button>
       </OLTooltip>
-      <div className="log-entry-header-content">
-        <h3 className={logEntryHeaderTextClasses}>{headerTitleText}</h3>
-        {locationSpanOverflown && formattedLocationText && locationText ? (
-          <OLTooltip
-            id={locationText}
-            description={locationText}
-            overlayProps={{ placement: 'left' }}
-            tooltipProps={{ className: 'log-location-tooltip' }}
-          >
-            {formattedLocationText}
-          </OLTooltip>
-        ) : (
-          formattedLocationText
-        )}
-      </div>
+
       {actionButtonsOverride ?? (
         <div className="log-entry-header-actions">
           {showSourceLocationLink && (

services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss

@@ -64,7 +64,7 @@
       background-color: var(--bg-primary-themed);
       width: 100%;
       border-radius: var(--border-radius-base);
-      padding: var(--spacing-05) var(--spacing-04);
+      padding: var(--spacing-04);
 
       .horizontal-divider {
         margin: var(--spacing-04) 0;
@@ -76,11 +76,30 @@
       background-color: var(--bg-primary-themed);
       width: 100%;
       display: flex;
-      gap: var(--spacing-03);
       align-items: center;
       border: none;
     }
 
+    .log-entry-header-button {
+      all: unset;
+      display: flex;
+      gap: var(--spacing-03);
+      align-items: center;
+      flex: 1;
+      border-radius: var(--border-radius-base);
+      padding: var(--spacing-02) var(--spacing-03) var(--spacing-02) 0;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &:hover,
+      :focus,
+      :active {
+        background-color: var(--bg-secondary-themed);
+      }
+    }
+
     .log-entry-header-content {
       display: flex;
       flex-direction: column;
@@ -88,6 +107,7 @@
       gap: var(--spacing-02);
       flex: 1;
       overflow: hidden;
+      font-weight: normal;
     }
 
     .log-entry-header-text {