Place theme toggle inline with control bar buttons

Move the theme toggle button from absolute-positioned to inside
ctrl-actions, right after Clear all. Use fixed width (6.5em) so
the button size stays consistent across Light/Dark/System labels.
The button remains outside CTRL markers for reviewed HTML persistence.

https://claude.ai/code/session_01LEre156k3sMntSx8uGDXRj

Author: claude

FolderDiffIL4DotNet.Tests/Services/HtmlReportGenerateServiceTests.Filtering.cs

@@ -76,9 +76,9 @@ public void GenerateDiffReportHtml_ThemeToggleIsOutsideCtrlMarkers()
             Assert.Contains("cycleTheme()", html);
             Assert.Contains("initTheme()", html);
             int themeBtn = html.IndexOf("id=\"theme-toggle\"", StringComparison.Ordinal);
-            int ctrlStart = html.IndexOf("<!--CTRL-->", StringComparison.Ordinal);
-            Assert.True(themeBtn < ctrlStart,
-                "theme toggle should be OUTSIDE <!--CTRL--> markers so it persists in reviewed HTML");
+            int ctrlEnd = html.IndexOf("<!--/CTRL-->", StringComparison.Ordinal);
+            Assert.True(themeBtn > ctrlEnd,
+                "theme toggle should be AFTER <!--/CTRL--> marker so it persists in reviewed HTML");
         }
 
         [Fact]

Services/HtmlReport/diff_report.css

@@ -124,7 +124,7 @@
       background: transparent; color: var(--color-btn-clear-text);
     }
     .btn-clear:hover { background: var(--color-btn-clear-hover); }
-    .theme-toggle { position: absolute; top: 0.5rem; right: max(1rem, calc(50vw - 50%)); font-size: 12px; padding: 0.3rem 0.8rem; z-index: 101; }
+    .theme-toggle { width: 6.5em; justify-content: center; }
     .save-status { font-size: 12px; color: var(--color-text-secondary); }
     /* ── Review progress bar ───────────────────────────────────────────── */
     .progress-wrap {

Services/HtmlReportGenerateService.cs

@@ -122,9 +122,6 @@ private void WriteHtml(
         private static void AppendControlsBar(TextWriter writer)
         {
             writer.WriteLine("<div class=\"controls\" role=\"toolbar\" aria-label=\"Report controls\">");
-            // Theme toggle is outside CTRL markers so it persists in reviewed HTML
-            // テーマ切替は CTRL マーカー外に配置し reviewed HTML にも残す
-            writer.WriteLine("<button id=\"theme-toggle\" class=\"btn btn-clear theme-toggle\" onclick=\"cycleTheme()\" title=\"Toggle theme (Light / Dark / System)\">\u2699 System</button>");
             writer.WriteLine("<!--CTRL-->");
             writer.WriteLine("<div class=\"ctrl-buttons\">");
             writer.WriteLine("  <div class=\"ctrl-progress\">");
@@ -140,9 +137,12 @@ private static void AppendControlsBar(TextWriter writer)
             writer.WriteLine("    <button class=\"btn btn-clear\" onclick=\"resetFilters()\"><svg aria-hidden=\"true\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" style=\"vertical-align:-1px\"><path d=\"M2 3h12l-4 5v3l-4 2V8z\"/><line x1=\"10\" y1=\"10\" x2=\"15\" y2=\"15\"/><line x1=\"15\" y1=\"10\" x2=\"10\" y2=\"15\"/></svg> " + HtmlEncode("Reset filters") + "</button>");
             writer.WriteLine("    <button class=\"btn btn-clear\" onclick=\"clearAll()\">&#x2715; " + HtmlEncode("Clear all") + "</button>");
             writer.WriteLine("    <span id=\"save-status\" class=\"save-status\" role=\"status\" aria-live=\"polite\"></span>");
+            writer.WriteLine("<!--/CTRL-->");
+            // Theme toggle is outside CTRL markers so it persists in reviewed HTML
+            // テーマ切替は CTRL マーカー外に配置し reviewed HTML にも残す
+            writer.WriteLine("    <button id=\"theme-toggle\" class=\"btn btn-clear theme-toggle\" onclick=\"cycleTheme()\" title=\"Toggle theme (Light / Dark / System)\">\u2699 System</button>");
             writer.WriteLine("  </div>");
             writer.WriteLine("</div>");
-            writer.WriteLine("<!--/CTRL-->");
         }
 
         // ── Filter zone (kept in reviewed HTML for read-only filtering) ───────

doc/samples/diff_report.html

@@ -132,7 +132,7 @@
       background: transparent; color: #1d1d1f;
     }
     .btn-clear:hover { background: var(--color-btn-clear-hover); }
-    .theme-toggle { position: absolute; top: 0.5rem; right: max(1rem, calc(50vw - 50%)); font-size: 12px; padding: 0.3rem 0.8rem; z-index: 101; }
+    .theme-toggle { width: 6.5em; justify-content: center; }
     .save-status { font-size: 12px; color: var(--color-text-secondary); }
     /* ── Review progress bar ───────────────────────────────────────────── */
     .progress-wrap {
@@ -604,7 +604,6 @@
 <body>
 <a href="#main-content" class="skip-link">Skip to main content</a>
 <div class="controls" role="toolbar" aria-label="Report controls">
-<button id="theme-toggle" class="btn btn-clear theme-toggle" onclick="cycleTheme()" title="Toggle theme (Light / Dark / System)">&#x2699; System</button>
 <!--CTRL-->
 <div class="ctrl-buttons">
   <div class="ctrl-progress">
@@ -620,9 +619,10 @@
     <button class="btn btn-clear" onclick="resetFilters()"><svg aria-hidden="true" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" style="vertical-align:-1px"><path d="M2 3h12l-4 5v3l-4 2V8z"/><line x1="10" y1="10" x2="15" y2="15"/><line x1="15" y1="10" x2="10" y2="15"/></svg> Reset filters</button>
     <button class="btn btn-clear" onclick="clearAll()">&#x2715; Clear all</button>
     <span id="save-status" class="save-status" role="status" aria-live="polite"></span>
+<!--/CTRL-->
+    <button id="theme-toggle" class="btn btn-clear theme-toggle" onclick="cycleTheme()" title="Toggle theme (Light / Dark / System)">&#x2699; System</button>
   </div>
 </div>
-<!--/CTRL-->
 <div class="filter-zone" role="search" aria-label="Report filters">
 <div class="ctrl-filter-row">
   <label class="filter-chip"><input type="checkbox" id="filter-unchecked" onchange="applyFilters()"> Unchecked only</label>