1 files changed, 11 insertions, 9 deletions
diff --git a/app/assets/javascripts/feature_flags/components/form.vue b/app/assets/javascripts/feature_flags/components/form.vue
index 8b79c661b12..35abcc3d561 100644
--- a/app/assets/javascripts/feature_flags/components/form.vue
+++ b/app/assets/javascripts/feature_flags/components/form.vue
@@ -157,16 +157,18 @@ export default {
 <template>
   <form class="feature-flags-form">
     <fieldset>
-      <div class="row">
-        <div class="form-group col-md-4">
-          <label for="feature-flag-name" class="label-bold">{{ s__('FeatureFlags|Name') }} *</label>
+      <div class="gl-display-flex gl-flex-wrap gl-mx-n5">
+        <div class="gl-mb-5 gl-px-5 gl-w-full col-md-4">
+          <label for="feature-flag-name" class="gl-font-weight-bold"
+            >{{ s__('FeatureFlags|Name') }} *</label
+          >
           <input id="feature-flag-name" v-model="formName" class="form-control" />
         </div>
       </div>
 
-      <div class="row">
-        <div class="form-group col-md-4">
-          <label for="feature-flag-description" class="label-bold">
+      <div class="gl-display-flex gl-flex-wrap gl-mx-n5">
+        <div class="gl-mb-5 gl-px-5 gl-w-full col-md-4">
+          <label for="feature-flag-description" class="gl-font-weight-bold">
             {{ s__('FeatureFlags|Description') }}
           </label>
           <textarea
@@ -185,8 +187,8 @@ export default {
         :show-categorized-issues="false"
       />
 
-      <div class="row">
-        <div class="col-md-12">
+      <div class="gl-display-flex gl-flex-wrap gl-mx-n5">
+        <div class="gl-mb-5 gl-px-5 gl-w-full">
           <h4>{{ s__('FeatureFlags|Strategies') }}</h4>
           <div class="gl-display-flex gl-align-items-baseline gl-justify-content-space-between">
             <p class="gl-mr-5">{{ $options.translations.newHelpText }}</p>
@@ -206,7 +208,7 @@ export default {
           @delete="deleteStrategy(strategy)"
         />
       </div>
-      <div v-else class="gl-display-flex gl-justify-content-center gl-border-t gl-py-6 w-100">
+      <div v-else class="gl-display-flex gl-justify-content-center gl-border-t gl-py-6 gl-w-full">
         <span>{{ $options.translations.noStrategiesText }}</span>
       </div>
     </fieldset>