collections: fix safari layout

pkg/interface/src/views/apps/links/LinkResource.tsx

@@ -9,7 +9,7 @@ import { useQuery } from '~/logic/lib/useQuery';
 import useGraphState from '~/logic/state/graph';
 import useMetadataState from '~/logic/state/metadata';
 import { StoreState } from '~/logic/store/type';
-import {Titlebar} from '~/views/components/Titlebar';
+import { Titlebar } from '~/views/components/Titlebar';
 import useGroupState from '../../../logic/state/group';
 import { LinkBlocks } from './components/LinkBlocks';
 import { LinkDetail } from './components/LinkDetail';
@@ -47,6 +47,7 @@ export function LinkResource(props: LinkResourceProps) {
   const graphTimesentMap = useGraphState(state => state.graphTimesentMap);
   const { query } = useQuery();
   const isGrid = query.has('grid');
+  const { pathname, search } = useLocation();
 
   useEffect(() => {
     api.graph.getGraph(ship, name);
@@ -57,7 +58,6 @@ export function LinkResource(props: LinkResourceProps) {
     return <Center width='100%' height='100%'><LoadingSpinner /></Center>;
   }
   const { title, description } = resource.metadata;
-  const { pathname, search } = useLocation();
 
   const titlebar = (back?: string) => (
     <Titlebar back={back && `${back}${search}`} title={title} description={description} workspace={baseUrl} baseUrl={resourceUrl} >
@@ -70,71 +70,69 @@ export function LinkResource(props: LinkResourceProps) {
   );
 
   return (
-    <Col alignItems="center" height="100%" width="100%" overflowY="hidden">
-      <Switch>
-        <Route
-          exact
-          path={relativePath('')}
-          render={(props) => {
+    <Switch>
+      <Route
+        exact
+        path={relativePath('')}
+        render={(props) => {
+          return (
+            <Col minWidth="0" height="100%">
+              {titlebar()}
+              { isGrid ? (
+                <LinkBlocks graph={graph} association={resource} api={api} />
+                ) : /* @ts-ignore withState typings */ (
+                  <LinkWindow
+                    key={rid}
+                    association={resource}
+                    resource={resourcePath}
+                    graph={graph}
+                    baseUrl={resourceUrl}
+                    group={group as Group}
+                    path={resource.group}
+                    pendingSize={Object.keys(graphTimesentMap[resourcePath] || {}).length}
+                    api={api}
+                    mb={3}
+                  />
+                )}
+          </Col>
+          );
+        }}
+      />
+      <Route
+        path={relativePath('/index/:index')}
+        render={(props) => {
+          const index = bigInt(props.match.params.index);
+
+          if (!index) {
+            return <div>Malformed URL</div>;
+          }
+
+          const node = graph ? graph.get(index) : null;
+
+          if (!node) {
+            return <Box>Not found</Box>;
+          }
+
+          if (typeof node.post === 'string') {
             return (
-              <Col height="100%" width="100%">
-                {titlebar()}
-                { isGrid ? (
-                  <LinkBlocks graph={graph} association={resource} api={api} />
-                  ) : /* @ts-ignore withState typings */ (
-                    <LinkWindow
-                      key={rid}
-                      association={resource}
-                      resource={resourcePath}
-                      graph={graph}
-                      baseUrl={resourceUrl}
-                      group={group as Group}
-                      path={resource.group}
-                      pendingSize={Object.keys(graphTimesentMap[resourcePath] || {}).length}
-                      api={api}
-                      mb={3}
-                    />
-                  )}
-            </Col>
-            );
-          }}
-        />
-        <Route
-          path={relativePath('/index/:index')}
-          render={(props) => {
-            const index = bigInt(props.match.params.index);
-
-            if (!index) {
-              return <div>Malformed URL</div>;
-            }
-
-            const node = graph ? graph.get(index) : null;
-
-            if (!node) {
-              return <Box>Not found</Box>;
-            }
-
-            if (typeof node.post === 'string') {
-              return (
-                <Col width="100%" textAlign="center" pt="2">
-                  <Text gray>This link has been deleted.</Text>
-                </Col>
-              );
-            }
-            return (
-              <Col height="100%" width="100%">
-                {titlebar(relativePath(''))}
-                <LinkDetail
-                  node={node}
-                  association={association}
-                  api={api}
-                  baseUrl={pathname}
-                />
+              <Col width="100%" textAlign="center" pt="2">
+                <Text gray>This link has been deleted.</Text>
               </Col>
             );
-          }}
-        />
-      </Switch>
-    </Col>
+          }
+          return (
+            <Col height="100%" width="100%">
+              {titlebar(relativePath(''))}
+              <LinkDetail
+                node={node}
+                association={association}
+                api={api}
+                baseUrl={pathname}
+              />
+            </Col>
+          );
+        }}
+      />
+    </Switch>
   );
 }

pkg/interface/src/views/apps/links/components/LinkBlocks.tsx

@@ -19,11 +19,15 @@ export function LinkBlocks(props: LinkBlocksProps) {
   const linkSizePx = `${linkSize}px`;
 
   const isMobile = useLocalState(s => s.mobile);
-  const colCount = useMemo(() => isMobile ? 2 : 5, [isMobile]);
+  const colCount = useMemo(() => (isMobile ? 2 : 5), [isMobile]);
   const bind = useResize<HTMLDivElement>(
-    useCallback((entry) => {
-      setLinkSize((entry.borderBoxSize[0].inlineSize - 16) / colCount - 8);
-    }, [colCount])
+    useCallback(
+      (entry) => {
+        const { width } = entry.target.getBoundingClientRect();
+        setLinkSize((width - 8) / colCount - 8);
+      },
+      [colCount]
+    )
   );
 
   const nodes = [null, ...Array.from(props.graph)];
@@ -31,9 +35,17 @@ export function LinkBlocks(props: LinkBlocksProps) {
   const chunks = _.chunk(nodes, colCount);
 
   return (
-    <Col overflowY="auto" width="100%" height="100%" {...bind}>
+    <Col overflowX="hidden" overflowY="auto" height="100%" {...bind}>
       {chunks.map((chunk, idx) => (
-        <Row key={idx} my="2" px="2" gapX="2" height={linkSizePx}>
+        <Row
+          key={idx}
+          flexShrink={0}
+          my="2"
+          px="2"
+          gapX="2"
+          width="100%"
+          height={linkSizePx}
+        >
           {chunk.map((block) => {
             if (!block) {
               return (

pkg/interface/src/views/apps/links/components/LinkItem.tsx

@@ -102,7 +102,7 @@ export const LinkItem = React.forwardRef((props: LinkItemProps, ref: RefObject<H
   const unreads = useHarkState(state => state.unreads);
   const commColor = (unreads.graph?.[appPath]?.[`/${index}`]?.unreads ?? 0) > 0 ? 'blue' : 'gray';
   // @ts-ignore hark will have to choose between sets and numbers
-  const isUnread = unreads.graph?.[appPath]?.['/']?.unreads?.has(node.post.index);
+  const isUnread = unreads.graph?.[appPath]?.['/']?.unreads?.has?.(node.post.index);
 
   return (
     <Box

pkg/interface/src/views/components/Titlebar.tsx

@@ -27,7 +27,7 @@ export function Titlebar(props: TitlebarProps) {
   const [actionsWidth, setActionsWidth] = useState(0);
   const bind = useResize<HTMLDivElement>(
     useCallback((entry) => {
-      setActionsWidth(entry.borderBoxSize[0].inlineSize);
+      setActionsWidth(entry.target.getBoundingClientRect().width);
     }, [])
   );
   const menuControl = (