Add some button alignment fixes to the sidebar

app/assets/javascripts/projects/details/upload_button.vue

@@ -36,7 +36,10 @@ export default {
   <span>
     <gl-button
       v-gl-modal="$options.uploadBlobModalId"
+      variant="link"
       icon="upload"
+      class="stat-link gl-px-0!"
+      button-text-classes="gl-ml-2"
       data-testid="upload-file-button"
       >{{ __('Upload File') }}</gl-button
     >

app/assets/stylesheets/page_bundles/project.scss

@@ -181,11 +181,11 @@
 
 // FF :project_overview_reorg enabled
 .project-page-indicator:not(.hidden) + .project-page-layout {
-  $sidebar-width: 290px;
+  --project-overview-sidebar-width: 290px;
 
   @include media-breakpoint-up(lg) {
     display: grid;
-    grid-template-columns: auto $sidebar-width;
+    grid-template-columns: auto var(--project-overview-sidebar-width);
     gap: 2rem;
 
     .project-page-layout-content,
@@ -194,7 +194,9 @@
     }
 
     .project-page-layout-sidebar {
+      order: 2;
       overflow-x: clip;
+      margin-right: -$gl-padding-8;
     }
 
     .project-page-sidebar {
@@ -204,12 +206,17 @@
       height: calc(
         #{$calc-application-viewport-height} - #{$gl-spacing-scale-4}
       );
+      padding-inline: $gl-padding-4;
       overflow-y: scroll;
       overflow-x: hidden;
       -webkit-overflow-scrolling: touch;
 
       .project-page-sidebar-block {
-        width: $sidebar-width - 1px;
+        width: calc(var(--project-overview-sidebar-width) - 1px);
+
+        &:first-of-type {
+          padding-top: $gl-spacing-scale-1;
+        }
       }
 
       .nav {

app/views/projects/_sidebar.html.haml

@@ -3,10 +3,10 @@
 
 %aside.project-page-sidebar
   - if @project.description.present? || @project.badges.present?
-    .project-page-sidebar-block.home-panel-home-desc.gl-pt-1.gl-pb-4.gl-border-b.gl-border-gray-50
+    .project-page-sidebar-block.home-panel-home-desc.gl-py-4.gl-border-b.gl-border-gray-50
       -# Project description
       - if @project.description.present?
-        .gl-display-flex.gl-justify-content-space-between.gl-mt-n1.gl-pr-2
+        .gl-display-flex.gl-justify-content-space-between.gl-mt-1.gl-pr-2
           %p.gl-font-weight-bold.gl-text-gray-900.gl-m-0= s_('ProjectPage|Project information')
           = render Pajamas::ButtonComponent.new(href: edit_project_path(@project),
             category: :tertiary,
@@ -24,12 +24,12 @@
 
       -# Programming languages
       - if can?(current_user, :read_code, @project) && @project.repository_languages.present?
-        .gl-mb-4
+        .gl-mb-2{ class: ('gl-mb-4!' if @project.badges.present?) }
           = repository_languages_bar(@project.repository_languages)
 
       -# Badges
       - if @project.badges.present?
-        .project-badges.mb-2{ data: { testid: 'project-badges-content' } }
+        .project-badges.gl-mb-2{ data: { testid: 'project-badges-content' } }
           - @project.badges.each do |badge|
             - badge_link_url = badge.rendered_link_url(@project)
             %a.gl-mr-3{ href: badge_link_url,

app/views/projects/_stat_anchor_list.html.haml

@@ -7,4 +7,4 @@
   - anchors.each do |anchor|
     %li.nav-item
       = link_to_if(anchor.link, anchor.label, anchor.link, stat_anchor_attrs(anchor)) do
-        .stat-text.d-flex.align-items-center{ class: ('btn gl-button btn-default disabled' if project_buttons) }= anchor.label
+        .stat-text.d-flex.align-items-center{ class: ('btn gl-button btn-default gl-px-0! disabled' if project_buttons) }= anchor.label

app/views/projects/show.html.haml

@@ -19,6 +19,9 @@
   .project-page-indicator.js-show-on-project-root
 
   .project-page-layout
+    .project-page-layout-sidebar.js-show-on-project-root.gl-mt-5
+      = render "sidebar"
+
     .project-page-layout-content.gl-mt-5
       - if can?(current_user, :read_code, @project) && @project.repository_languages.present?
         - add_page_startup_graphql_call('repository/path_last_commit', { projectPath: @project.full_path, ref: current_ref, path: current_route_path || "" })
@@ -31,9 +34,6 @@
 
       %div{ class: project_child_container_class(view_path) }
         = render view_path, is_project_overview: true
-
-    .project-page-layout-sidebar.js-show-on-project-root.gl-mt-5
-      = render "sidebar"
 - else
   - if can?(current_user, :read_code, @project) && @project.repository_languages.present?
     - add_page_startup_graphql_call('repository/path_last_commit', { projectPath: @project.full_path, ref: current_ref, path: current_route_path || "" })