From 43fccf60b981fe52a1170936d3ff0276f6ef75d9 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Tue, 26 Aug 2025 13:38:19 +0100
Subject: [PATCH] Merge pull request #28117 from overleaf/dp-tab-headings

Align rail panel headers to use the same font-weight and line-height

GitOrigin-RevId: e982f6d816e2f1b0e8f4a0af603222262d58bab0
---
 .../components/review-panel-header.tsx           | 16 +++++++++++++---
 .../js/shared/components/panel-heading.tsx       |  1 +
 .../stylesheets/pages/editor/file-tree.scss      |  3 ++-
 .../stylesheets/pages/editor/outline.scss        |  4 +++-
 .../frontend/stylesheets/pages/editor/rail.scss  |  2 ++
 5 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/services/web/frontend/js/features/review-panel/components/review-panel-header.tsx b/services/web/frontend/js/features/review-panel/components/review-panel-header.tsx
index ab5d5509e8..08d2ba0171 100644
--- a/services/web/frontend/js/features/review-panel/components/review-panel-header.tsx
+++ b/services/web/frontend/js/features/review-panel/components/review-panel-header.tsx
@@ -3,16 +3,26 @@ import { ReviewPanelResolvedThreadsButton } from './review-panel-resolved-thread
 import { useTranslation } from 'react-i18next'
 import { PanelHeading } from '@/shared/components/panel-heading'
 import useReviewPanelLayout from '../hooks/use-review-panel-layout'
+import RailPanelHeader from '@/features/ide-redesign/components/rail/rail-panel-header'
+import { useIsNewEditorEnabled } from '@/features/ide-redesign/utils/new-editor-utils'
 
 const ReviewPanelHeader: FC = () => {
   const { closeReviewPanel } = useReviewPanelLayout()
   const { t } = useTranslation()
+  const newEditor = useIsNewEditorEnabled()
 
   return (
     <div className="review-panel-header">
-      <PanelHeading title={t('review')} handleClose={closeReviewPanel}>
-        <ReviewPanelResolvedThreadsButton />
-      </PanelHeading>
+      {newEditor ? (
+        <RailPanelHeader
+          title={t('review')}
+          actions={[<ReviewPanelResolvedThreadsButton key="resolve-threads" />]}
+        />
+      ) : (
+        <PanelHeading title={t('review')} handleClose={closeReviewPanel}>
+          <ReviewPanelResolvedThreadsButton />
+        </PanelHeading>
+      )}
     </div>
   )
 }
diff --git a/services/web/frontend/js/shared/components/panel-heading.tsx b/services/web/frontend/js/shared/components/panel-heading.tsx
index 22aaff2125..0184e23c4f 100644
--- a/services/web/frontend/js/shared/components/panel-heading.tsx
+++ b/services/web/frontend/js/shared/components/panel-heading.tsx
@@ -4,6 +4,7 @@ import MaterialIcon from '@/shared/components/material-icon'
 import { useTranslation } from 'react-i18next'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 
+// TODO ide-redesign-cleanup: Remove this component and only use RailPanelHeader
 export const PanelHeading: FC<
   React.PropsWithChildren<{
     title: string
diff --git a/services/web/frontend/stylesheets/pages/editor/file-tree.scss b/services/web/frontend/stylesheets/pages/editor/file-tree.scss
index 23cfd7e803..2979d37ad1 100644
--- a/services/web/frontend/stylesheets/pages/editor/file-tree.scss
+++ b/services/web/frontend/stylesheets/pages/editor/file-tree.scss
@@ -87,8 +87,9 @@
     h4 {
       color: var(--file-tree-expand-button-color);
       font-size: var(--font-size-02);
+      line-height: var(--line-height-02);
       margin: 0;
-      font-weight: normal;
+      font-weight: bold;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
diff --git a/services/web/frontend/stylesheets/pages/editor/outline.scss b/services/web/frontend/stylesheets/pages/editor/outline.scss
index f915f16994..ce20c131e2 100644
--- a/services/web/frontend/stylesheets/pages/editor/outline.scss
+++ b/services/web/frontend/stylesheets/pages/editor/outline.scss
@@ -76,7 +76,9 @@
   }
 
   .outline-header-name {
-    font-weight: unset;
+    font-weight: bold;
+    font-size: var(--font-size-02);
+    line-height: var(--line-height-02);
   }
 
   .outline-carat-icon {
diff --git a/services/web/frontend/stylesheets/pages/editor/rail.scss b/services/web/frontend/stylesheets/pages/editor/rail.scss
index 2ae5cd2f48..fc4f28d4d2 100644
--- a/services/web/frontend/stylesheets/pages/editor/rail.scss
+++ b/services/web/frontend/stylesheets/pages/editor/rail.scss
@@ -43,8 +43,10 @@ body {
 
 .rail-panel-title {
   font-size: var(--font-size-02);
+  line-height: var(--line-height-02);
   color: var(--ide-rail-color);
   margin-bottom: 0;
+  font-weight: bold;
 }
 
 .ide-rail-tab-button {