Merge pull request #28427 from overleaf/mj-error-log-narrow

[web] Improve redesigned error logs on narrow screens

GitOrigin-RevId: f9c4f577f3dcd1acb3eb9c5df6295b26b85b4b2f
This commit is contained in:
Mathias Jakobsen
2025-09-11 09:42:20 +01:00
committed by Copybot
parent a9bc28ca27
commit 6dc54df48a
3 changed files with 43 additions and 38 deletions
@@ -107,41 +107,35 @@ function LogEntryHeader({
return (
<header className="log-entry-header-card">
<OLTooltip
id={`expand-collapse-${locationText}`}
description={collapsed ? t('expand') : t('collapse')}
overlayProps={{ placement: 'bottom' }}
<button
data-action="expand-collapse"
data-collapsed={collapsed}
className="log-entry-header-button"
onClick={onToggleCollapsed}
aria-label={collapsed ? t('expand') : t('collapse')}
>
<button
data-action="expand-collapse"
data-collapsed={collapsed}
className="log-entry-header-button"
onClick={onToggleCollapsed}
aria-label={collapsed ? t('expand') : t('collapse')}
>
<MaterialIcon
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>
<MaterialIcon
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: 'right' }}
tooltipProps={{ className: 'log-location-tooltip' }}
>
{formattedLocationText}
</OLTooltip>
) : (
formattedLocationText
)}
</div>
</button>
{actionButtonsOverride ?? (
<div className="log-entry-header-actions">
@@ -36,7 +36,7 @@ export default function RailPanel({
id={`ide-redesign-sidebar-panel-${isHistoryView ? 'file-tree' : selectedTab}`}
className={classNames({ hidden: isReviewPanelOpen })}
order={1}
defaultSize={15}
defaultSize={selectedTab === 'errors' ? 20 : 15}
minSize={5}
maxSize={80}
ref={panelRef}
@@ -78,7 +78,9 @@
display: flex;
align-items: center;
border: none;
gap: var(--spacing-03);
flex-wrap: wrap;
container-type: inline-size;
column-gap: var(--spacing-03);
}
.log-entry-header-button {
@@ -88,7 +90,7 @@
align-items: center;
flex: 1;
border-radius: var(--border-radius-base);
padding: var(--spacing-02) var(--spacing-03) var(--spacing-02) 0;
padding: var(--spacing-02) 0;
overflow: hidden;
user-select: text;
@@ -152,7 +154,16 @@
.log-entry-header-actions {
display: flex;
gap: var(--spacing-03);
}
@container (width <= 250px) {
.log-entry-header-actions {
padding-left: var(--spacing-06);
}
.log-entry-header-button {
min-width: 100%;
}
}
.log-entry-content-button-container {