Add truncation rules for WPCard component

app/components/_index.sass

@@ -40,6 +40,7 @@
 @import "work_packages/details/tab_component"
 @import "work_packages/exports/modal_dialog_component"
 @import "work_packages/hover_card_component"
+@import "work_packages/info_line_component"
 @import "work_packages/progress/modal_body_component"
 @import "work_packages/reminder/modal_body_component"
 @import "work_packages/split_view_component"

app/components/open_project/common/work_package_card_component.html.erb

@@ -39,7 +39,7 @@ See COPYRIGHT and LICENSE files for more details.
   <% end %>
 
   <% grid.with_area(:info_line) do %>
-    <%= render(WorkPackages::InfoLineComponent.new(work_package:, status_scheme:)) %>
+    <%= render(WorkPackages::InfoLineComponent.new(work_package:, status_scheme:, wrap: false)) %>
   <% end %>
 
   <% grid.with_area(:actions) do %>
@@ -60,7 +60,7 @@ See COPYRIGHT and LICENSE files for more details.
       <%= render(
             Primer::Beta::Text.new(
               tag: :span,
-              classes: "__hl_inline_priority_#{work_package.priority.id} __hl_inline__small_dot"
+              classes: "__hl_inline_priority_#{work_package.priority.id} __hl_inline__small_dot no-wrap"
             )
           ) do %>
         <span class="op-work-package-card--priority-name"><%= work_package.priority.name %></span>

app/components/open_project/common/work_package_card_component.sass

@@ -28,11 +28,12 @@
 
 .op-work-package-card
   display: grid
-  grid-template-columns: 1fr auto
+  grid-template-columns: minmax(8rem, 1fr) auto
   grid-template-rows: auto auto
   grid-template-areas: "info_line actions" "subject subject"
   align-items: center
-  grid-row-gap: var(--base-size-4)
+  column-gap: var(--stack-gap-condensed)
+  row-gap: var(--base-size-4)
   margin-top: var(--base-size-4)
   margin-bottom: var(--base-size-4)
   container-type: inline-size
@@ -42,7 +43,7 @@
     grid-template-areas: "info_line actions" "subject subject" "footer footer"
 
   &_with-drag-handle
-    grid-template-columns: auto 1fr auto
+    grid-template-columns: auto minmax(8rem, 1fr) auto
     grid-template-areas: "drag_handle info_line actions" ". subject subject"
 
     &.op-work-package-card_with-footer
@@ -98,6 +99,15 @@
 
   // < 768px: hide text labels, show only icons
   @container (width < 768px)
-    .op-work-package-card--assignee-name,
+    .op-work-package-card--assignee-name
+      display: none
+
+  // < 350px: hide priority label as well
+  @container (width < 350px)
+    .op-work-package-card--priority-name
+      display: none
+
+  // On mobile, hide the priority label as well
+  @media screen and (max-width: $breakpoint-sm)
     .op-work-package-card--priority-name
       display: none

app/components/work_packages/info_line_component.html.erb

@@ -1,14 +1,14 @@
 <%=
-  flex_layout(flex_wrap: :wrap, **@system_arguments) do |flex|
+  flex_layout(**@system_arguments) do |flex|
     if @show_project && !@show_subject
       flex.with_column(mr: 2) do
         render(Primer::Beta::Text.new(font_size: @font_size)) { "#{@work_package.project.name}: " }
       end
     end
-    flex.with_column(mr: 2) do
+    flex.with_column(mr: 2, classes: "op-wp-info-line--type") do
       render(WorkPackages::HighlightedTypeComponent.new(work_package: @work_package, font_size: :small))
     end
-    flex.with_column do
+    flex.with_column(classes: "op-wp-info-line--id") do
       render(
         Primer::Beta::Link.new(
           href: url_for(controller: "/work_packages", action: "show", id: @work_package),
@@ -20,13 +20,13 @@
     end
 
     if @show_status
-      flex.with_column(ml: 2) do
+      flex.with_column(ml: 2, classes: "op-wp-info-line--status") do
         render WorkPackages::StatusBadgeComponent.new(status: @work_package.status, scheme: @status_scheme)
       end
     end
 
     if @show_subject
-      flex.with_column(classes: "ellipsis", ml: 1) do
+      flex.with_column(classes: "ellipsis", ml: 2) do
         render(Primer::Beta::Text.new(font_size: @font_size)) do
           if @show_project
             "#{@work_package.project.name}: #{@work_package.subject}"

app/components/work_packages/info_line_component.rb

@@ -37,6 +37,7 @@ class WorkPackages::InfoLineComponent < ApplicationComponent
                  show_status: true,
                  status_scheme: :default,
                  font_size: :small,
+                 wrap: true,
                  **system_arguments)
     super
 
@@ -46,7 +47,14 @@ class WorkPackages::InfoLineComponent < ApplicationComponent
     @show_subject = show_subject
     @show_status = show_status
     @status_scheme = status_scheme
+    @wrap = wrap
 
     @system_arguments = system_arguments
+    @system_arguments[:classes] = class_names(
+      @system_arguments[:classes],
+      "op-wp-info-line"
+    )
+    @system_arguments[:flex_wrap] = @wrap ? :wrap : :nowrap
+    @system_arguments[:overflow] = :hidden unless @wrap
   end
 end

app/components/work_packages/info_line_component.sass

@@ -0,0 +1,9 @@
+.op-wp-info-line
+  &--type,
+  &--status
+    @include text-shortener
+    min-width: 25px
+    max-width: 66%
+
+  &--id
+    white-space: nowrap

lookbook/previews/open_project/work_packages/info_line_component_preview.rb

@@ -37,13 +37,16 @@ module OpenProject::WorkPackages
     # @param show_status [Boolean]
     # @param font_size [Symbol] select [small, normal]
     # @param status_scheme select [default, secondary]
-    def playground(show_project: false, show_subject: false, show_status: true, font_size: :small, status_scheme: :default)
+    # @param wrap [Boolean]
+    def playground(show_project: false, show_subject: false, show_status: true, font_size: :small, status_scheme: :default,
+                   wrap: true)
       render(WorkPackages::InfoLineComponent.new(work_package: WorkPackage.visible.first,
                                                  show_project:,
                                                  show_subject:,
                                                  show_status:,
                                                  status_scheme:,
-                                                 font_size:))
+                                                 font_size:,
+                                                 wrap:))
     end
   end
 end