From 74b511ba5ca18765e566aa6c6eddb25c1d3dcdee Mon Sep 17 00:00:00 2001
From: Savas Vedova <svedova@gitlab.com>
Date: Tue, 5 Dec 2023 15:03:55 +0100
Subject: [PATCH] Fix alignment issues with the MR widget
It turns out, the design was not ready for License Compliance
Widget. This commit makes sure the component is rendered as expected.
Changelog: fixed
EE: true
---
.../components/widget/dynamic_content.vue | 8 ++++++--
.../components/widget/widget_content_row.vue | 3 +--
.../widget/__snapshots__/dynamic_content_spec.js.snap | 6 +++---
3 files changed, 10 insertions(+), 7 deletions(-)
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
index 51c2b15668e0b..cbc7b91922b00 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/dynamic_content.vue
@@ -72,10 +72,14 @@ export default {
:widget-name="widgetName"
:header="data.header"
:help-popover="data.helpPopover"
- :class="{ 'gl-border-top-0': rowIndex === 0 }"
+ :class="{
+ 'gl-border-top-0': rowIndex === 0,
+ 'gl-align-items-start': data.supportingText,
+ 'gl-align-items-baseline': !data.supportingText,
+ }"
>
<template #body>
- <div class="gl-w-full gl-display-flex" :class="{ 'gl-flex-direction-column': level === 1 }">
+ <div class="gl-w-full gl-display-flex gl-flex-direction-column">
<div class="gl-display-flex gl-flex-grow-1">
<div class="gl-display-flex gl-flex-grow-1 gl-align-items-baseline">
<div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
index bb82da7796aac..7413e2237c362 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/widget_content_row.vue
@@ -81,8 +81,7 @@ export default {
<div
class="gl-display-flex"
:class="{
- 'gl-border-t gl-py-3 gl-pl-7 gl-align-items-baseline': level === 2,
- 'gl-align-items-center': level === 3,
+ 'gl-border-t gl-py-3 gl-pl-7': level === 2,
}"
>
<status-icon
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap b/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap
index eb65f790df6f4..f2a66ad2ff204 100644
--- a/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap
+++ b/spec/frontend/vue_merge_request_widget/components/widget/__snapshots__/dynamic_content_spec.js.snap
@@ -49,7 +49,7 @@ exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue render
name="MyWidget"
/>
<div
- class="gl-display-flex gl-w-full"
+ class="gl-display-flex gl-flex-direction-column gl-w-full"
>
<div
class="gl-display-flex gl-flex-grow-1"
@@ -88,7 +88,7 @@ exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue render
>
<li>
<div
- class="gl-align-items-center gl-display-flex"
+ class="gl-align-items-baseline gl-display-flex"
>
<div
class="gl-min-w-0 gl-w-full"
@@ -110,7 +110,7 @@ exports[`~/vue_merge_request_widget/components/widget/dynamic_content.vue render
class="gl-align-items-baseline gl-display-flex"
>
<div
- class="gl-display-flex gl-w-full"
+ class="gl-display-flex gl-flex-direction-column gl-w-full"
>
<div
class="gl-display-flex gl-flex-grow-1"
--
GitLab