fix: Positioning of archived / trashed notices

app/scenes/Document/components/Document.tsx

@@ -36,7 +36,6 @@ import DocumentPublish from "~/scenes/DocumentPublish";
 import Branding from "~/components/Branding";
 import ConnectionStatus from "~/components/ConnectionStatus";
 import ErrorBoundary from "~/components/ErrorBoundary";
-import Flex from "~/components/Flex";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import PageTitle from "~/components/PageTitle";
 import PlaceholderDocument from "~/components/PlaceholderDocument";
@@ -504,9 +503,6 @@ class DocumentScene extends React.Component<Props> {
               onSave={this.onSave}
               headings={this.headings}
             />
-            <Flex justify="center">
-              <Notices document={document} readOnly={readOnly} />
-            </Flex>
             <MeasuredContainer
               as={Main}
               name="document"
@@ -547,6 +543,8 @@ class DocumentScene extends React.Component<Props> {
                       showContents={showContents}
                       tocPosition={tocPos}
                     >
+                      <Notices document={document} readOnly={readOnly} />
+
                       <Editor
                         id={document.id}
                         key={embedsDisabled ? "disabled" : "enabled"}

app/scenes/Document/components/Header.tsx

@@ -245,14 +245,12 @@ function DocumentHeader({
           )
         }
         title={
-          <Flex gap={4}>
+          <Flex gap={4} align="center">
             {document.icon && (
               <Icon value={document.icon} color={document.color ?? undefined} />
             )}
             {document.title}
-            {document.isArchived && (
-              <ArchivedBadge>{t("Archived")}</ArchivedBadge>
-            )}
+            {document.isArchived && <Badge>{t("Archived")}</Badge>}
           </Flex>
         }
         actions={
@@ -387,10 +385,6 @@ const StyledHeader = styled(Header)<{ $hidden: boolean }>`
   ${(props) => props.$hidden && "opacity: 0;"}
 `;
 
-const ArchivedBadge = styled(Badge)`
-  position: absolute;
-`;
-
 const Status = styled(Action)`
   padding-left: 0;
   padding-right: 4px;