fix: Layout of todo summary in metadata on mobile (#10559)

app/components/DocumentTasks.tsx

@@ -7,6 +7,7 @@ import Document from "~/models/Document";
 import CircularProgressBar from "~/components/CircularProgressBar";
 import usePrevious from "~/hooks/usePrevious";
 import { bounceIn } from "~/styles/animations";
+import Flex from "./Flex";
 
 type Props = {
   document: Document;
@@ -41,7 +42,7 @@ function DocumentTasks({ document }: Props) {
   const message = getMessage(t, total, completed);
 
   return (
-    <>
+    <Flex align="center" style={{ padding: "0 1px" }} gap={2}>
       {completed === total ? (
         <Done
           color={theme.accent}
@@ -51,8 +52,8 @@ function DocumentTasks({ document }: Props) {
       ) : (
         <CircularProgressBar percentage={tasksPercentage} />
       )}
-      &nbsp;{message}
-    </>
+      {message}
+    </Flex>
   );
 }
 

app/scenes/Document/components/DocumentMeta.tsx

@@ -85,6 +85,7 @@ function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
 const CommentLink = styled(Link)`
   display: inline-flex;
   align-items: center;
+  gap: 2px;
 `;
 
 const InsightsButton = styled(NudeButton)`