messages: fixes mystery hamburger bouncing

pkg/interface/src/views/landscape/components/ResourceSkeleton.tsx

@@ -122,36 +122,32 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
   );
 
   const ExtraControls = () => {
-    if (workspace === '/messages') {
+    if (workspace === '/messages' && !resource.startsWith('dm-')) {
-      const resourceArr = association.resource.split('/');
+      return (
-      const resourceName = resourceArr[resourceArr.length - 1];
+        <Dropdown
-      if (!resourceName.startsWith('dm-')) {
+          flexShrink={0}
-        return (
+          dropWidth='300px'
-          <Dropdown
+          width='auto'
-            flexShrink={0}
+          alignY='top'
-            dropWidth='300px'
+          alignX='right'
-            width='auto'
+          options={
-            alignY='top'
+            <Col
-            alignX='right'
+              backgroundColor='white'
-            options={
+              border={1}
-              <Col
+              borderRadius={2}
-                backgroundColor='white'
+              borderColor='lightGray'
-                border={1}
+              color='washedGray'
-                borderRadius={2}
+              boxShadow='0px 0px 0px 3px'
-                borderColor='lightGray'
+            >
-                color='washedGray'
+              <MessageInvite association={association} api={api} />
-                boxShadow='0px 0px 0px 3px'
+            </Col>
-              >
+          }
-                <MessageInvite association={association} api={api} />
+        >
-              </Col>
+          <Text bold pr='3' color='blue'>
-            }
+            + Add Ship
-          >
+          </Text>
-            <Text bold pr='3' color='blue'>
+        </Dropdown>
-              + Add Ship
+      );
-            </Text>
-          </Dropdown>
-        );
-      }
     }
     if (canWrite) {
       return (
@@ -173,7 +169,7 @@ export function ResourceSkeleton(props: ResourceSkeletonProps): ReactElement {
 
   const actionsRef = useCallback((actionsRef) => {
     setActionsWidth(actionsRef?.getBoundingClientRect().width);
-  }, []);
+  }, [rid]);
 
   return (
     <Col width='100%' height='100%' overflow='hidden'>