Fix css class naming

- adjust breakpoint name position
- fix usages

app/assets/javascripts/packages/details/components/dependency_row.vue

@@ -26,7 +26,7 @@ export default {
 
     <div
       v-if="showVersion"
-      class="table-section section-50 gl-display-flex gl-justify-content-md-end"
+      class="table-section section-50 gl-display-flex gl-md-justify-content-end"
       data-testid="version-pattern"
     >
       <span class="gl-text-body">{{ dependency.version_pattern }}</span>

app/assets/stylesheets/utilities.scss

@@ -112,27 +112,10 @@
   top: 66vh;
 }
 
-// Remove when https://gitlab.com/gitlab-org/gitlab-ui/-/issues/871
-// gets fixed on GitLab UI
-.gl-sm-w-auto\! {
-  @media (min-width: $breakpoint-sm) {
-    width: auto !important;
-  }
-}
-
-
 .gl-shadow-x0-y0-b3-s1-blue-500 {
   box-shadow: inset 0 0 3px $gl-border-size-1 $blue-500;
 }
 
-// remove when https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/1692 is merged
-.gl-border-t-transparent {
-  border-top-color: transparent;
-}
-
-.gl-align-items-flex-end {
-  align-items: flex-end;
-}
 
 .gl-sm-align-items-flex-end {
   @media (min-width: $breakpoint-sm) {
@@ -152,15 +135,11 @@
   }
 }
 
-.gl-align-items-stretch {
-  align-items: stretch;
-}
-
 .gl-min-h-6 {
   min-height: $gl-spacing-scale-6;
 }
 
-.gl-justify-content-md-end {
+.gl-md-justify-content-end {
   @media (min-width: $breakpoint-md) {
     width: auto !important;
   }

spec/frontend/packages/details/components/__snapshots__/dependency_row_spec.js.snap

@@ -21,7 +21,7 @@ exports[`DependencyRow renders full dependency 1`] = `
   </div>
    
   <div
-    class="table-section section-50 gl-display-flex gl-justify-content-md-end"
+    class="table-section section-50 gl-display-flex gl-md-justify-content-end"
     data-testid="version-pattern"
   >
     <span