From 62adfbb638bb895b553bdc382ec1a54cba2e2bd6 Mon Sep 17 00:00:00 2001
From: eastagiletracker <310448263+eastagiletracker@users.noreply.github.com>
Date: Thu, 1 Oct 2026 10:24:28 +0700
Subject: [PATCH] Apply markdown styles to the extra info preview

---
 app/assets/stylesheets/stories.scss  |  3 +-
 spec/features/stories_manage_spec.rb | 43 ++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/stories.scss b/app/assets/stylesheets/stories.scss
index ce3bed27..48aed9b3 100644
--- a/app/assets/stylesheets/stories.scss
+++ b/app/assets/stylesheets/stories.scss
@@ -12,7 +12,8 @@
 
 .story-description,
 .extra-info,
-.story_preview {
+.story_preview,
+.extra_info_preview {
   margin-bottom: 25px;
   font-size: 15px;
   p {
diff --git a/spec/features/stories_manage_spec.rb b/spec/features/stories_manage_spec.rb
index 316d7f41..02a4492c 100644
--- a/spec/features/stories_manage_spec.rb
+++ b/spec/features/stories_manage_spec.rb
@@ -283,6 +283,49 @@
       end
     end
 
+    it "styles the extra information preview the same way as the description preview" do
+      visit project_path(id: project.id)
+      click_link "Add a Story"
+
+      content = <<~CONTENT
+        Some **bold** and _italic_ text.
+
+        * first item
+        * second item
+      CONTENT
+
+      fill_in "story[description]", with: content
+      fill_in "story[extra_info]", with: content
+
+      expect(page).to have_selector(".story_preview .content strong", text: "bold")
+      expect(page).to have_selector(".extra_info_preview .content strong", text: "bold")
+
+      computed_styles = lambda do |preview|
+        evaluate_script(<<~JS)
+          (function() {
+            var content = document.querySelector(".#{preview} .content");
+            var style = function(selector, property) {
+              return window.getComputedStyle(content.querySelector(selector))[property];
+            };
+            return {
+              strong: style("strong", "fontWeight"),
+              em: style("em", "fontStyle"),
+              list: style("ul", "listStyleType"),
+              paragraph: style("p", "marginTop")
+            };
+          })()
+        JS
+      end
+
+      description_styles = computed_styles.call("story_preview")
+      extra_info_styles = computed_styles.call("extra_info_preview")
+
+      expect(description_styles["strong"]).to eq "700"
+      expect(description_styles["em"]).to eq "italic"
+      expect(description_styles["list"]).to eq "circle"
+      expect(extra_info_styles).to eq description_styles
+    end
+
     it "debounces the requests to update the preview to not flood the server" do
       renderer = double(:markdown_renderer)
       allow(renderer).to receive(:render).and_return("<span>preview</span>")