fix: Remove absolute positiioning of insights management, closes #5599

app/scenes/Document/components/Insights.tsx

@@ -46,7 +46,13 @@ function Insights() {
   return (
     <Sidebar title={t("Insights")} onClose={onCloseInsights}>
       {document ? (
-        <>
+        <Flex
+          column
+          shrink={false}
+          style={{ minHeight: "100%" }}
+          justify="space-between"
+        >
+          <div>
             <Content column>
               <Heading>{t("Stats")}</Heading>
               <Text type="secondary" size="small">
@@ -58,7 +64,9 @@ function Insights() {
                       })}
                     </li>
                   )}
-                <li>{t(`{{ count }} words`, { count: stats.total.words })}</li>
+                  <li>
+                    {t(`{{ count }} words`, { count: stats.total.words })}
+                  </li>
                   <li>
                     {t(`{{ count }} characters`, {
                       count: stats.total.characters,
@@ -145,6 +153,7 @@ function Insights() {
                 </Content>
               </>
             )}
+          </div>
           {can.updateInsights && (
             <Manage>
               <Flex column>
@@ -167,7 +176,7 @@ function Insights() {
               />
             </Manage>
           )}
-        </>
+        </Flex>
       ) : null}
     </Sidebar>
   );
@@ -200,14 +209,13 @@ function countWords(text: string): number {
 }
 
 const Manage = styled(Flex)`
+  background: ${s("background")};
   border: 1px solid ${s("inputBorder")};
   border-bottom-width: 2px;
   border-radius: 8px;
   margin: 16px;
   padding: 16px 16px 0;
-
-  position: absolute;
-  bottom: 0;
+  justify-self: flex-end;
 `;
 
 const ListSpacing = styled("div")`