fix(source-control): stack Retry below the too-many-changes message (#19037)

src/renderer/src/components/right-sidebar/source-control/listing/too-many-changes-banner.tsx

@@ -68,9 +68,12 @@ export function TooManyChangesBanner({
   }
 
   return (
-    <div className="rounded-md border border-amber-500/25 bg-amber-500/5 px-3 py-2">
-      <div className="flex items-center gap-2">
-        <AlertTriangle className="size-4 shrink-0 text-amber-600 dark:text-amber-400" />
+    <div
+      data-testid="too-many-changes-banner"
+      className="flex flex-col gap-2 rounded-md border border-amber-500/25 bg-amber-500/5 px-3 py-2"
+    >
+      <div className="flex items-start gap-2">
+        <AlertTriangle className="mt-px size-4 shrink-0 text-amber-600 dark:text-amber-400" />
         <span className="min-w-0 flex-1 text-xs text-foreground">
           {translate(
             'auto.components.right.sidebar.SourceControl.tooManyChanges',
@@ -78,18 +81,18 @@ export function TooManyChangesBanner({
             { value0: limit.toLocaleString() }
           )}
         </span>
-        <Button
-          type="button"
-          variant="outline"
-          size="xs"
-          className="w-24 shrink-0 text-xs"
-          disabled={isRetrying}
-          onClick={() => void handleRetry()}
-        >
-          {showSpinner ? <Loader2 className="size-3 animate-spin" /> : null}
-          {translate('auto.components.right.sidebar.SourceControl.286dbda4d6', 'Retry')}
-        </Button>
       </div>
+      <Button
+        type="button"
+        variant="outline"
+        size="xs"
+        className="self-end text-xs"
+        disabled={isRetrying}
+        onClick={() => void handleRetry()}
+      >
+        {showSpinner ? <Loader2 className="size-3 animate-spin" /> : null}
+        {translate('auto.components.right.sidebar.SourceControl.286dbda4d6', 'Retry')}
+      </Button>
     </div>
   )
 }

tests/e2e/source-control-large-file-count.spec.ts

@@ -31,6 +31,7 @@ import {
   removeLargeFileCountUntrackedTree
 } from './large-file-count-fixtures'
 import { DEFAULT_GIT_STATUS_LIMIT } from '../../src/shared/git-status-limit'
+import { RIGHT_SIDEBAR_MIN_WIDTH } from '../../src/renderer/src/components/right-sidebar/right-sidebar-width'
 
 // Matches the large-diff freeze budget: a blocking stall past 1s is the
 // "UI becomes unresponsive" symptom reported in #8013.
@@ -416,12 +417,17 @@ test.describe('Source Control large file count (#8013)', () => {
         rendererWorkingSetMb: { before: workingSetBeforeMb, after: workingSetAfterMb }
       })
 
-      const tooManyChangesBanner = orcaPage.getByText('Too many changes detected.', {
-        exact: false
-      })
+      const tooManyChangesBanner = orcaPage.getByTestId('too-many-changes-banner')
       await expect(tooManyChangesBanner).toBeVisible()
       if (process.env.ORCA_LARGE_FILE_SCREENSHOT_PATH) {
-        await orcaPage.screenshot({ path: process.env.ORCA_LARGE_FILE_SCREENSHOT_PATH })
+        // Narrowest supported sidebar is where the banner layout is worst.
+        await orcaPage.evaluate((minWidth) => {
+          window.__store?.getState().setRightSidebarWidth(minWidth)
+          document.documentElement.classList.add('dark')
+        }, RIGHT_SIDEBAR_MIN_WIDTH)
+        await tooManyChangesBanner.screenshot({
+          path: process.env.ORCA_LARGE_FILE_SCREENSHOT_PATH
+        })
       }
 
       expect(measurement.didHitLimit).toBe(true)
@@ -439,7 +445,7 @@ test.describe('Source Control large file count (#8013)', () => {
       )
       expect(hugeState).not.toBeNull()
 
-      const retryButton = tooManyChangesBanner.locator('..').getByRole('button', { name: 'Retry' })
+      const retryButton = tooManyChangesBanner.getByRole('button', { name: 'Retry' })
       await expect(retryButton).toBeVisible()
       // Keep automatic refreshes from removing Retry before its real request starts.
       await installGitStatusRetryBarrier(electronApp, fixture.repoPath)