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/components/Breadcrumb.tsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import styled from "styled-components";
 import Flex from "~/components/Flex";
 import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
+import { ellipsis } from "~/styles";
 import { MenuInternalLink } from "~/types";
 
 type Props = {
@@ -64,6 +65,7 @@ const Slash = styled(GoToIcon)`
 `;
 
 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
+  ${ellipsis()}
   display: flex;
   flex-shrink: 1;
   min-width: 0;
@@ -71,9 +73,6 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   color: ${(props) => props.theme.text};
   font-size: 15px;
   height: 24px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
   font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
   margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
 

app/components/CommandBarItem.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
+import { ellipsis } from "~/styles";
 
 type Props = {
   action: ActionImpl;
@@ -85,8 +86,7 @@ const Ancestor = styled.span`
 `;
 
 const Content = styled(Flex)`
-  overflow: hidden;
-  text-overflow: ellipsis;
+  ${ellipsis()}
   flex-shrink: 1;
 `;
 
@@ -102,9 +102,7 @@ const Item = styled.div<{ active?: boolean }>`
   justify-content: space-between;
   cursor: var(--pointer);
 
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  ${ellipsis()}
   user-select: none;
   min-width: 0;
 

app/components/DocumentCard.tsx

@@ -13,6 +13,7 @@ import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
+import { ellipsis } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
 import EmojiIcon from "./Icons/EmojiIcon";
 import Squircle from "./Squircle";
@@ -217,14 +218,12 @@ const Content = styled(Flex)`
 `;
 
 const DocumentMeta = styled(Text)`
+  ${ellipsis()}
   display: flex;
   align-items: center;
   gap: 2px;
   color: ${(props) => props.theme.textTertiary};
   margin: 0 0 0 -2px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
 `;
 
 const DocumentLink = styled(Link)<{

app/components/DocumentExplorerNode.tsx

@@ -6,6 +6,7 @@ import breakpoint from "styled-components-breakpoint";
 import Flex from "~/components/Flex";
 import Disclosure from "~/components/Sidebar/components/Disclosure";
 import Text from "~/components/Text";
+import { ellipsis } from "~/styles";
 
 type Props = {
   selected: boolean;
@@ -70,9 +71,7 @@ function DocumentExplorerNode(
 }
 
 const Title = styled(Text)`
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  ${ellipsis()}
   margin: 0 4px 0 4px;
   color: inherit;
 `;

app/components/DocumentExplorerSearchResult.tsx

@@ -6,6 +6,7 @@ import styled from "styled-components";
 import { Node as SearchResult } from "~/components/DocumentExplorerNode";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
+import { ellipsis } from "~/styles";
 
 type Props = {
   selected: boolean;
@@ -73,10 +74,8 @@ const Title = styled(Text)`
 `;
 
 const Path = styled(Text)<{ $selected: boolean }>`
+  ${ellipsis()}
   padding-top: 2px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   margin: 0 4px 0 8px;
   color: ${(props) =>
     props.$selected ? props.theme.white50 : props.theme.textTertiary};

app/components/DocumentMeta.tsx

@@ -11,6 +11,7 @@ import Flex from "~/components/Flex";
 import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
+import { ellipsis } from "~/styles";
 
 type Props = {
   showCollection?: boolean;
@@ -192,8 +193,7 @@ const Container = styled(Flex)<{ rtl?: boolean }>`
 `;
 
 const Viewed = styled.span`
-  text-overflow: ellipsis;
-  overflow: hidden;
+  ${ellipsis()}
 `;
 
 const Modified = styled.span<{ highlight?: boolean }>`

app/components/Input.tsx

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
-import { undraggableOnDesktop } from "~/styles";
+import { ellipsis, undraggableOnDesktop } from "~/styles";
 
 const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
   border: 0;
@@ -29,9 +29,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   color: ${(props) => props.theme.text};
   height: 30px;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${ellipsis()}
   ${undraggableOnDesktop()}
 
   &:disabled,

app/components/List/Item.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import styled, { useTheme } from "styled-components";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
+import { ellipsis } from "~/styles";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   image?: React.ReactNode;
@@ -103,9 +104,7 @@ const Image = styled(Flex)`
 const Heading = styled.p<{ $small?: boolean }>`
   font-size: ${(props) => (props.$small ? 14 : 16)}px;
   font-weight: 500;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  ${ellipsis()}
   line-height: ${(props) => (props.$small ? 1.3 : 1.2)};
   margin: 0;
 `;

app/components/ResizingHeightContainer.tsx

@@ -19,7 +19,17 @@ type Props = {
  * Automatically animates the height of a container based on it's contents.
  */
 export function ResizingHeightContainer(props: Props) {
-  const { hideOverflow, children, config, style } = props;
+  const {
+    hideOverflow,
+    children,
+    config = {
+      transition: {
+        duration: 0.1,
+        ease: "easeInOut",
+      },
+    },
+    style,
+  } = props;
 
   const ref = React.useRef<HTMLDivElement>(null);
   const { height } = useComponentSize(ref);

app/components/SearchListItem.tsx

@@ -6,7 +6,7 @@ import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Document from "~/models/Document";
 import Highlight, { Mark } from "~/components/Highlight";
-import { hover } from "~/styles";
+import { ellipsis, hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -125,8 +125,7 @@ const Heading = styled.h4<{ rtl?: boolean }>`
 
 const Title = styled(Highlight)`
   max-width: 90%;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  ${ellipsis()}
 
   ${Mark} {
     padding: 0;
@@ -139,10 +138,7 @@ const ResultContext = styled(Highlight)`
   font-size: 14px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${ellipsis()}
 
   ${Mark} {
     padding: 0;