From 16ae5bc2c11e89f3a990d710adafcaa734d112ec Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Tue, 2 Mar 2021 23:22:29 -0800
Subject: [PATCH] Make fork project form responsive

Part of issue: https://gitlab.com/gitlab-org/gitlab/-/issues/15013
---
 .../pages/projects/forks/new/components/fork_form.vue  | 10 +++++-----
 app/assets/stylesheets/utilities.scss                  |  1 +
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
index a59a8afa4de964..fd35c16ab6388e 100644
--- a/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
+++ b/app/assets/javascripts/pages/projects/forks/new/components/fork_form.vue
@@ -200,9 +200,9 @@ export default {
       <gl-form-input id="fork-name" v-model="fork.name" data-testid="fork-name-input" required />
     </gl-form-group>
 
-    <div class="gl-display-flex">
-      <div class="gl-w-half">
-        <gl-form-group label="Project URL" label-for="fork-url" class="gl-pr-2">
+    <div class="gl-md-display-flex">
+      <div class="gl-flex-basis-half">
+        <gl-form-group label="Project URL" label-for="fork-url" class="gl-md-mr-3">
           <gl-form-input-group>
             <template #prepend>
               <gl-input-group-text>
@@ -225,8 +225,8 @@ export default {
           </gl-form-input-group>
         </gl-form-group>
       </div>
-      <div class="gl-w-half">
-        <gl-form-group label="Project slug" label-for="fork-slug" class="gl-pl-2">
+      <div class="gl-flex-basis-half">
+        <gl-form-group label="Project slug" label-for="fork-slug" class="gl-md-ml-3">
           <gl-form-input
             id="fork-slug"
             v-model="fork.slug"
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index d49b58df69bb98..024162eba3eb61 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -117,6 +117,7 @@
   flex-basis: 25%;
 }
 
+// Will be moved to @gitlab/ui in https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1168
 .gl-md-ml-3 {
   @media (min-width: $breakpoint-md) {
     margin-left: $gl-spacing-scale-3;
-- 
GitLab