Make goto button not float right except on very narrow screens

Summary:
A recent-ish change made the goto button float right on narrow screens. But the narrow definition was still kind of wide.

I think we only want the float for extremely narrow screens where we have no better choice.

Reviewed By: nsblake

Differential Revision: D116831120

fbshipit-source-id: 88ccb5dba0f2fc9c551946626f56d738fb90d5d5

Author: evangrayk

addons/isl/src/Commit.tsx

@@ -81,7 +81,7 @@ import platform from './platform';
 import {CommitPreview, dagWithPreviews, uncommittedChangesWithPreviews} from './previews';
 import {RelativeDate, relativeDate} from './relativeDate';
 import {repoRelativeCwd, useIsIrrelevantToCwd} from './repositoryData';
-import {isNarrowCommitTree} from './responsive';
+import {commitTreeWidth} from './responsive';
 import {
   actioningCommit,
   selectedCommitInfos,
@@ -193,7 +193,7 @@ export const Commit = memo(
 
     const inConflicts = useAtomValue(inMergeConflicts);
 
-    const isNarrow = useAtomValue(isNarrowCommitTree);
+    const treeWidth = useAtomValue(commitTreeWidth);
 
     const title = useAtomValue(latestCommitMessageTitle(commit.hash));
 
@@ -769,10 +769,14 @@ export const Commit = memo(
               fullRepoBranch={commit.fullRepoBranch}
             />
             {isPublic ? <CommitDate date={commit.date} /> : null}
-            {isNarrow ? (
+            {treeWidth !== 'wide' ? (
               <>
                 {inlineCommitActions}
-                <div className="commit-narrow-right-actions">{floatingCommitActions}</div>
+                {treeWidth === 'very-narrow' ? (
+                  <div className="commit-narrow-right-actions">{floatingCommitActions}</div>
+                ) : (
+                  floatingCommitActions
+                )}
               </>
             ) : null}
           </DragToRebase>
@@ -786,7 +790,7 @@ export const Commit = memo(
             {inlineProgress && <InlineProgressSpan message={inlineProgress} />}
             {commit.isFollower ? <DiffFollower commit={commit} /> : null}
           </DivIfChildren>
-          {!isNarrow ? commitActions : null}
+          {treeWidth === 'wide' ? commitActions : null}
         </div>
       </div>
     );

addons/isl/src/CommitTreeList.css

@@ -143,10 +143,14 @@
 .commit-tree-narrow .commit-details {
   flex-wrap: wrap;
   margin-right: 0;
-  padding-right: 60px;
+  padding-right: 0;
   z-index: 0;
 }
 
+.commit-tree-very-narrow .commit-details {
+  padding-right: 60px;
+}
+
 .commit-narrow-right-actions {
   display: flex;
   align-items: center;

addons/isl/src/CommitTreeList.tsx

@@ -8,6 +8,7 @@
 import type {RenderGlyphResult} from './RenderDag';
 import type {DagCommitInfo} from './dag/dag';
 import type {ExtendedGraphRow} from './dag/render';
+import type {CommitTreeWidth} from './responsive';
 import type {Hash} from './types';
 
 import {Button} from 'isl-components/Button';
@@ -33,7 +34,7 @@ import {CreateEmptyInitialCommitOperation} from './operations/CreateEmptyInitial
 import {inlineProgressByHash, useRunOperation} from './operationsState';
 import {dagWithPreviews, treeWithPreviews, useMarkOperationsCompleted} from './previews';
 import {hideIrrelevantCwdStacks, isIrrelevantToCwd, repoRelativeCwd} from './repositoryData';
-import {isNarrowCommitTree} from './responsive';
+import {commitTreeWidth} from './responsive';
 import {
   selectedCommits,
   useArrowKeysToChangeSelection,
@@ -49,7 +50,7 @@ import {tracker} from './analytics';
 import {focusMode} from './atoms/FocusModeState';
 
 type DagCommitListProps = {
-  isNarrow: boolean;
+  width: CommitTreeWidth;
 };
 
 const YOU_ARE_HERE_ANCHOR_ID = 'isl-you-are-here-anchor';
@@ -134,7 +135,7 @@ const renderSubsetUnionSelection = atom(get => {
 });
 
 function DagCommitList(props: DagCommitListProps) {
-  const {isNarrow} = props;
+  const {width} = props;
 
   const dag = useAtomValue(dagWithYouAreHere);
   const subset = useAtomValue(renderSubsetUnionSelection);
@@ -171,7 +172,11 @@ function DagCommitList(props: DagCommitListProps) {
     <RenderDag
       dag={dag}
       subset={subset}
-      className={'commit-tree-root ' + (isNarrow ? ' commit-tree-narrow' : '')}
+      className={
+        'commit-tree-root ' +
+        (width !== 'wide' ? ' commit-tree-narrow' : '') +
+        (width === 'very-narrow' ? ' commit-tree-very-narrow' : '')
+      }
       data-testid="commit-tree-root"
       renderCommit={renderCommit}
       renderCommitExtras={renderCommitExtras}
@@ -408,7 +413,7 @@ export function CommitTreeList() {
   useBackspaceToHideSelected();
   useShortcutToRebaseSelected();
 
-  const isNarrow = useAtomValue(isNarrowCommitTree);
+  const treeWidth = useAtomValue(commitTreeWidth);
 
   const {trees} = useAtomValue(treeWithPreviews);
   const fetchError = useAtomValue(commitFetchError);
@@ -430,7 +435,7 @@ export function CommitTreeList() {
     <>
       {fetchError ? <CommitFetchError error={fetchError} /> : null}
       <ScrollToCurrentCommitButton slot="above" />
-      <DagCommitList isNarrow={isNarrow} />
+      <DagCommitList width={treeWidth} />
       <ScrollToCurrentCommitButton slot="below" />
       <MaybeEditStackModal />
     </>

addons/isl/src/__tests__/responsive.test.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {readAtom, writeAtom} from '../jotaiUtils';
+import {
+  commitTreeWidth,
+  mainContentWidthState,
+  NARROW_COMMIT_TREE_WIDTH,
+  NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT,
+  renderCompactAtom,
+  VERY_NARROW_COMMIT_TREE_WIDTH,
+  VERY_NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT,
+} from '../responsive';
+
+describe('commitTreeWidth', () => {
+  beforeEach(() => {
+    writeAtom(renderCompactAtom, false);
+  });
+
+  it.each([
+    [NARROW_COMMIT_TREE_WIDTH, 'wide'],
+    [NARROW_COMMIT_TREE_WIDTH - 1, 'narrow'],
+    [VERY_NARROW_COMMIT_TREE_WIDTH, 'narrow'],
+    [VERY_NARROW_COMMIT_TREE_WIDTH - 1, 'very-narrow'],
+  ] as const)('categorizes a width of %s as %s', (width, expected) => {
+    writeAtom(mainContentWidthState, width);
+    expect(readAtom(commitTreeWidth)).toBe(expected);
+  });
+
+  it.each([
+    [NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT, 'wide'],
+    [NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT - 1, 'narrow'],
+    [VERY_NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT, 'narrow'],
+    [VERY_NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT - 1, 'very-narrow'],
+  ] as const)('uses compact breakpoints to categorize a width of %s as %s', (width, expected) => {
+    writeAtom(renderCompactAtom, true);
+    writeAtom(mainContentWidthState, width);
+    expect(readAtom(commitTreeWidth)).toBe(expected);
+  });
+});

addons/isl/src/responsive.tsx

@@ -61,12 +61,28 @@ export function useMainContentWidth() {
 
 export const NARROW_COMMIT_TREE_WIDTH = 800;
 export const NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT = 300;
+export const VERY_NARROW_COMMIT_TREE_WIDTH = 500;
+export const VERY_NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT = 200;
 
-export const isNarrowCommitTree = atom(
-  get =>
-    get(mainContentWidthState) <
-    (get(renderCompactAtom) ? NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT : NARROW_COMMIT_TREE_WIDTH),
-);
+export type CommitTreeWidth = 'wide' | 'narrow' | 'very-narrow';
+
+/**
+ * Categorizes the available commit-tree width so layout consumers can coordinate their behavior
+ * without independently combining overlapping breakpoint atoms.
+ */
+export const commitTreeWidth = atom<CommitTreeWidth>(get => {
+  const width = get(mainContentWidthState);
+  const compact = get(renderCompactAtom);
+  const veryNarrowWidth = compact
+    ? VERY_NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT
+    : VERY_NARROW_COMMIT_TREE_WIDTH;
+  if (width < veryNarrowWidth) {
+    return 'very-narrow';
+  }
+
+  const narrowWidth = compact ? NARROW_COMMIT_TREE_WIDTH_WHEN_COMPACT : NARROW_COMMIT_TREE_WIDTH;
+  return width < narrowWidth ? 'narrow' : 'wide';
+});
 
 /**
  * Tracks the window/viewport width. Unlike mainContentWidthState, this is