diff --git a/app/assets/javascripts/admin/abuse_report/components/abuse_report_notes.vue b/app/assets/javascripts/admin/abuse_report/components/abuse_report_notes.vue
index 29de7e1ad1d3a88f33d6a3ae84d30f6b260804b6..53a2a9677a7ff6e4bf38c919cc7bf6e761ee7388 100644
--- a/app/assets/javascripts/admin/abuse_report/components/abuse_report_notes.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/abuse_report_notes.vue
@@ -71,7 +71,7 @@ export default {
<template>
<div>
- <div class="issuable-discussion gl-mb-5 gl-clearfix!">
+ <div class="issuable-discussion gl-mb-5 !gl-clearfix">
<template v-if="initialLoading">
<ul class="notes main-notes-list timeline">
<skeleton-loading-container
diff --git a/app/assets/javascripts/admin/abuse_report/components/activity_events_list.vue b/app/assets/javascripts/admin/abuse_report/components/activity_events_list.vue
index 2206e600543a01ec7695e1a1228f1c71479bf084..cb36c10f4f4c74994a0a26d9f4a9dc75960d75d0 100644
--- a/app/assets/javascripts/admin/abuse_report/components/activity_events_list.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/activity_events_list.vue
@@ -10,8 +10,8 @@ export default {
<template>
<!-- The styles `issuable-discussion`, `timeline`, `main-notes-list` and `notes` used below
are declared in app/assets/stylesheets/pages/notes.scss -->
- <section class="gl-pt-6 issuable-discussion">
- <h2 class="gl-font-size-h1 gl-mt-0 gl-mb-4">{{ $options.i18n.activity }}</h2>
+ <section class="issuable-discussion gl-pt-6">
+ <h2 class="gl-mb-4 gl-mt-0 gl-text-size-h1">{{ $options.i18n.activity }}</h2>
<ul class="timeline main-notes-list notes">
<slot name="history-items"></slot>
</ul>
diff --git a/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue b/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue
index ac7eeece6949144e0d3a0cb8fc292d768cd0c286..236e1033204fa00d7e3d4aa5f27169a510b0e005 100644
--- a/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/activity_history_item.vue
@@ -31,12 +31,12 @@ export default {
<template>
<history-item icon="warning">
- <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row">
+ <div class="gl-flex gl-flex-col sm:gl-flex-row">
<gl-sprintf :message="$options.i18n.reportedByForCategory">
<template #name>{{ reporterName }}</template>
<template #category>{{ report.category }}</template>
</gl-sprintf>
- <time-ago-tooltip :time="report.reportedAt" class="gl-text-secondary gl-sm-ml-3" />
+ <time-ago-tooltip :time="report.reportedAt" class="gl-text-secondary sm:gl-ml-3" />
</div>
</history-item>
</template>
diff --git a/app/assets/javascripts/admin/abuse_report/components/labels_select.vue b/app/assets/javascripts/admin/abuse_report/components/labels_select.vue
index de92dde1be97b64f7d11889f36445122ff098e88..a1c8e207cbdfe577e66b377b312fbcbb094148f4 100644
--- a/app/assets/javascripts/admin/abuse_report/components/labels_select.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/labels_select.vue
@@ -158,7 +158,7 @@ export default {
</script>
<template>
<div class="labels-select-wrapper">
- <div class="gl-display-flex gl-align-items-center gl-gap-3 gl-mb-2">
+ <div class="gl-mb-2 gl-flex gl-items-center gl-gap-3">
<span>{{ $options.i18n.label }}</span>
<gl-loading-icon v-if="initialLoading" size="sm" inline class="gl-ml-2" />
<gl-button
@@ -171,7 +171,7 @@ export default {
{{ $options.i18n.edit }}
</gl-button>
</div>
- <div class="gl-text-gray-500 gl-mb-2" data-testid="selected-labels">
+ <div class="gl-mb-2 gl-text-gray-500" data-testid="selected-labels">
<template v-if="isLabelsEmpty">{{ $options.i18n.noLabels }}</template>
<dropdown-value
v-else
diff --git a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_add_note.vue b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_add_note.vue
index 2f114817037481150e93005dcddddbddce461845..c0d8fe472869b780b2ba2ac937b139acfafab9c1 100644
--- a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_add_note.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_add_note.vue
@@ -54,15 +54,13 @@ export default {
return this.isNewDiscussion
? 'timeline-entry note-form'
: // eslint-disable-next-line @gitlab/require-i18n-strings
- 'note note-wrapper note-comment discussion-reply-holder gl-border-t-0! clearfix';
+ 'note note-wrapper note-comment discussion-reply-holder !gl-border-t-0 clearfix';
},
timelineEntryInnerClasses() {
return this.isNewDiscussion ? 'timeline-entry-inner' : '';
},
commentFormWrapperClasses() {
- return !this.isEditing
- ? 'gl-relative gl-display-flex gl-align-items-flex-start gl-flex-nowrap'
- : '';
+ return !this.isEditing ? 'gl-relative gl-flex gl-items-start gl-flex-nowrap' : '';
},
commentButtonText() {
return this.isNewDiscussion ? __('Comment') : __('Reply');
diff --git a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_comment_form.vue b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_comment_form.vue
index e7ee916fe5d267ad89e58164346169b88b9c0401..875d7a298a88f3c71b06a635dcd64bbadfb6dd53 100644
--- a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_comment_form.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_comment_form.vue
@@ -92,9 +92,9 @@ export default {
</script>
<template>
- <div class="timeline-discussion-body gl-overflow-visible!">
- <div class="note-body gl-p-0! gl-overflow-visible!">
- <form class="common-note-form gfm-form js-main-target-form gl-flex-grow-1 new-note">
+ <div class="timeline-discussion-body !gl-overflow-visible">
+ <div class="note-body !gl-overflow-visible !gl-p-0">
+ <form class="common-note-form gfm-form js-main-target-form new-note gl-grow">
<markdown-editor
:value="commentText"
:enable-content-editor="false"
diff --git a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue
index 7cb0622e17b19bff2530e8cc36831a9d9928bd59..1c7b7f09f34b275b99cacabb45189fc9f360edd3 100644
--- a/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/notes/abuse_report_note.vue
@@ -89,7 +89,7 @@ export default {
/>
</gl-avatar-link>
</div>
- <div class="timeline-content gl-pb-4!">
+ <div class="timeline-content !gl-pb-4">
<abuse-report-edit-note
v-if="isEditing"
:abuse-report-id="abuseReportId"
diff --git a/app/assets/javascripts/admin/abuse_report/components/report_actions.vue b/app/assets/javascripts/admin/abuse_report/components/report_actions.vue
index 7463bbb559e45f5a874a668530ce20bc6f48c8c8..cabf0e7e9445d76c5c0dc0c291bba2f7be8a5900 100644
--- a/app/assets/javascripts/admin/abuse_report/components/report_actions.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/report_actions.vue
@@ -147,7 +147,7 @@ export default {
@close="toggleActionsDrawer"
>
<template #title>
- <div class="gl-font-bold gl-font-size-h2">{{ $options.i18n.actions }}</div>
+ <div class="gl-text-size-h2 gl-font-bold">{{ $options.i18n.actions }}</div>
</template>
<template #default>
<gl-form @submit.prevent="submitForm">
diff --git a/app/assets/javascripts/admin/abuse_report/components/report_header.vue b/app/assets/javascripts/admin/abuse_report/components/report_header.vue
index 83dae99a65c6059597688feb83d2b9ebc2deca39..0caf0e8f95cde5a090c24894a5fc831777a44cd5 100644
--- a/app/assets/javascripts/admin/abuse_report/components/report_header.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/report_header.vue
@@ -51,29 +51,25 @@ export default {
</script>
<template>
- <header
- class="gl-py-4 gl-border-b gl-display-flex gl-justify-content-space-between gl-flex-direction-column gl-sm-flex-direction-row"
- >
- <div class="gl-display-flex gl-align-items-center gl-gap-3">
+ <header class="gl-border-b gl-flex gl-flex-col gl-justify-between gl-py-4 sm:gl-flex-row">
+ <div class="gl-flex gl-items-center gl-gap-3">
<gl-badge :variant="badgeVariant" :icon="badgeIcon" :aria-label="badgeText">
{{ badgeText }}
</gl-badge>
<gl-avatar :size="48" :src="user.avatarUrl" />
- <h1 class="gl-font-size-h-display gl-my-0">
+ <h1 class="gl-my-0 gl-text-size-h-display">
{{ user.name }}
</h1>
<gl-link :href="user.path"> @{{ user.username }} </gl-link>
</div>
- <nav
- class="gl-display-flex gl-sm-align-items-center gl-mt-4 gl-sm-mt-0 gl-flex-direction-column gl-sm-flex-direction-row"
- >
+ <nav class="gl-mt-4 gl-flex gl-flex-col sm:gl-mt-0 sm:gl-flex-row sm:gl-items-center">
<gl-button :href="user.adminPath">
{{ $options.i18n.adminProfile }}
</gl-button>
<report-actions
:user="user"
:report="report"
- class="gl-sm-ml-3 gl-mt-3 gl-sm-mt-0"
+ class="gl-mt-3 sm:gl-ml-3 sm:gl-mt-0"
@closeReport="closeReport"
v-on="$listeners"
/>
diff --git a/app/assets/javascripts/admin/abuse_report/components/reported_content.vue b/app/assets/javascripts/admin/abuse_report/components/reported_content.vue
index 22f452e3d59b6f758c0c248a2710ce8322e5cb73..7f7aa3503325be61c21833431051983fee433a35 100644
--- a/app/assets/javascripts/admin/abuse_report/components/reported_content.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/reported_content.vue
@@ -64,16 +64,12 @@ export default {
<template>
<div class="gl-pt-6">
- <div
- class="gl-pb-3 gl-display-flex gl-justify-content-space-between gl-flex-direction-column gl-sm-flex-direction-row gl-align-items-center"
- >
- <h2 class="gl-font-size-h1 gl-mt-2 gl-mb-2">
+ <div class="gl-flex gl-flex-col gl-items-center gl-justify-between gl-pb-3 sm:gl-flex-row">
+ <h2 class="gl-mb-2 gl-mt-2 gl-text-size-h1">
{{ $options.i18n.reportTypes[reportType] }}
</h2>
- <div
- class="gl-display-flex gl-align-items-stretch gl-flex-direction-column gl-sm-flex-direction-row gl-mt-3 gl-sm-mt-0"
- >
+ <div class="gl-mt-3 gl-flex gl-flex-col gl-items-stretch sm:gl-mt-0 sm:gl-flex-row">
<template v-if="report.screenshot">
<gl-button data-testid="screenshot-button" @click="toggleScreenshotModal">
{{ $options.i18n.viewScreenshot }}
@@ -87,7 +83,7 @@ export default {
<img
:src="report.screenshot"
:alt="$options.i18n.screenshotTitle"
- class="gl-w-full gl-h-auto"
+ class="gl-h-auto gl-w-full"
/>
</gl-modal>
</template>
@@ -95,7 +91,7 @@ export default {
v-if="report.url"
data-testid="report-url-button"
:href="report.url"
- class="gl-sm-ml-3 gl-mt-3 gl-sm-mt-0"
+ class="gl-mt-3 sm:gl-ml-3 sm:gl-mt-0"
>
{{ $options.i18n.goToType[reportType] }}
</gl-button>
@@ -117,9 +113,9 @@ export default {
</template>
{{ $options.i18n.reportedBy }}
<template #footer>
- <div class="gl-display-flex gl-align-items-center gl-mb-2">
+ <div class="gl-mb-2 gl-flex gl-items-center">
<gl-avatar :size="32" :src="reporter && reporter.avatarUrl" />
- <div class="gl-display-flex gl-flex-wrap">
+ <div class="gl-flex gl-flex-wrap">
<span class="gl-ml-3 gl-font-bold">
{{ reporterName }}
</span>
@@ -128,11 +124,11 @@ export default {
</gl-link>
<time-ago-tooltip
:time="report.reportedAt"
- class="gl-ml-3 gl-text-secondary gl-w-full gl-sm-w-auto"
+ class="gl-ml-3 gl-w-full gl-text-secondary sm:gl-w-auto"
/>
</div>
</div>
- <p v-if="report.message" class="gl-pl-8 gl-mb-0">{{ report.message }}</p>
+ <p v-if="report.message" class="gl-mb-0 gl-pl-8">{{ report.message }}</p>
</template>
</gl-card>
</div>
diff --git a/app/assets/javascripts/admin/abuse_report/components/user_detail.vue b/app/assets/javascripts/admin/abuse_report/components/user_detail.vue
index cf823b3f7956515fd16489749e9d4fbf875f4078..a30f95624b8321041cdfa0d258c14b6e0a9d645f 100644
--- a/app/assets/javascripts/admin/abuse_report/components/user_detail.vue
+++ b/app/assets/javascripts/admin/abuse_report/components/user_detail.vue
@@ -16,11 +16,11 @@ export default {
</script>
<template>
- <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-mb-4">
- <p class="gl-font-bold gl-flex-grow-1 gl-flex-basis-0 gl-mb-0">
+ <div class="gl-mb-4 gl-flex gl-flex-col sm:gl-flex-row">
+ <p class="gl-mb-0 gl-grow gl-basis-0 gl-font-bold">
{{ label }}
</p>
- <div class="gl-flex-grow-1 gl-flex-basis-two-thirds">
+ <div class="gl-grow gl-basis-2/3">
<slot>{{ value }}</slot>
</div>
</div>
diff --git a/app/assets/javascripts/admin/abuse_reports/components/app.vue b/app/assets/javascripts/admin/abuse_reports/components/app.vue
index a9a6c3a63adcdb5f3cf0e98661e5bfa6ee36b7be..d42ae7c1ba946fd68254bc0db6846829d6200595 100644
--- a/app/assets/javascripts/admin/abuse_reports/components/app.vue
+++ b/app/assets/javascripts/admin/abuse_reports/components/app.vue
@@ -40,7 +40,7 @@ export default {
<gl-empty-state v-if="abuseReports.length == 0" :title="s__('AbuseReports|No reports found')" />
<ul v-else class="gl-pl-0">
- <li v-for="(report, index) in abuseReports" :key="index" class="gl-list-style-none">
+ <li v-for="(report, index) in abuseReports" :key="index" class="gl-list-none">
<abuse-report-row :report="report" />
</li>
</ul>
diff --git a/app/assets/javascripts/vue_shared/components/registry/list_item.vue b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
index 43939ac4e55867495f3dc85ca93637cbd99e5736..8bcd1574ba38ecbd971011027ff5a251587f1989 100644
--- a/app/assets/javascripts/vue_shared/components/registry/list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/registry/list_item.vue
@@ -40,7 +40,7 @@ export default {
'gl-border-t-transparent': !this.first && !this.selected,
'gl-border-t-gray-100': this.first && !this.selected,
'gl-border-b-gray-100': !this.selected,
- 'gl-border-t-transparent!': this.selected && !this.first,
+ '!gl-border-t-transparent': this.selected && !this.first,
'gl-bg-blue-50 gl-border-blue-200': this.selected,
};
},
@@ -59,27 +59,23 @@ export default {
<template>
<div
- class="gl-display-flex gl-flex-direction-column gl-border-b-solid gl-border-t-solid gl-border-t-1 gl-border-b-1"
+ class="gl-flex gl-flex-col gl-border-b-1 gl-border-t-1 gl-border-b-solid gl-border-t-solid"
:class="optionalClasses"
>
- <div class="gl-display-flex gl-align-items-center gl-py-3">
+ <div class="gl-flex gl-items-center gl-py-3">
<div
v-if="$slots['left-action'] /* eslint-disable-line @gitlab/vue-prefer-dollar-scopedslots */"
- class="gl-w-7 gl-display-flex gl-justify-content-start gl-pl-2"
+ class="gl-flex gl-w-7 gl-justify-start gl-pl-2"
>
<slot name="left-action"></slot>
</div>
- <div
- class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-justify-content-space-between gl-align-items-stretch gl-flex-grow-1"
- >
- <div
- class="gl-display-flex gl-flex-direction-column gl-mb-3 gl-sm-mb-0 gl-min-w-0 gl-flex-grow-1"
- >
+ <div class="gl-flex gl-grow gl-flex-col gl-items-stretch gl-justify-between sm:gl-flex-row">
+ <div class="gl-mb-3 gl-flex gl-min-w-0 gl-grow gl-flex-col sm:gl-mb-0">
<div
v-if="
$slots['left-primary'] /* eslint-disable-line @gitlab/vue-prefer-dollar-scopedslots */
"
- class="gl-display-flex gl-align-items-center gl-text-body gl-font-semibold gl-min-h-6 gl-min-w-0"
+ class="gl-flex gl-min-h-6 gl-min-w-0 gl-items-center gl-font-semibold gl-text-primary"
>
<slot name="left-primary"></slot>
<gl-button
@@ -102,13 +98,13 @@ export default {
'left-secondary'
]
"
- class="gl-display-flex gl-align-items-center gl-text-secondary gl-font-sm gl-min-h-6 gl-min-w-0 gl-flex-grow-1"
+ class="gl-flex gl-min-h-6 gl-min-w-0 gl-grow gl-items-center gl-text-sm gl-text-secondary"
>
<slot name="left-secondary"></slot>
</div>
</div>
<div
- class="gl-display-flex gl-flex-direction-column gl-sm-align-items-flex-end gl-justify-content-space-between gl-text-secondary gl-flex-shrink-0"
+ class="gl-flex gl-flex-shrink-0 gl-flex-col gl-justify-between gl-text-secondary sm:gl-items-end"
>
<div
v-if="
@@ -116,7 +112,7 @@ export default {
'right-primary'
]
"
- class="gl-display-flex gl-align-items-center gl-sm-text-body gl-min-h-6"
+ class="gl-flex gl-min-h-6 gl-items-center sm:gl-text-primary"
>
<slot name="right-primary"></slot>
</div>
@@ -126,7 +122,7 @@ export default {
'right-secondary'
]
"
- class="gl-display-flex gl-align-items-center gl-font-sm gl-min-h-6"
+ class="gl-flex gl-min-h-6 gl-items-center gl-text-sm"
>
<slot name="right-secondary"></slot>
</div>
@@ -136,22 +132,22 @@ export default {
v-if="
$slots['right-action'] /* eslint-disable-line @gitlab/vue-prefer-dollar-scopedslots */
"
- class="gl-w-9 gl-display-flex gl-justify-content-end gl-pr-1"
+ class="gl-flex gl-w-9 gl-justify-end gl-pr-1"
>
<slot name="right-action"></slot>
</div>
</div>
- <div v-if="isDetailsShown" class="gl-display-flex">
+ <div v-if="isDetailsShown" class="gl-flex">
<div class="gl-w-7"></div>
<div
- class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-bg-gray-10 gl-rounded-base gl-shadow-inner-1-gray-100 gl-mb-3"
+ class="gl-mb-3 gl-flex gl-grow gl-flex-col gl-rounded-base gl-bg-gray-10 gl-shadow-inner-1-gray-100"
>
<div
v-for="(row, detailIndex) in detailsSlots"
:key="detailIndex"
class="gl-px-5 gl-py-2"
:class="{
- 'gl-border-gray-100 gl-border-t-solid gl-border-t-1': detailIndex !== 0,
+ 'gl-border-t-1 gl-border-gray-100 gl-border-t-solid': detailIndex !== 0,
}"
>
<slot :name="row"></slot>
diff --git a/spec/frontend/admin/abuse_report/components/notes/abuse_report_add_note_spec.js b/spec/frontend/admin/abuse_report/components/notes/abuse_report_add_note_spec.js
index 560b0a2d43f6c634da76c85ae67f0da9a859b06c..829245b5461c12245fcd0fbb14fad44c381073e6 100644
--- a/spec/frontend/admin/abuse_report/components/notes/abuse_report_add_note_spec.js
+++ b/spec/frontend/admin/abuse_report/components/notes/abuse_report_add_note_spec.js
@@ -93,7 +93,7 @@ describe('Abuse Report Add Note', () => {
'note-wrapper',
'note-comment',
'discussion-reply-holder',
- 'gl-border-t-0!',
+ '!gl-border-t-0',
'clearfix',
]),
);
@@ -101,12 +101,7 @@ describe('Abuse Report Add Note', () => {
expect(findTimelineEntryInner().classes()).toEqual([]);
expect(findCommentFormWrapper().classes()).toEqual(
- expect.arrayContaining([
- 'gl-relative',
- 'gl-display-flex',
- 'gl-align-items-flex-start',
- 'gl-flex-nowrap',
- ]),
+ expect.arrayContaining(['gl-relative', 'gl-flex', 'gl-items-start', 'gl-flex-nowrap']),
);
});
diff --git a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap
index 4e95e34dde5295db80f6d861fe08de8b48edbca0..53f0198756ca9fe0b3286d9b06c0302e6de9a0f3 100644
--- a/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages_and_registries/infrastructure_registry/components/shared/__snapshots__/package_list_row_spec.js.snap
@@ -2,20 +2,20 @@
exports[`packages_list_row renders 1`] = `
<div
- class="gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-t-transparent gl-display-flex gl-flex-direction-column"
+ class="gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-t-transparent gl-flex gl-flex-col"
data-testid="package-row"
>
<div
- class="gl-align-items-center gl-display-flex gl-py-3"
+ class="gl-flex gl-items-center gl-py-3"
>
<div
- class="gl-align-items-stretch gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-justify-content-space-between gl-sm-flex-direction-row"
+ class="gl-flex gl-flex-col gl-grow gl-items-stretch gl-justify-between sm:gl-flex-row"
>
<div
- class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-mb-3 gl-min-w-0 gl-sm-mb-0"
+ class="gl-flex gl-flex-col gl-grow gl-mb-3 gl-min-w-0 sm:gl-mb-0"
>
<div
- class="gl-align-items-center gl-display-flex gl-font-semibold gl-min-h-6 gl-min-w-0 gl-text-body"
+ class="gl-flex gl-font-semibold gl-items-center gl-min-h-6 gl-min-w-0 gl-text-primary"
>
<div
class="gl-align-items-center gl-display-flex gl-min-w-0 gl-mr-3"
@@ -33,7 +33,7 @@ exports[`packages_list_row renders 1`] = `
</div>
</div>
<div
- class="gl-align-items-center gl-display-flex gl-flex-grow-1 gl-font-sm gl-min-h-6 gl-min-w-0 gl-text-secondary"
+ class="gl-flex gl-grow gl-items-center gl-min-h-6 gl-min-w-0 gl-text-secondary gl-text-sm"
>
<div
class="gl-display-flex"
@@ -49,17 +49,17 @@ exports[`packages_list_row renders 1`] = `
</div>
</div>
<div
- class="gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-justify-content-space-between gl-sm-align-items-flex-end gl-text-secondary"
+ class="gl-flex gl-flex-col gl-flex-shrink-0 gl-justify-between gl-text-secondary sm:gl-items-end"
>
<div
- class="gl-align-items-center gl-display-flex gl-min-h-6 gl-sm-text-body"
+ class="gl-flex gl-items-center gl-min-h-6 sm:gl-text-primary"
>
<publish-method-stub
packageentity="[object Object]"
/>
</div>
<div
- class="gl-align-items-center gl-display-flex gl-font-sm gl-min-h-6"
+ class="gl-flex gl-items-center gl-min-h-6 gl-text-sm"
>
<span>
Created
@@ -73,7 +73,7 @@ exports[`packages_list_row renders 1`] = `
</div>
</div>
<div
- class="gl-display-flex gl-justify-content-end gl-pr-1 gl-w-9"
+ class="gl-flex gl-justify-end gl-pr-1 gl-w-9"
>
<gl-button-stub
aria-label="Remove package"
diff --git a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
index 20f470d9f9eb5fa24665695b2a2dc2836b5dd42f..0b8cf00250de4cbb137561ec70e6edca52484b70 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
+++ b/spec/frontend/packages_and_registries/package_registry/components/list/__snapshots__/package_list_row_spec.js.snap
@@ -2,14 +2,14 @@
exports[`packages_list_row renders 1`] = `
<div
- class="gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-t-transparent gl-display-flex gl-flex-direction-column"
+ class="gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-border-t-1 gl-border-t-solid gl-border-t-transparent gl-flex gl-flex-col"
data-testid="package-row"
>
<div
- class="gl-align-items-center gl-display-flex gl-py-3"
+ class="gl-flex gl-items-center gl-py-3"
>
<div
- class="gl-display-flex gl-justify-content-start gl-pl-2 gl-w-7"
+ class="gl-flex gl-justify-start gl-pl-2 gl-w-7"
>
<gl-form-checkbox-stub
class="gl-m-0"
@@ -17,13 +17,13 @@ exports[`packages_list_row renders 1`] = `
/>
</div>
<div
- class="gl-align-items-stretch gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-justify-content-space-between gl-sm-flex-direction-row"
+ class="gl-flex gl-flex-col gl-grow gl-items-stretch gl-justify-between sm:gl-flex-row"
>
<div
- class="gl-display-flex gl-flex-direction-column gl-flex-grow-1 gl-mb-3 gl-min-w-0 gl-sm-mb-0"
+ class="gl-flex gl-flex-col gl-grow gl-mb-3 gl-min-w-0 sm:gl-mb-0"
>
<div
- class="gl-align-items-center gl-display-flex gl-font-semibold gl-min-h-6 gl-min-w-0 gl-text-body"
+ class="gl-flex gl-font-semibold gl-items-center gl-min-h-6 gl-min-w-0 gl-text-primary"
>
<div
class="gl-align-items-center gl-display-flex gl-gap-3 gl-min-w-0 gl-mr-5"
@@ -38,7 +38,7 @@ exports[`packages_list_row renders 1`] = `
</div>
</div>
<div
- class="gl-align-items-center gl-display-flex gl-flex-grow-1 gl-font-sm gl-min-h-6 gl-min-w-0 gl-text-secondary"
+ class="gl-flex gl-grow gl-items-center gl-min-h-6 gl-min-w-0 gl-text-secondary gl-text-sm"
>
<div
class="gl-align-items-center gl-display-flex"
@@ -60,15 +60,15 @@ exports[`packages_list_row renders 1`] = `
</div>
</div>
<div
- class="gl-display-flex gl-flex-direction-column gl-flex-shrink-0 gl-justify-content-space-between gl-sm-align-items-flex-end gl-text-secondary"
+ class="gl-flex gl-flex-col gl-flex-shrink-0 gl-justify-between gl-text-secondary sm:gl-items-end"
>
<div
- class="gl-align-items-center gl-display-flex gl-min-h-6 gl-sm-text-body"
+ class="gl-flex gl-items-center gl-min-h-6 sm:gl-text-primary"
>
<publish-method-stub />
</div>
<div
- class="gl-align-items-center gl-display-flex gl-font-sm gl-min-h-6"
+ class="gl-flex gl-items-center gl-min-h-6 gl-text-sm"
>
<publish-message-stub
author=""
@@ -80,7 +80,7 @@ exports[`packages_list_row renders 1`] = `
</div>
</div>
<div
- class="gl-display-flex gl-justify-content-end gl-pr-1 gl-w-9"
+ class="gl-flex gl-justify-end gl-pr-1 gl-w-9"
>
<gl-disclosure-dropdown-stub
autoclose="true"