HOOD-4391: Fix inline code layout in task lists

engine/app/assets/stylesheets/coplan/application.css

@@ -1673,6 +1673,11 @@ img.avatar {
   cursor: pointer;
 }
 
+.markdown-rendered .task-list-item-content {
+  flex: 1;
+  min-width: 0;
+}
+
 .markdown-rendered .task-list-item input[type="checkbox"] {
   cursor: pointer;
   flex-shrink: 0;

engine/app/helpers/coplan/markdown_helper.rb

@@ -34,7 +34,7 @@ module MarkdownHelper
     # version. Bump it whenever the rendering pipeline changes output for the
     # same input (new tags, attribute changes, checkbox wiring, etc.), or
     # stale HTML will be served from cache.
-    RENDER_CACHE_VERSION = 11
+    RENDER_CACHE_VERSION = 12
 
     # Matches `[@username](mention:username)` where the bracket text and link
     # target encode the same username. Username allows letters, digits, dots,
@@ -218,9 +218,22 @@ def make_checkboxes_interactive(html, content, line_offset: 0)
 
         li.add_class("task-list-item")
 
-        # Wrap li contents in a <label> so the whole text is clickable
+        # Wrap li contents in a <label> so the whole text is clickable. Keep
+        # the rendered task body in one flex item so inline elements such as
+        # <code> participate in normal inline flow instead of becoming
+        # separate columns alongside the checkbox.
         label = Nokogiri::XML::Node.new("label", doc)
-        li.children.each { |child| label.add_child(child) }
+        task_body = Nokogiri::XML::Node.new("span", doc)
+        task_body["class"] = "task-list-item-content"
+
+        li.children.to_a.each do |child|
+          if child == cb
+            label.add_child(child)
+          else
+            task_body.add_child(child)
+          end
+        end
+        label.add_child(task_body)
         li.add_child(label)
 
         ul = li.parent

spec/helpers/coplan/markdown_helper_checkbox_spec.rb

@@ -48,6 +48,17 @@
       expect(label.at_css('input[type="checkbox"]')).to be_present
     end
 
+    it "groups task text and inline markup into a single flex item" do
+      html = helper.render_markdown("- [ ] Before `cards.buyer_id`, verify `CardService` behavior")
+      doc = Nokogiri::HTML::DocumentFragment.parse(html)
+      label = doc.at_css("li.task-list-item label")
+      task_body = label.at_css(".task-list-item-content")
+
+      expect(label.element_children.to_a).to eq([ label.at_css('input[type="checkbox"]'), task_body ])
+      expect(task_body.css("code").map(&:text)).to eq([ "cards.buyer_id", "CardService" ])
+      expect(task_body.text.squish).to eq("Before cards.buyer_id, verify CardService behavior")
+    end
+
     it "handles mixed task and non-task items" do
       md = "- [ ] Task item\n- Regular item"
       html = helper.render_markdown(md)