fix: Tweaks to share links management

app/components/Table.tsx

@@ -9,6 +9,7 @@ import Button from "~/components/Button";
 import DelayedMount from "~/components/DelayedMount";
 import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
 import PlaceholderText from "~/components/PlaceholderText";
 
 export type Props = {
@@ -243,6 +244,7 @@ const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
   height: 24px;
   user-select: none;
   border-radius: 4px;
+  white-space: nowrap;
   margin: 0 -4px;
   padding: 0 4px;
 
@@ -253,7 +255,7 @@ const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
 `;
 
 const Cell = styled.td`
-  padding: 8px 6px;
+  padding: 10px 6px;
   border-bottom: 1px solid ${(props) => props.theme.divider};
   font-size: 14px;
 
@@ -267,6 +269,13 @@ const Cell = styled.td`
     text-align: right;
     vertical-align: bottom;
   }
+
+  ${NudeButton} {
+    &:hover,
+    &[aria-expanded="true"] {
+      background: ${(props) => props.theme.sidebarControlHoverBackground};
+    }
+  }
 `;
 
 const Row = styled.tr`
@@ -289,7 +298,7 @@ const Head = styled.th`
   text-align: left;
   position: sticky;
   top: 54px;
-  padding: 6px;
+  padding: 6px 6px 0;
   border-bottom: 1px solid ${(props) => props.theme.divider};
   background: ${(props) => props.theme.background};
   transition: ${(props) => props.theme.backgroundTransition};

app/scenes/Settings/Shares.tsx

@@ -58,7 +58,12 @@ function Shares() {
 
   React.useEffect(() => {
     // sort the resulting data by the original order from the server
-    setData(sortBy(shares.orderedData, (item) => shareIds.indexOf(item.id)));
+    setData(
+      sortBy(
+        shares.orderedData.filter((item) => shareIds.includes(item.id)),
+        (item) => shareIds.indexOf(item.id)
+      )
+    );
   }, [shares.orderedData, shareIds]);
 
   return (
@@ -88,8 +93,6 @@ function Shares() {
         </Trans>
       </Text>
 
-      <h2>{t("Shared documents")}</h2>
-
       <SharesTable
         data={data}
         canManage={can.manage}

app/scenes/Settings/components/SharesTable.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
 import Share from "~/models/Share";
+import Flex from "~/components/Flex";
 import TableFromParams from "~/components/TableFromParams";
 import Time from "~/components/Time";
 import ShareMenu from "~/menus/ShareMenu";
@@ -56,7 +57,11 @@ function SharesTable({ canManage, ...rest }: Props) {
           Header: t("Shared nested"),
           accessor: "includeChildDocuments",
           Cell: observer(({ value }: { value: string }) =>
-            value ? <CheckmarkIcon color={theme.primary} /> : null
+            value ? (
+              <Flex align="center">
+                <CheckmarkIcon color={theme.primary} />
+              </Flex>
+            ) : null
           ),
         },
         canManage
@@ -67,7 +72,9 @@ function SharesTable({ canManage, ...rest }: Props) {
               disableSortBy: true,
               Cell: observer(
                 ({ row }: { value: string; row: { original: Share } }) => (
-                  <ShareMenu share={row.original} />
+                  <Flex align="center">
+                    <ShareMenu share={row.original} />
+                  </Flex>
                 )
               ),
             }