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.

9 files changed, 29 insertions, 38 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 92190f8979e..9871771542d 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/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;
 
 /*
diff --git a/app/assets/stylesheets/pages/wiki.scss b/app/assets/stylesheets/pages/wiki.scss
index 379df1c4db1..0b65b915abf 100644
--- a/app/assets/stylesheets/pages/wiki.scss
+++ b/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;
 
diff --git a/app/views/projects/wikis/_sidebar.html.haml b/app/views/projects/wikis/_sidebar.html.haml
index a9d21470944..83d145444d8 100644
--- a/app/views/projects/wikis/_sidebar.html.haml
+++ b/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")
diff --git a/app/views/projects/wikis/edit.html.haml b/app/views/projects/wikis/edit.html.haml
index 815b4a51261..9ccf5acfefc 100644
--- a/app/views/projects/wikis/edit.html.haml
+++ b/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")
diff --git a/app/views/projects/wikis/git_access.html.haml b/app/views/projects/wikis/git_access.html.haml
index 009133be117..6972eda9bb7 100644
--- a/app/views/projects/wikis/git_access.html.haml
+++ b/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")
diff --git a/app/views/projects/wikis/history.html.haml b/app/views/projects/wikis/history.html.haml
index f8468ef9a78..d3a55c53649 100644
--- a/app/views/projects/wikis/history.html.haml
+++ b/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')
 
diff --git a/app/views/projects/wikis/pages.html.haml b/app/views/projects/wikis/pages.html.haml
index f7999c3f1bd..275dc5dbd23 100644
--- a/app/views/projects/wikis/pages.html.haml
+++ b/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")
diff --git a/app/views/projects/wikis/show.html.haml b/app/views/projects/wikis/show.html.haml
index 1d649886331..c6197fe576e 100644
--- a/app/views/projects/wikis/show.html.haml
+++ b/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?
diff --git a/changelogs/unreleased/66022-git-clone-url-box-on-wiki-git-access-page-is-broken.yml b/changelogs/unreleased/66022-git-clone-url-box-on-wiki-git-access-page-is-broken.yml
new file mode 100644
index 00000000000..931e947f8ed
--- /dev/null
+++ b/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