ref(ui): Consistent spacing on release commits page (#67525)

We usually use space(2) between panels and actions.

Also removes the margin from the element itself and adds a Actions
container. Containers are usually the things we want margin on.

Before

<img alt="clipboard.png" width="328"
src="https://i.imgur.com/JLXkSZL.png" />

After

<img alt="clipboard.png" width="404"
src="https://i.imgur.com/VXEk4QW.png" />

static/app/views/releases/detail/commitsAndFiles/commits.tsx

@@ -1,5 +1,6 @@
 import {Fragment} from 'react';
 import type {RouteComponentProps} from 'react-router';
+import styled from '@emotion/styled';
 import type {Location} from 'history';
 
 import {CommitRow} from 'sentry/components/commitRow';
@@ -12,6 +13,7 @@ import PanelBody from 'sentry/components/panels/panelBody';
 import PanelHeader from 'sentry/components/panels/panelHeader';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
 import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
 import type {Commit, Project, Repository} from 'sentry/types';
 import {formatVersion} from 'sentry/utils/formatters';
 import {useApiQuery} from 'sentry/utils/queryClient';
@@ -75,10 +77,12 @@ function Commits({activeReleaseRepo, releaseRepos, projectSlug}: CommitsProps) {
           )}
         />
         {releaseRepos.length > 1 && (
-          <RepositorySwitcher
-            repositories={releaseRepos}
-            activeRepository={activeReleaseRepo}
-          />
+          <Actions>
+            <RepositorySwitcher
+              repositories={releaseRepos}
+              activeRepository={activeReleaseRepo}
+            />
+          </Actions>
         )}
         {commitListError && <LoadingError onRetry={refetch} />}
         {isLoadingCommitList ? (
@@ -110,4 +114,8 @@ function Commits({activeReleaseRepo, releaseRepos, projectSlug}: CommitsProps) {
   );
 }
 
+const Actions = styled('div')`
+  margin-bottom: ${space(2)};
+`;
+
 export default withReleaseRepos(Commits);

static/app/views/releases/detail/commitsAndFiles/repositorySwitcher.tsx

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 
 import {CompactSelect} from 'sentry/components/compactSelect';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import type {Repository} from 'sentry/types';
 import {useLocation} from 'sentry/utils/useLocation';
 import useRouter from 'sentry/utils/useRouter';
@@ -26,7 +25,7 @@ function RepositorySwitcher({repositories, activeRepository}: RepositorySwitcher
   const activeRepo = activeRepository?.name;
 
   return (
-    <StyledCompactSelect
+    <CompactSelect
       triggerLabel={activeRepo}
       triggerProps={{prefix: t('Filter')}}
       value={activeRepo}
@@ -42,10 +41,6 @@ function RepositorySwitcher({repositories, activeRepository}: RepositorySwitcher
 
 export default RepositorySwitcher;
 
-const StyledCompactSelect = styled(CompactSelect)`
-  margin-bottom: ${space(1)};
-`;
-
 const RepoLabel = styled('div')`
   ${p => p.theme.overflowEllipsis}
 `;