2 files changed, 16 insertions, 17 deletions
diff --git a/app/assets/javascripts/snippets/components/show.vue b/app/assets/javascripts/snippets/components/show.vue
index 0779e87e6b6..ae259b10648 100644
--- a/app/assets/javascripts/snippets/components/show.vue
+++ b/app/assets/javascripts/snippets/components/show.vue
@@ -3,6 +3,7 @@ import BlobEmbeddable from '~/blob/components/blob_embeddable.vue';
 import SnippetHeader from './snippet_header.vue';
 import SnippetTitle from './snippet_title.vue';
 import SnippetBlob from './snippet_blob_view.vue';
+import CloneDropdownButton from '~/vue_shared/components/clone_dropdown.vue';
 import { GlLoadingIcon } from '@gitlab/ui';
 
 import { getSnippetMixin } from '../mixins/snippets';
@@ -15,12 +16,16 @@ export default {
     SnippetTitle,
     GlLoadingIcon,
     SnippetBlob,
+    CloneDropdownButton,
   },
   mixins: [getSnippetMixin],
   computed: {
     embeddable() {
       return this.snippet.visibilityLevel === SNIPPET_VISIBILITY_PUBLIC;
     },
+    canBeCloned() {
+      return Boolean(this.snippet.sshUrlToRepo || this.snippet.httpUrlToRepo);
+    },
   },
 };
 </script>
@@ -35,7 +40,16 @@ export default {
     <template v-else>
       <snippet-header :snippet="snippet" />
       <snippet-title :snippet="snippet" />
-      <blob-embeddable v-if="embeddable" class="gl-mb-5" :url="snippet.webUrl" />
+      <div class="gl-display-flex gl-justify-content-end gl-mb-5">
+        <blob-embeddable v-if="embeddable" class="gl-flex-fill-1" :url="snippet.webUrl" />
+        <clone-dropdown-button
+          v-if="canBeCloned"
+          class="gl-ml-3"
+          :ssh-link="snippet.sshUrlToRepo"
+          :http-link="snippet.httpUrlToRepo"
+          data-qa-selector="clone_button"
+        />
+      </div>
       <div v-for="blob in blobs" :key="blob.path">
         <snippet-blob :snippet="snippet" :blob="blob" />
       </div>
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_view.vue b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
index afd038eef58..63c95daae5d 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_view.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_view.vue
@@ -1,7 +1,6 @@
 <script>
 import BlobHeader from '~/blob/components/blob_header.vue';
 import BlobContent from '~/blob/components/blob_content.vue';
-import CloneDropdownButton from '~/vue_shared/components/clone_dropdown.vue';
 
 import GetBlobContent from '../queries/snippet.blob.content.query.graphql';
 
@@ -16,7 +15,6 @@ export default {
   components: {
     BlobHeader,
     BlobContent,
-    CloneDropdownButton,
   },
   apollo: {
     blobContent: {
@@ -66,9 +64,6 @@ export default {
       const { richViewer, simpleViewer } = this.blob;
       return this.activeViewerType === RICH_BLOB_VIEWER ? richViewer : simpleViewer;
     },
-    canBeCloned() {
-      return this.snippet.sshUrlToRepo || this.snippet.httpUrlToRepo;
-    },
     hasRenderError() {
       return Boolean(this.viewer.renderError);
     },
@@ -93,17 +88,7 @@ export default {
       :active-viewer-type="viewer.type"
       :has-render-error="hasRenderError"
       @viewer-changed="switchViewer"
-    >
-      <template #actions>
-        <clone-dropdown-button
-          v-if="canBeCloned"
-          class="gl-mr-3"
-          :ssh-link="snippet.sshUrlToRepo"
-          :http-link="snippet.httpUrlToRepo"
-          data-qa-selector="clone_button"
-        />
-      </template>
-    </blob-header>
+    />
     <blob-content
       :loading="isContentLoading"
       :content="blobContent"