fix: status banner bug in StudioHeader (#703)

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.

Author: robrap

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>
+    </>
   );
 };