[ui] Fix CodeLocationSource in flex container (#24422)

## Summary & Motivation

The CodeLocationSource button is stretching when rendered in a flex
container. Wrap it in a div.

Created a storybook example to demo the different possibilities of the
component.

<img width="209" alt="Screenshot 2024-09-11 at 16 44 00"
src="https://github.com/user-attachments/assets/6f736caf-915b-4993-b7f1-1f6ab74475c8">

## How I Tested These Changes

Storybook

## Changelog

- [ ] `BUGFIX` [ui] Fixed broken code location URL button rendering.

js_modules/dagster-ui/packages/ui-core/src/workspace/CodeLocationSource.tsx

@@ -28,13 +28,15 @@ export const CodeLocationSource = ({metadata}: {metadata: Metadata[]}) => {
   const {type, url} = urlValue;
 
   return (
-    <ExternalAnchorButton
-      href={url.toString()}
-      icon={<Icon name={type === 'github-url' ? 'github' : 'gitlab'} />}
-      rightIcon={<Icon name="open_in_new" />}
-    >
-      View repo
-    </ExternalAnchorButton>
+    <div>
+      <ExternalAnchorButton
+        href={url.toString()}
+        icon={<Icon name={type === 'github-url' ? 'github' : 'gitlab'} />}
+        rightIcon={<Icon name="open_in_new" />}
+      >
+        View repo
+      </ExternalAnchorButton>
+    </div>
   );
 };
 

js_modules/dagster-ui/packages/ui-core/src/workspace/__stories__/CodeLocationSource.stories.tsx

@@ -0,0 +1,24 @@
+import {Box} from '@dagster-io/ui-components';
+import {Meta} from '@storybook/react';
+
+import {CodeLocationSource} from '../CodeLocationSource';
+
+// eslint-disable-next-line import/no-default-export
+export default {
+  title: 'CodeLocationSource',
+  component: CodeLocationSource,
+} as Meta;
+
+export const Default = () => {
+  return (
+    <Box flex={{direction: 'column', gap: 20}}>
+      <CodeLocationSource metadata={[]} />
+      <CodeLocationSource metadata={[{key: 'url', value: 'not-a-url'}]} />
+      <CodeLocationSource
+        metadata={[{key: 'url', value: 'https://github.com/dagster-io/dagster'}]}
+      />
+      <CodeLocationSource metadata={[{key: 'url', value: 'https://gitlab.com/foo-bar'}]} />
+      <CodeLocationSource metadata={[{key: 'url', value: 'https://zombo.com'}]} />
+    </Box>
+  );
+};