From ba3315d13a247e6dc1fa4b23de7e23e94af72231 Mon Sep 17 00:00:00 2001
From: Robert Raposa <rraposa@edx.org>
Date: Fri, 29 May 2026 11:13:43 -0400
Subject: [PATCH] fix: status banner bug in StudioHeader

The status banner was a part of the
studio-header, rather than above it,
which caused some style issues. The
implementation now matches that of Header.
---
 src/studio-header/StudioHeader.jsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/studio-header/StudioHeader.jsx b/src/studio-header/StudioHeader.jsx
index c5ad4834..eadcd263 100644
--- a/src/studio-header/StudioHeader.jsx
+++ b/src/studio-header/StudioHeader.jsx
@@ -42,16 +42,18 @@ const StudioHeader = ({
   const statusAlertMessage = config.STATUS_ALERT_MESSAGE;
 
   return (
-    <div className="studio-header">
+    <>
       {showStatusAlert && <StatusAlert message={statusAlertMessage} />}
-      <a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
-      <Responsive maxWidth={841}>
-        <MobileHeader {...props} />
-      </Responsive>
-      <Responsive minWidth={842}>
-        <HeaderBody {...props} />
-      </Responsive>
-    </div>
+      <div className="studio-header">
+        <a className="nav-skip sr-only sr-only-focusable" href="#main">Skip to content</a>
+        <Responsive maxWidth={841}>
+          <MobileHeader {...props} />
+        </Responsive>
+        <Responsive minWidth={842}>
+          <HeaderBody {...props} />
+        </Responsive>
+      </div>
+    </>
   );
 };