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

@@ -1,6 +1,6 @@
 %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

@@ -1,15 +1,17 @@
 - @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

@@ -1,6 +1,6 @@
 - 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

@@ -0,0 +1,5 @@
+---
+title: Fix broken git clone box on wiki git access page
+merge_request: 31898
+author:
+type: fixed