#8342: Fix debug interface CSS layout issues

## Problem The debug/logging interface had CSS issues that made it nearly unusable: - The grid layout prioritized an empty sidebar (200px minimum) over the main content area - Code blocks and JSON output were right-aligned instead of left-aligned - Debug information was squished into a narrow column, making logs difficult to read ## Solution Fixed two CSS rules in `ui/src/styles/components.css`: 1. **`.list-item`**: Changed `grid-template-columns` from `minmax(0, 1fr) minmax(200px, 260px)` to `auto 1fr` to prioritize content over sidebar 2. **`.list-meta`**: Changed `text-align` from `right` to `left` for proper code/JSON alignment ## Testing - Tested locally with Ollama integration on macOS - Verified debug interface now displays readable JSON output with proper layout - Built UI with `pnpm ui:build` and confirmed changes compile correctly ## Impact - Improves readability of execution logs and debug output - Makes the debug interface actually usable for troubleshooting - No breaking changes - purely visual/layout improvements <!-- greptile_comment --> <h2>Greptile Overview</h2> <h3>Greptile Summary</h3> This PR adjusts shared list UI styles in `ui/src/styles/components.css` to improve the debug/logging interface layout: it changes `.list-item`’s grid column sizing and makes `.list-meta` left-aligned so JSON/code output reads more naturally. The main thing to double-check is that the new `grid-template-columns: auto 1fr` matches the actual DOM order of “main content” vs “meta/sidebar”; if the main content is the first column, `auto 1fr` can unintentionally prioritize the sidebar width (especially with `.list-meta { min-width: 200px; }`). Additionally, because `.list-meta` is a shared class used in other list contexts, the alignment change may have wider UI impact than intended unless scoped to the debug-specific code/JSON elements. <h3>Confidence Score: 4/5</h3> - This PR is likely safe to merge, but the grid column order change could produce unintended layout regressions depending on DOM structure. - Changes are limited to two CSS rules, but they target shared selectors (`.list-item`, `.list-meta`) that are reused across the UI; `auto 1fr` is sensitive to which column contains the sidebar/meta content, and `text-align` changes can affect other list views. - ui/src/styles/components.css <!-- greptile_other_comments_section --> _{(2/5) Greptile learns from your feedback when you react with thumbs up/down!} <!-- /greptile_comment -->