Fix JSON display mode and tabs alignment regressions

JSON Display Fix:
- Remove inline `style="display: none;"` from .view-json divs in macros.html
- CSS class-based toggle (.show-json) now properly controls visibility
- Affected: todo_list, write_tool, edit_tool, bash_tool macros

Tabs Alignment Fix:
- Update .cell summary to use flex: 1 on .cell-label instead of justify-content: space-between
- Add flex-wrap: wrap to .tool-header, .file-tool-header, .todo-header for better responsiveness
- Add gap: var(--spacing-sm) to .cell summary for consistent spacing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: ShlomoStept

src/claude_code_transcripts/__init__.py

@@ -1433,7 +1433,8 @@ def render_message_with_tool_pairs(
 .thinking p { margin: 8px 0; }
 .assistant-text { margin: 8px 0; }
 .cell { margin: var(--spacing-sm) 0; border-radius: var(--border-radius-md); overflow: visible; }
-.cell summary { cursor: pointer; padding: var(--spacing-sm) var(--spacing-md); display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: var(--font-size-sm); list-style: none; position: sticky; top: var(--sticky-level-0); z-index: 20; background: inherit; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
+.cell summary { cursor: pointer; padding: var(--spacing-sm) var(--spacing-md); display: flex; align-items: center; font-weight: 600; font-size: var(--font-size-sm); list-style: none; position: sticky; top: var(--sticky-level-0); z-index: 20; background: inherit; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); gap: var(--spacing-sm); }
+.cell summary .cell-label { flex: 1; }
 .cell summary::-webkit-details-marker { display: none; }
 .cell summary::before { content: '▶'; font-size: var(--font-size-xs); margin-right: var(--spacing-sm); transition: transform var(--transition-fast); }
 .cell[open] summary::before { transform: rotate(90deg); }
@@ -1458,7 +1459,7 @@ def render_message_with_tool_pairs(
 .cell-copy-btn:focus { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
 .cell-copy-btn.copied { background: var(--accent-green-bg); color: var(--accent-green); border-color: var(--accent-green); }
 .tool-use { background: var(--tool-bg); border: 1px solid var(--tool-border); border-radius: var(--border-radius-md); padding: var(--spacing-md); margin: var(--spacing-md) 0; }
-.tool-header { font-weight: 600; color: var(--accent-purple); margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-sm); position: sticky; top: calc(var(--sticky-level-0) + var(--sticky-level-1)); z-index: 10; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: var(--spacing-xs) 0; }
+.tool-header { font-weight: 600; color: var(--accent-purple); margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-sm); position: sticky; top: calc(var(--sticky-level-0) + var(--sticky-level-1)); z-index: 10; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: var(--spacing-xs) 0; flex-wrap: wrap; }
 .tool-icon { font-size: var(--font-size-lg); }
 .tool-description { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--spacing-sm); font-style: italic; }
 .tool-description p { margin: 0; }
@@ -1495,7 +1496,7 @@ def render_message_with_tool_pairs(
 .file-tool { border-radius: var(--border-radius-md); padding: var(--spacing-md); margin: var(--spacing-md) 0; }
 .write-tool { background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%); border: 1px solid var(--accent-green); }
 .edit-tool { background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.05) 100%); border: 1px solid var(--accent-orange); }
-.file-tool-header { font-weight: 600; margin-bottom: var(--spacing-xs); display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); }
+.file-tool-header { font-weight: 600; margin-bottom: var(--spacing-xs); display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); flex-wrap: wrap; }
 .write-header { color: var(--accent-green); }
 .edit-header { color: var(--accent-orange); }
 .file-tool-icon { font-size: var(--font-size-base); }
@@ -1515,7 +1516,7 @@ def render_message_with_tool_pairs(
 .write-tool .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, 0.08)); }
 .edit-tool .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, rgba(245, 158, 11, 0.08)); }
 .todo-list { background: linear-gradient(135deg, var(--accent-green-bg) 0%, rgba(16, 185, 129, 0.04) 100%); border: 1px solid var(--accent-green); border-radius: var(--border-radius-md); padding: var(--spacing-md); margin: var(--spacing-md) 0; }
-.todo-header { font-weight: 600; color: var(--accent-green); margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); }
+.todo-header { font-weight: 600; color: var(--accent-green); margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); flex-wrap: wrap; }
 .todo-items { list-style: none; margin: 0; padding: 0; }
 .todo-item { display: flex; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border-light); font-size: var(--font-size-sm); }
 .todo-item:last-child { border-bottom: none; }

src/claude_code_transcripts/templates/macros.html

@@ -74,7 +74,7 @@
 {%- endfor -%}
 </ul>
 </div>
-<div class="view-json" style="display: none;">
+<div class="view-json">
 {{ input_json_html|safe }}
 </div>
 </div>
@@ -94,7 +94,7 @@
 <div class="file-tool-fullpath">{{ file_path }}</div>
 <div class="truncatable"><div class="truncatable-content"><pre class="file-content highlight">{{ content|safe }}</pre></div><button class="expand-btn">Show more</button></div>
 </div>
