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

[web] Improve redesigned error logs on narrow screens

GitOrigin-RevId: f9c4f577f3dcd1acb3eb9c5df6295b26b85b4b2f

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

@@ -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">

services/web/frontend/js/features/ide-redesign/components/rail/rail-panel.tsx

@@ -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}

services/web/frontend/stylesheets/pages/editor/logs.scss

@@ -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 {