From 62b0c89dbb077d2a830a583cc63486b67e2ad831 Mon Sep 17 00:00:00 2001
From: Michael Bahr <1830132+bahrmichael@users.noreply.github.com>
Date: Tue, 9 Jul 2024 17:02:25 +0200
Subject: [PATCH] fix: better alignemnt of github credentials and check success
 notice (#63717)

Closes SRCH-701

Ideally we would use a DismissibleAlert one level up the React component
chain, but that's turning out too tricky for the time we have left:
https://sourcegraph.slack.com/archives/C07A21XEP0T/p1720486350310899

## Test plan

Manual testing

## Changelog

<!-- OPTIONAL; info at
https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c
-->
---
 .../batches/settings/CodeHostConnectionNode.tsx    |  2 +-
 .../batches/settings/GitHubAppControls.tsx         | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx b/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx
index 4d88ec86b92..d11cda34b2d 100644
--- a/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx
+++ b/client/web/src/enterprise/batches/settings/CodeHostConnectionNode.tsx
@@ -146,7 +146,7 @@ export const CodeHostConnectionNode: React.FunctionComponent<React.PropsWithChil
                             </Badge>
                         )}
                     </H3>
-                    <div className="mb-0 d-flex justify-content-end flex-grow-1 align-items-baseline">
+                    <div className="mb-0 d-flex justify-content-end flex-grow-1 align-items-baseline flex-wrap">
                         {isEnabled ? (
                             gitHubApp ? (
                                 <GitHubAppControls
diff --git a/client/web/src/enterprise/batches/settings/GitHubAppControls.tsx b/client/web/src/enterprise/batches/settings/GitHubAppControls.tsx
index aa942d65152..4df9aa4a733 100644
--- a/client/web/src/enterprise/batches/settings/GitHubAppControls.tsx
+++ b/client/web/src/enterprise/batches/settings/GitHubAppControls.tsx
@@ -66,7 +66,7 @@ export const GitHubAppControls: React.FunctionComponent<GitHubAppControlsProps>
     >(CHECK_BATCH_CHANGES_CREDENTIAL, {})
 
     return config ? (
-        <>
+        <div>
             {removeModalOpen && (
                 <RemoveGitHubAppModal onCancel={() => setRemoveModalOpen(false)} afterDelete={refetch} app={config} />
             )}
@@ -140,11 +140,15 @@ export const GitHubAppControls: React.FunctionComponent<GitHubAppControlsProps>
                 </NodeAlert>
             )}
             {!checkCredLoading && (checkCredResult || checkCredErr) && (
-                <NodeAlert variant={checkCredErr ? 'danger' : 'success'}>
-                    <span className="font-weight-bold">"{config.name}"</span> is {checkCredErr ? 'not' : ''} accessible.
-                </NodeAlert>
+                <>
+                    <br />
+                    <NodeAlert variant={checkCredErr ? 'danger' : 'success'}>
+                        <span className="font-weight-bold">{config.name}</span> is {checkCredErr ? 'not' : ''}{' '}
+                        accessible.
+                    </NodeAlert>
+                </>
             )}
-        </>
+        </div>
     ) : (
         <ButtonLink to={createURL} className="ml-auto text-nowrap" variant="success" as={Link} size="sm">
             Create GitHub App