From adfcb775fb51a4363a9d4cf736a057dc614e226c Mon Sep 17 00:00:00 2001
From: Giancarlo Salamanca <giancarlo@squareup.com>
Date: Fri, 28 Aug 2026 14:27:29 -0400
Subject: [PATCH] HOOD-4391 Fix inline code layout in task lists

---
 .../assets/stylesheets/coplan/application.css |  5 +++++
 engine/app/helpers/coplan/markdown_helper.rb  | 19 ++++++++++++++++---
 .../coplan/markdown_helper_checkbox_spec.rb   | 11 +++++++++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/engine/app/assets/stylesheets/coplan/application.css b/engine/app/assets/stylesheets/coplan/application.css
index 0ded574b..15775cf7 100644
--- a/engine/app/assets/stylesheets/coplan/application.css
+++ b/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;
diff --git a/engine/app/helpers/coplan/markdown_helper.rb b/engine/app/helpers/coplan/markdown_helper.rb
index 0505d6af..b9120cbb 100644
--- a/engine/app/helpers/coplan/markdown_helper.rb
+++ b/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
diff --git a/spec/helpers/coplan/markdown_helper_checkbox_spec.rb b/spec/helpers/coplan/markdown_helper_checkbox_spec.rb
index a066a1bb..eef6b020 100644
--- a/spec/helpers/coplan/markdown_helper_checkbox_spec.rb
+++ b/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)