-<div class="view-json" style="display: none;">
+<div class="view-json">
 {{ input_json_html|safe }}
 </div>
 </div>
@@ -117,7 +117,7 @@
 <div class="edit-section edit-new"><div class="edit-label">+</div><pre class="edit-content highlight">{{ new_string|safe }}</pre></div>
 </div><button class="expand-btn">Show more</button></div>
 </div>
-<div class="view-json" style="display: none;">
+<div class="view-json">
 {{ input_json_html|safe }}
 </div>
 </div>
@@ -138,7 +138,7 @@
 {%- endif -%}
 <div class="truncatable"><div class="truncatable-content"><pre class="bash-command">{{ command }}</pre></div><button class="expand-btn">Show more</button></div>
 </div>
-<div class="view-json" style="display: none;">
+<div class="view-json">
 {{ input_json_html|safe }}
 </div>
 </div>

tests/__snapshots__/test_generate_html/TestGenerateHtml.test_generates_index_html.html

@@ -116,7 +116,8 @@
 .thinking p { margin: 8px 0; }
 .assistant-text { margin: 8px 0; }
 .cell { margin: var(--spacing-sm) 0; border-radius: var(--border-radius-md); overflow: visible; }
-.cell summary { cursor: pointer; padding: var(--spacing-sm) var(--spacing-md); display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: var(--font-size-sm); list-style: none; position: sticky; top: var(--sticky-level-0); z-index: 20; background: inherit; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
+.cell summary { cursor: pointer; padding: var(--spacing-sm) var(--spacing-md); display: flex; align-items: center; font-weight: 600; font-size: var(--font-size-sm); list-style: none; position: sticky; top: var(--sticky-level-0); z-index: 20; background: inherit; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); gap: var(--spacing-sm); }
+.cell summary .cell-label { flex: 1; }
 .cell summary::-webkit-details-marker { display: none; }
 .cell summary::before { content: '▶'; font-size: var(--font-size-xs); margin-right: var(--spacing-sm); transition: transform var(--transition-fast); }
 .cell[open] summary::before { transform: rotate(90deg); }
@@ -141,7 +142,7 @@
 .cell-copy-btn:focus { outline: 2px solid var(--accent-blue); outline-offset: 2px; }
 .cell-copy-btn.copied { background: var(--accent-green-bg); color: var(--accent-green); border-color: var(--accent-green); }
 .tool-use { background: var(--tool-bg); border: 1px solid var(--tool-border); border-radius: var(--border-radius-md); padding: var(--spacing-md); margin: var(--spacing-md) 0; }
-.tool-header { font-weight: 600; color: var(--accent-purple); margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-sm); position: sticky; top: calc(var(--sticky-level-0) + var(--sticky-level-1)); z-index: 10; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: var(--spacing-xs) 0; }
+.tool-header { font-weight: 600; color: var(--accent-purple); margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-sm); position: sticky; top: calc(var(--sticky-level-0) + var(--sticky-level-1)); z-index: 10; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); padding: var(--spacing-xs) 0; flex-wrap: wrap; }
 .tool-icon { font-size: var(--font-size-lg); }
 .tool-description { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--spacing-sm); font-style: italic; }
 .tool-description p { margin: 0; }
@@ -178,7 +179,7 @@
 .file-tool { border-radius: var(--border-radius-md); padding: var(--spacing-md); margin: var(--spacing-md) 0; }
 .write-tool { background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%); border: 1px solid var(--accent-green); }
 .edit-tool { background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.05) 100%); border: 1px solid var(--accent-orange); }
-.file-tool-header { font-weight: 600; margin-bottom: var(--spacing-xs); display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); }
+.file-tool-header { font-weight: 600; margin-bottom: var(--spacing-xs); display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); flex-wrap: wrap; }
 .write-header { color: var(--accent-green); }
 .edit-header { color: var(--accent-orange); }
 .file-tool-icon { font-size: var(--font-size-base); }
@@ -198,7 +199,7 @@
 .write-tool .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, 0.08)); }
 .edit-tool .truncatable.truncated::after { background: linear-gradient(to bottom, transparent, rgba(245, 158, 11, 0.08)); }
 .todo-list { background: linear-gradient(135deg, var(--accent-green-bg) 0%, rgba(16, 185, 129, 0.04) 100%); border: 1px solid var(--accent-green); border-radius: var(--border-radius-md); padding: var(--spacing-md); margin: var(--spacing-md) 0; }
-.todo-header { font-weight: 600; color: var(--accent-green); margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); }
+.todo-header { font-weight: 600; color: var(--accent-green); margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); flex-wrap: wrap; }
 .todo-items { list-style: none; margin: 0; padding: 0; }
 .todo-item { display: flex; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border-light); font-size: var(--font-size-sm); }
 .todo-item:last-child { border-bottom: none; }