fix: Wide selection of comment toolbar fixes (#5160

* fix: Margin on floating toolbar
fix: Flash of toolbar on wide screens

* fix: Nesting of comment marks

* fix: Post button not visible when there is a draft comment, makes it look like the comment is saved
fix: Styling of link editor results now matches other menus
fix: Allow small link editor in comments sidebar

* fix: Cannot use arrow keys to navigate suggested links
Added animation to link suggestions
Added mixin for text ellipsis

* fix: Link input appears non-rounded when no creation option

* Accidental removal

app/scenes/Document/components/CommentForm.tsx

@@ -153,7 +153,8 @@ function CommentForm({
   const handleChange = (
     value: (asString: boolean, trim: boolean) => Record<string, any>
   ) => {
-    setData(value(false, true));
+    const text = value(true, true);
+    setData(text ? value(false, true) : undefined);
     onTyping?.();
   };
 
@@ -251,7 +252,7 @@ function CommentForm({
                 : `${t("Add a reply")}…`)
             }
           />
-          {inputFocused && (
+          {(inputFocused || data) && (
             <Flex justify={dir === "rtl" ? "flex-end" : "flex-start"} gap={8}>
               <ButtonSmall type="submit" borderOnHover>
                 {thread && !thread.isNew ? t("Reply") : t("Post")}

app/scenes/Document/components/CommentThread.tsx

@@ -173,15 +173,7 @@ function CommentThread({
           </Flex>
         ))}
 
-      <ResizingHeightContainer
-        hideOverflow={false}
-        config={{
-          transition: {
-            duration: 0.1,
-            ease: "easeInOut",
-          },
-        }}
-      >
+      <ResizingHeightContainer hideOverflow={false}>
         {(focused || commentsInThread.length === 0) && (
           <Fade timing={100}>
             <CommentForm

app/scenes/Document/components/ReferenceListItem.tsx

@@ -8,7 +8,7 @@ import parseTitle from "@shared/utils/parseTitle";
 import Document from "~/models/Document";
 import Flex from "~/components/Flex";
 import EmojiIcon from "~/components/Icons/EmojiIcon";
-import { hover } from "~/styles";
+import { ellipsis, hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -42,13 +42,11 @@ const Content = styled(Flex)`
 `;
 
 const Title = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
+  ${ellipsis()}
   font-size: 14px;
   font-weight: 500;
   line-height: 1.25;
   padding-top: 3px;
-  white-space: nowrap;
   color: ${(props) => props.theme.text};
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

app/scenes/Document/components/SidebarLayout.tsx

@@ -10,6 +10,7 @@ import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import Tooltip from "~/components/Tooltip";
 import useMobile from "~/hooks/useMobile";
+import { ellipsis } from "~/styles";
 import { fadeIn } from "~/styles/animations";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
@@ -75,15 +76,13 @@ const ForwardIcon = styled(BackIcon)`
 `;
 
 const Title = styled(Flex)`
+  ${ellipsis()}
   font-size: 16px;
   font-weight: 600;
   text-align: center;
   align-items: center;
   justify-content: flex-start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   user-select: none;
-  overflow: hidden;
   width: 0;
   flex-grow: 1;
 `;