diff --git a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb b/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb index 072d443a07eb..544eace1f353 100644 --- a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb +++ b/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb @@ -48,15 +48,15 @@ end if @meeting_agenda_item.duration_in_minutes.present? && @meeting_agenda_item.duration_in_minutes > 0 - grid.with_area(:duration, Primer::Beta::Text, color: duration_color_scheme, mr: 2, font_size: :small) do + grid.with_area(:duration, Primer::Beta::Text, color: duration_color_scheme, mr: 2) do I18n.t('datetime.distance_in_words.x_minutes_abbreviated', count: @meeting_agenda_item.duration_in_minutes) end end if @meeting_agenda_item.presenter grid.with_area(:presenter, tag: :div, classes: 'ellipsis') do - flex_layout do |flex| - flex.with_column(classes: 'ellipsis') do + flex_layout(align_items: :flex_end) do |flex| + flex.with_column(classes: 'ellipsis custom-presenter-flex') do render(Users::AvatarComponent.new(user: @meeting_agenda_item.presenter, size: 'mini', title:, classes: 'op-principal_flex')) end end diff --git a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.sass b/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.sass index 1928b228ceac..bdc592222afd 100644 --- a/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.sass +++ b/modules/meeting/app/components/meeting_agenda_items/item_component/show_component.sass @@ -1,6 +1,6 @@ @import 'helpers' -$meeting-agenda-item--presenter-width: 300px +$meeting-agenda-item--presenter-width: 170px $meeting-agenda-item--presenter-width--mobile: 150px .op-meeting-agenda-item @@ -11,36 +11,49 @@ $meeting-agenda-item--presenter-width--mobile: 150px &--drag-handle, &--duration, &--content, - &--presenter + &--presenter, + &--actions align-self: start - &--title - align-self: center - - &--actions + &--duration + white-space: nowrap justify-self: end + &--content + overflow-wrap: anywhere + &--presenter max-width: $meeting-agenda-item--presenter-width justify-self: end - &--duration - white-space: nowrap + &--actions justify-self: end + margin-top: -5px // Needed because the invisible effect makes the button look misaligned otherwise &--title + align-self: center overflow-wrap: anywhere - margin-bottom: 0 - &--content - overflow-wrap: anywhere + .custom-presenter-flex + margin-left: auto @media screen and (max-width: $breakpoint-lg) - grid-template-columns: 20px auto 1fr 150px 50px - grid-template-areas: "drag-handle content content content actions" ". duration . presenter presenter" ". title title title title" ". notes notes notes notes" + grid-template-columns: 20px auto 1fr auto 50px + grid-template-areas: "drag-handle content content content actions" ". title title title title" ". presenter duration . ." ". notes notes notes notes" &--author justify-self: stretch &--presenter + width: inherit max-width: $meeting-agenda-item--presenter-width--mobile + margin-left: 0 + margin-top: 5px + + &--duration + justify-self: start + margin-top: 5px + margin-left: 8px + + .custom-presenter-flex + margin-left: 0 diff --git a/modules/meeting/app/components/meeting_sections/header_component.html.erb b/modules/meeting/app/components/meeting_sections/header_component.html.erb index 6eeb23ad560a..4bda5a476f4e 100644 --- a/modules/meeting/app/components/meeting_sections/header_component.html.erb +++ b/modules/meeting/app/components/meeting_sections/header_component.html.erb @@ -13,8 +13,8 @@ end end if @meeting_section.agenda_items_sum_duration_in_minutes > 0 - grid.with_area(:duration, Primer::Beta::Text, color: :subtle, mr: 1, font_size: :small) do - render(Primer::Beta::Text.new(font_size: :small, font_weight: :normal, color: :subtle)) do + grid.with_area(:duration, Primer::Beta::Text, color: :subtle, mr: 1) do + render(Primer::Beta::Text.new(font_weight: :normal, color: :subtle)) do render(OpenProject::Common::DurationComponent.new(@meeting_section.agenda_items_sum_duration_in_minutes, :minutes, abbreviated: true)) end end