diff --git a/services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx b/services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx index fdbfb56c0d..a9fd385def 100644 --- a/services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx +++ b/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' }} > - + aria-label={collapsed ? t('expand') : t('collapse')} + > + +
+

{headerTitleText}

+ {locationSpanOverflown && formattedLocationText && locationText ? ( + + {formattedLocationText} + + ) : ( + formattedLocationText + )} +
+ -
-

{headerTitleText}

- {locationSpanOverflown && formattedLocationText && locationText ? ( - - {formattedLocationText} - - ) : ( - formattedLocationText - )} -
+ {actionButtonsOverride ?? (
{showSourceLocationLink && ( diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss index 14ddde5236..218732b3bc 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/logs.scss +++ b/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 {