Merge branch 'snippests-update-layout' into 'master'

Update snippet page layout

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/137859



Merged-by: Sascha Eggenberger <seggenberger@gitlab.com>
Approved-by: Ammar Alakkad <aalakkad@gitlab.com>
Approved-by: Julia Miocene <jmiocene@gitlab.com>
Approved-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Reviewed-by: Ammar Alakkad <aalakkad@gitlab.com>

app/assets/javascripts/snippets/components/snippet_title.vue

@@ -28,7 +28,7 @@ export default {
 };
 </script>
 <template>
-  <div class="snippet-header limited-header-width">
+  <div class="snippet-header limited-header-width gl-py-3">
     <div class="gl-display-flex">
       <span
         v-if="snippet.hidden"
@@ -42,14 +42,17 @@ export default {
         />
       </span>
 
-      <h2 class="snippet-title gl-mt-0 mb-3" data-testid="snippet-title-content">
+      <h2 class="snippet-title gl-mt-0 gl-mb-5" data-testid="snippet-title-content">
         {{ snippet.title }}
       </h2>
     </div>
 
     <snippet-description v-if="snippet.description" :description="snippet.descriptionHtml" />
 
-    <small v-if="snippet.updatedAt !== snippet.createdAt" class="edited-text">
+    <small
+      v-if="snippet.updatedAt !== snippet.createdAt"
+      class="edited-text gl-text-secondary gl-display-inline-block gl-mt-4"
+    >
       <gl-sprintf :message="__('Edited %{timeago}')">
         <template #timeago>
           <time-ago-tooltip :time="snippet.updatedAt" tooltip-placement="bottom" />

app/assets/stylesheets/framework/snippets.scss

@@ -29,17 +29,8 @@
   }
 }
 
-.snippet-header {
-  padding: $gl-padding 0;
-}
-
 .snippet-title {
   color: $gl-text-color;
   font-size: 2em;
   font-weight: $gl-font-weight-bold;
-  min-height: $header-height;
-}
-
-.snippet-scope-menu .btn-success {
-  margin-top: 15px;
 }

app/views/projects/snippets/show.html.haml

-- @content_class = "limit-container-width limited-inner-width-container" unless fluid_layout
 - add_to_breadcrumbs _("Snippets"), project_snippets_path(@project)
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")