Fix broken git clone box on wiki git access page

Some CSS fixes to fix the position of the git clone box on the
wiki git access page. This fix also includes fixes for various
responsive states.

app/assets/stylesheets/framework/variables.scss

@@ -469,6 +469,7 @@ $link-active-background: rgba(0, 0, 0, 0.04);
 $link-hover-background: rgba(0, 0, 0, 0.06);
 $inactive-badge-background: rgba(0, 0, 0, 0.08);
 $sidebar-toggle-height: 60px;
+$sidebar-toggle-width: 40px;
 $sidebar-milestone-toggle-bottom-margin: 10px;
 
 /*

app/assets/stylesheets/pages/wiki.scss

@@ -32,13 +32,11 @@
     color: $gl-text-color-secondary;
   }
 
-  .git-access-header {
-    padding: $gl-padding 0 $gl-padding-top;
-  }
-
   .git-clone-holder {
-    width: 100%;
-    padding-bottom: 40px;
+    .input-group-prepend,
+    .input-group-append {
+      background-color: transparent;
+    }
   }
 
   button.sidebar-toggle {
@@ -48,19 +46,8 @@
     display: block;
   }
 
-  @include media-breakpoint-up(sm) {
-    &.has-sidebar-toggle {
-      padding-right: 40px;
-    }
-
-    .git-clone-holder {
-      width: 480px;
-      padding-bottom: $gl-padding;
-    }
-
-    .nav-controls {
-      width: auto;
-    }
+  &.has-sidebar-toggle .git-access-header {
+    padding-right: $sidebar-toggle-width;
   }
 
   @include media-breakpoint-up(md) {
@@ -105,10 +92,6 @@
     padding: 0 $gl-padding;
   }
 
-  .block {
-    width: 100%;
-  }
-
   a {
     color: $layout-link-gray;
 

app/views/projects/wikis/_sidebar.html.haml

 %aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar.js-right-sidebar{ data: { "offset-top" => "50", "spy" => "affix" } }
   .sidebar-container
-    .block.wiki-sidebar-header.append-bottom-default
+    .block.wiki-sidebar-header.append-bottom-default.w-100
       %a.gutter-toggle.float-right.d-block.d-sm-block.d-md-none.js-sidebar-wiki-toggle{ href: "#" }
         = icon('angle-double-right')
 
@@ -10,12 +10,12 @@
         %span= _("Clone repository")
 
     .blocks-container
-      .block.block-first
+      .block.block-first.w-100
         - if @sidebar_page
           = render_wiki_content(@sidebar_page)
         - else
           %ul.wiki-pages
             = render @sidebar_wiki_entries, context: 'sidebar'
-      .block
+      .block.w-100
         = link_to project_wikis_pages_path(@project), class: 'btn btn-block' do
           = s_("Wiki|More Pages")

app/views/projects/wikis/edit.html.haml

@@ -5,7 +5,7 @@
 
 = wiki_page_errors(@error)
 
-.wiki-page-header.top-area.has-sidebar-toggle
+.wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row
   %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 
@@ -19,7 +19,7 @@
       - else
         = s_("Wiki|Create New Page")
 
-  .nav-controls
+  .nav-controls.pb-md-3.pb-lg-0
     - if @page.persisted?
       = link_to project_wiki_history_path(@project, @page), class: "btn" do
         = s_("Wiki|Page history")

app/views/projects/wikis/git_access.html.haml

 - @content_class = "limit-container-width" unless fluid_layout
 - page_title s_("WikiClone|Git Access"), _("Wiki")
 
-.wiki-page-header.top-area.has-sidebar-toggle
+.wiki-page-header.top-area.has-sidebar-toggle.py-3.flex-column.flex-lg-row
   %button.btn.btn-default.d-block.d-sm-block.d-md-none.float-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 
-  .git-access-header
-    = _("Clone repository")
-    %strong= @project_wiki.full_path
+  .git-access-header.w-100.d-flex.flex-column.justify-content-center
+    %span
+      = _("Clone repository")
+      %strong= @project_wiki.full_path
 
-  = render "shared/clone_panel", project: @project_wiki
+  .pt-3.pt-lg-0.w-100
+    = render "shared/clone_panel", project: @project_wiki
 
 .wiki-git-access
   %h3= s_("WikiClone|Install Gollum")

app/views/projects/wikis/history.html.haml

 - page_title _("History"), @page.human_title, _("Wiki")
 
-.wiki-page-header.top-area.has-sidebar-toggle
+.wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row
   %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 

app/views/projects/wikis/pages.html.haml

@@ -5,13 +5,13 @@
 - sort_title = wiki_sort_title(params[:sort])
 
 %div{ class: container_class }
-  .wiki-page-header.top-area
+  .wiki-page-header.top-area.flex-column.flex-lg-row
 
     .nav-text.flex-fill
       %h2.wiki-page-title
         = s_("Wiki|Wiki Pages")
 
-    .nav-controls
+    .nav-controls.pb-md-3.pb-lg-0
       = link_to project_wikis_git_access_path(@project), class: 'btn' do
         = icon('cloud-download')
         = _("Clone repository")

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

@@ -4,7 +4,7 @@
 - page_title @page.human_title, _("Wiki")
 - add_to_breadcrumbs _("Wiki"), project_wiki_path(@project, :home)
 
-.wiki-page-header.top-area.has-sidebar-toggle
+.wiki-page-header.top-area.has-sidebar-toggle.flex-column.flex-lg-row
   %button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
     = icon('angle-double-left')
 
@@ -15,7 +15,7 @@
         = (_("Last edited by %{name}") % { name: "<strong>#{@page.last_version.author_name}</strong>" }).html_safe
         #{time_ago_with_tooltip(@page.last_version.authored_date)}
 
-  .nav-controls
+  .nav-controls.pb-md-3.pb-lg-0
     = render 'main_links'
 
 - if @page.historical?

changelogs/unreleased/66022-git-clone-url-box-on-wiki-git-access-page-is-broken.yml

+---
+title: Fix broken git clone box on wiki git access page
+merge_request: 31898
+author:
+type: fixed