diff --git a/app/assets/javascripts/groups/components/group_folder.vue b/app/assets/javascripts/groups/components/group_folder.vue
index 016c093ad8d11a4e34cc33fe6623006b111753c3..5cc2d1982d79fe6e3ec9dca50e4c5bc974e62327 100644
--- a/app/assets/javascripts/groups/components/group_folder.vue
+++ b/app/assets/javascripts/groups/components/group_folder.vue
@@ -49,7 +49,7 @@ export default {
       :action="action"
     />
     <li v-if="hasMoreChildren" class="group-row">
-      <a :href="parentGroup.relativePath" class="group-row-contents has-more-items py-2">
+      <a :href="parentGroup.relativePath" class="group-row-contents has-more-items gl-py-3">
         <gl-icon name="external-link" /> {{ moreChildrenStats }}
       </a>
     </li>
diff --git a/app/assets/javascripts/groups/components/group_item.vue b/app/assets/javascripts/groups/components/group_item.vue
index 98c099b6d9118e5e544741f71c3212be9a533489..6ad1025e840f5836ce4b35973e9f28aa081cb6b2 100644
--- a/app/assets/javascripts/groups/components/group_item.vue
+++ b/app/assets/javascripts/groups/components/group_item.vue
@@ -152,9 +152,9 @@ export default {
   >
     <div
       :class="{ 'project-row-contents': !isGroup }"
-      class="group-row-contents py-2 pr-3 gl-flex gl-items-center"
+      class="group-row-contents gl-flex gl-items-center gl-py-3 gl-pr-5"
     >
-      <div class="folder-toggle-wrap gl-mr-2 !gl-flex gl-items-center">
+      <div class="folder-toggle-wrap gl-mr-2 gl-flex gl-items-center">
         <gl-button
           v-if="hasChildren"
           :aria-label="toggleAriaLabel"
@@ -170,7 +170,7 @@ export default {
       <gl-loading-icon
         v-if="group.isChildrenLoading"
         size="lg"
-        class="flex-shrink-0 gl-mr-3 gl-hidden sm:gl-inline-flex"
+        class="gl-mr-3 gl-hidden gl-shrink-0 sm:gl-inline-flex"
       />
       <a
         :class="{ 'sm:gl-flex': !group.isChildrenLoading }"
@@ -186,8 +186,8 @@ export default {
           :project-name="group.name"
         />
       </a>
-      <div class="group-text-container flex-fill !gl-flex gl-items-center">
-        <div class="group-text flex-grow-1 flex-shrink-1">
+      <div class="group-text-container gl-flex gl-flex-auto gl-items-center">
+        <div class="group-text gl-shrink gl-grow">
           <div
             class="title namespace-title gl-mr-3 gl-flex gl-flex-wrap gl-items-center gl-font-bold"
           >
@@ -253,7 +253,7 @@ export default {
         <div v-else-if="group.archived">
           <gl-badge variant="info">{{ __('Archived') }}</gl-badge>
         </div>
-        <div class="metadata justify-content-md-between gl-flex gl-shrink-0 gl-grow gl-flex-wrap">
+        <div class="metadata gl-flex gl-shrink-0 gl-grow gl-flex-wrap md:gl-justify-between">
           <item-stats :item="group" class="group-stats gl-hidden gl-items-center md:gl-flex" />
           <item-actions
             v-if="showActionsMenu"
diff --git a/app/assets/javascripts/groups/components/groups.vue b/app/assets/javascripts/groups/components/groups.vue
index 12ce387895685e8f88d0c6359eb33cfd441f8463..ed4d8fced011e3b5e421c9a807a0c9963a4de0a1 100644
--- a/app/assets/javascripts/groups/components/groups.vue
+++ b/app/assets/javascripts/groups/components/groups.vue
@@ -46,7 +46,7 @@ export default {
     <pagination-links
       :change="change"
       :page-info="pageInfo"
-      class="justify-content-center gl-mt-3 !gl-flex"
+      class="gl-mt-3 gl-flex gl-justify-center"
     />
   </div>
 </template>