Merge pull request #16791 from opf/feature/57671-improve-display-of-w…

…ork-package-and-agenda-titles-in-meetings

[#57671] Improve display of work package and agenda titles in meetings

modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb

@@ -7,24 +7,16 @@
         end
       end
 
-      grid.with_area(:content, tag: :span) do
+      grid.with_area(:content, tag: :span, mr: 2) do
         if @meeting_agenda_item.visible_work_package?
           flex_layout(align_items: :center) do |flex|
-            flex.with_column(mr: 2, flex: 1, classes: 'ellipsis') do
-              render(Primer::Beta::Link.new(href: work_package_path(@meeting_agenda_item.work_package), underline: false,
-                                            test_selector: 'op-meeting-agenda-title',
-                                            font_size: :normal, font_weight: :bold, target: "_blank")) do
-                @meeting_agenda_item.work_package.subject
-              end
-            end
-
-            flex.with_column(mr: 2, classes: 'hidden-for-mobile') do
+            flex.with_column(mr: 2) do
               render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do
-                "#{@meeting_agenda_item.work_package.type.name} ##{@meeting_agenda_item.work_package.id}"
+                "##{@meeting_agenda_item.work_package.id} #{@meeting_agenda_item.work_package.type.name}"
               end
             end
 
-            flex.with_column(mr: 2, classes: 'hidden-for-mobile') do
+            flex.with_column(mr: 2) do
               render(Primer::Beta::Label.new(font_weight: :bold)) do
                 @meeting_agenda_item.work_package.status.name
               end
@@ -45,16 +37,26 @@
         end
       end
 
+      grid.with_area(:title, tag: :div) do
+        if @meeting_agenda_item.visible_work_package?
+          render(Primer::Beta::Link.new(href: work_package_path(@meeting_agenda_item.work_package), underline: false,
+                                        test_selector: 'op-meeting-agenda-title',
+                                        font_size: :normal, font_weight: :bold, target: "_blank")) do
+            @meeting_agenda_item.work_package.subject
+          end
+        end
+      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: 1, 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

modules/meeting/app/components/meeting_agenda_items/item_component/show_component.sass

@@ -1,34 +1,59 @@
 @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
   display: grid
   grid-template-columns: 20px auto 1fr fit-content($meeting-agenda-item--presenter-width) fit-content(40px)
-  grid-template-areas: "drag-handle content duration presenter actions" ".notes notes notes notes"
+  grid-template-areas: "drag-handle content duration presenter actions" ". title title title title" ". notes notes notes notes"
 
   &--drag-handle,
   &--duration,
   &--content,
-  &--presenter
-    align-self: center
-
+  &--presenter,
   &--actions
+    align-self: start
+
+  &--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
 
-  &--content
-    @include text-shortener
+  &--title
+    align-self: center
+    overflow-wrap: anywhere
+
+  .custom-presenter-flex
+    margin-left: auto
 
   @media screen and (max-width: $breakpoint-lg)
-    grid-template-columns: 20px auto 1fr calc($meeting-agenda-item--presenter-width - 50px) 50px
-    grid-template-areas: "drag-handle content content content actions" ". duration . presenter presenter" ". 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

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