diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss index f837b359c..2dd8e6955 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss @@ -48,8 +48,8 @@ top: 0; .button__content { - display: inline-flex; align-items: center; + display: inline-flex; } } diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue index 9a409f18b..8c2760575 100644 --- a/app/javascript/dashboard/components/widgets/Avatar.vue +++ b/app/javascript/dashboard/components/widgets/Avatar.vue @@ -43,12 +43,14 @@ export default { }, computed: { style() { + const fontSize = Math.floor(this.size / 2.5); + const lineHeight = this.size + Math.floor(this.size / 20); let style = { width: `${this.size}px`, height: `${this.size}px`, borderRadius: this.rounded ? '50%' : 0, - lineHeight: `${this.size + Math.floor(this.size / 20)}px`, - fontSize: `${Math.floor(this.size / 2.5)}px`, + lineHeight: `${Math.max(lineHeight, 12)}px`, + fontSize: `${Math.max(fontSize, 8)}px`, }; if (this.backgroundColor) { diff --git a/app/javascript/dashboard/components/widgets/Thumbnail.spec.js b/app/javascript/dashboard/components/widgets/Thumbnail.spec.js index c10cd3d16..98be81a98 100644 --- a/app/javascript/dashboard/components/widgets/Thumbnail.spec.js +++ b/app/javascript/dashboard/components/widgets/Thumbnail.spec.js @@ -11,12 +11,13 @@ describe(`when there are NO errors loading the thumbnail`, () => { data() { return { imgError: false, + hasImageLoaded: true, }; }, }); expect(wrapper.find('#image').exists()).toBe(true); const avatarComponent = wrapper.findComponent(Avatar); - expect(avatarComponent.exists()).toBe(false); + expect(avatarComponent.isVisible()).toBe(false); }); }); @@ -29,12 +30,13 @@ describe(`when there ARE errors loading the thumbnail`, () => { data() { return { imgError: true, + hasImageLoaded: true, }; }, }); - expect(wrapper.find('#image').exists()).toBe(false); + expect(wrapper.find('#image').isVisible()).toBe(false); const avatarComponent = wrapper.findComponent(Avatar); - expect(avatarComponent.exists()).toBe(true); + expect(avatarComponent.isVisible()).toBe(true); }); }); diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue index 45efcfcc5..f59930806 100644 --- a/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue +++ b/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue @@ -24,14 +24,6 @@
@@ -298,6 +298,10 @@ export default { line-height: var(--space-normal); margin-left: var(--space-small); } + + .assignee-avatar { + margin-left: var(--space-small); + } } .details-meta { display: flex; @@ -342,10 +346,6 @@ export default { margin-right: 0; max-width: 12rem; } - - .assignee-avatar { - margin-left: var(--space-micro); - } } .message--attachment-icon { +