fix: Currently viewing users should be ordered to top

app/components/DocumentViews.js

@@ -35,8 +35,9 @@ function DocumentViews({ document, isOpen }: Props) {
 
   // ensure currently present via websocket are always ordered first
   const documentViews = views.inDocument(document.id);
-  const sortedViews = sortBy(documentViews, (view) =>
-    presentIds.includes(view.user.id)
+  const sortedViews = sortBy(
+    documentViews,
+    (view) => !presentIds.includes(view.user.id)
   );
 
   const users = React.useMemo(() => sortedViews.map((v) => v.user), [
@@ -70,6 +71,7 @@ function DocumentViews({ document, isOpen }: Props) {
                 subtitle={subtitle}
                 image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
                 border={false}
+                small
               />
             );
           }}

app/components/List/Item.js

@@ -9,17 +9,25 @@ type Props = {
   subtitle?: React.Node,
   actions?: React.Node,
   border?: boolean,
+  small?: boolean,
 };
 
-const ListItem = ({ image, title, subtitle, actions, border }: Props) => {
+const ListItem = ({
+  image,
+  title,
+  subtitle,
+  actions,
+  small,
+  border,
+}: Props) => {
   const compact = !subtitle;
 
   return (
     <Wrapper compact={compact} $border={border}>
       {image && <Image>{image}</Image>}
       <Content align={compact ? "center" : undefined} column={!compact}>
-        <Heading>{title}</Heading>
-        {subtitle && <Subtitle>{subtitle}</Subtitle>}
+        <Heading $small={small}>{title}</Heading>
+        {subtitle && <Subtitle $small={small}>{subtitle}</Subtitle>}
       </Content>
       {actions && <Actions>{actions}</Actions>}
     </Wrapper>
@@ -28,8 +36,8 @@ const ListItem = ({ image, title, subtitle, actions, border }: Props) => {
 
 const Wrapper = styled.li`
   display: flex;
-  padding: 8px 0;
-  margin: 0;
+  padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
+  margin: ${(props) => (props.$border === false ? "8px 0" : 0)};
   border-bottom: 1px solid
     ${(props) =>
       props.$border === false ? "transparent" : props.theme.divider};
@@ -49,9 +57,12 @@ const Image = styled(Flex)`
 `;
 
 const Heading = styled.p`
-  font-size: 16px;
+  font-size: ${(props) => (props.$small ? 15 : 16)}px;
   font-weight: 500;
-  line-height: 1.1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: 1.2;
   margin: 0;
 `;
 
@@ -61,7 +72,7 @@ const Content = styled(Flex)`
 
 const Subtitle = styled.p`
   margin: 0;
-  font-size: 14px;
+  font-size: ${(props) => (props.$small ? 13 : 14)}px;
   color: ${(props) => props.theme.textTertiary};
   margin-top: -2px;
 `;