feat(web): split cut badge lengths

CutList.Web/Components/Pages/Jobs/Edit.razor

@@ -1162,8 +1162,12 @@ else
                                                 <td>
                                                     @foreach (var item in entry.Bin.Items)
                                                     {
-                                                        <span class="badge me-1 mb-1 fs-6" style="background-color: #6c8ebf; font-weight: 500;">
+                                                        <span class="badge me-1 mb-1 fs-6 cut-part-badge">
-                                                            @(string.IsNullOrWhiteSpace(item.Name) ? ArchUnits.FormatFromInches(item.Length) : $"{item.Name} ({ArchUnits.FormatFromInches(item.Length)})")
+                                                            @if (!string.IsNullOrWhiteSpace(item.Name))
+                                                            {
+                                                                <span class="cut-part-badge-name">@item.Name</span>
+                                                            }
+                                                            <span class="cut-part-badge-length">@ArchUnits.FormatFromInches(item.Length)</span>
                                                         </span>
                                                     }
                                                 </td>

CutList.Web/wwwroot/css/app.css

@@ -272,6 +272,11 @@ a, .btn-link { color: var(--accent-dark); }
 .table-actions .btn { align-items: center; display: inline-flex; justify-content: center; min-height: 2rem; min-width: 2rem; padding: .35rem .45rem; }
 .alert { border-radius: .4rem; border-width: 1px; }
 
+/* Results cut badges keep the part number and its length visually distinct. */
+.cut-part-badge { background-color: #6c8ebf; display: inline-flex; font-weight: 500; overflow: hidden; padding: 0; }
+.cut-part-badge-name { padding: .35em .55em; }
+.cut-part-badge-length { background-color: #4c6680; padding: .35em .55em; }
+
 /* Overview */
 .overview-header { align-items: end; border-bottom: 1px solid var(--line); display: flex; gap: 2rem; justify-content: space-between; padding-bottom: 2rem; }
 .overview-header h1 { margin: .4rem 0 .75rem; max-width: 14ch; }

tests/test_cut_badge_format.py

@@ -0,0 +1,38 @@
+"""Focused regression checks for split part-number and length cut badges."""
+
+from __future__ import annotations
+
+import unittest
+from pathlib import Path
+
+REPO_ROOT = Path(__file__).resolve().parents[1]
+JOB_EDITOR = REPO_ROOT / "CutList.Web/Components/Pages/Jobs/Edit.razor"
+APP_CSS = REPO_ROOT / "CutList.Web/wwwroot/css/app.css"
+
+
+class CutBadgeFormatTests(unittest.TestCase):
+    def test_named_cut_badge_renders_part_number_and_length_in_separate_sections(self) -> None:
+        markup = JOB_EDITOR.read_text()
+        results_start = markup.index("private RenderFragment RenderResultsTab()")
+        cuts_cell_start = markup.index("@foreach (var item in entry.Bin.Items)", results_start)
+        cut_rows_start = markup.rfind("<td>", results_start, cuts_cell_start)
+        cut_rows = markup[cut_rows_start:markup.index("</td>", cuts_cell_start)]
+
+        self.assertIn('class="badge me-1 mb-1 fs-6 cut-part-badge"', cut_rows)
+        self.assertIn('class="cut-part-badge-name"', cut_rows)
+        self.assertIn('class="cut-part-badge-length"', cut_rows)
+        self.assertIn('@item.Name', cut_rows)
+        self.assertIn('@ArchUnits.FormatFromInches(item.Length)', cut_rows)
+        self.assertNotIn('$"{item.Name} (', cut_rows)
+
+    def test_length_section_has_a_darker_background_than_the_part_number_section(self) -> None:
+        css = APP_CSS.read_text()
+
+        self.assertIn('.cut-part-badge {', css)
+        self.assertIn('.cut-part-badge-name {', css)
+        self.assertIn('.cut-part-badge-length {', css)
+        self.assertIn('background-color: #4c6680;', css)
+
+
+if __name__ == "__main__":
+    unittest.main()