fix(web): responsive chat header selects on mobile #98

2026-05-20T08:54:35-04:00

jasoncouture commented

2026-05-20 08:54:35 -04:00

(Migrated from github.com)

Summary

Header was a single non-wrapping flex row with content-sized selects; two selects plus the action buttons overflowed on narrow viewports after the session selector landed.
Allow .chat-header to wrap, let selects shrink (flex: 1 1 8rem, min-width: 0, max-width: 16rem cap on desktop).
Under 480px, selects stack full-width and the action group flows onto its own line.

Test plan

Load /chat at desktop width — agent + session selects sit side-by-side with action buttons on the right.
Narrow viewport to ~360–480px — selects stack full-width, action buttons wrap underneath without horizontal overflow.

## Summary - Header was a single non-wrapping flex row with content-sized selects; two selects plus the action buttons overflowed on narrow viewports after the session selector landed. - Allow `.chat-header` to wrap, let selects shrink (`flex: 1 1 8rem`, `min-width: 0`, `max-width: 16rem` cap on desktop). - Under 480px, selects stack full-width and the action group flows onto its own line. ## Test plan - [ ] Load `/chat` at desktop width — agent + session selects sit side-by-side with action buttons on the right. - [ ] Narrow viewport to ~360–480px — selects stack full-width, action buttons wrap underneath without horizontal overflow.

github-actions[bot] commented

2026-05-20 08:56:21 -04:00

(Migrated from github.com)

Package	Line Rate	Branch Rate	Complexity	Health
LlamaShears.Core.Eventing	92%	88%	58	✔
LlamaShears.Core.Abstractions	51%	33%	464	➖
LlamaShears.Api	30%	30%	475	❌
LlamaShears.Provider.Ollama	44%	28%	188	❌
LlamaShears.Core.Eventing.Extensions	100%	100%	1	✔
LlamaShears.Core	45%	42%	1540	❌
LlamaShears.Provider.Onnx.Embeddings	37%	38%	72	❌
LlamaShears.Provider.OpenAI	66%	65%	229	➖
LlamaShears.Api.Web	1%	1%	482	❌
LlamaShears.Hosting	33%	21%	27	❌
LlamaShears.Plugins	0%	100%	1	❌
LlamaShears.Core.Eventing	90%	78%	58	✔
LlamaShears	52%	36%	25	➖
LlamaShears.Plugins.Host	34%	24%	36	❌
LlamaShears.Core.Abstractions	44%	23%	464	❌
LlamaShears.Api	6%	2%	475	❌
LlamaShears.Provider.Ollama	3%	1%	188	❌
LlamaShears.IntegrationTests.Fixtures	73%	57%	64	➖
LlamaShears.Core.Eventing.Extensions	100%	100%	1	✔
StrangeSoft.Plugins.Host	20%	21%	87	❌
LlamaShears.Core	43%	29%	1540	❌
LlamaShears.Provider.Onnx.Embeddings	3%	0%	72	❌
LlamaShears.Provider.OpenAI	2%	0%	229	❌
LlamaShears.Api.Web	20%	9%	482	❌
LlamaShears.Hosting	26%	8%	27	❌
LlamaShears.Plugins	0%	100%	1	❌
LlamaShears.Core.Eventing	87%	74%	58	✔
LlamaShears	52%	36%	25	➖
LlamaShears.Plugins.Host	34%	24%	36	❌
LlamaShears.Core.Abstractions	34%	21%	464	❌
LlamaShears.Api	7%	3%	475	❌
LlamaShears.Provider.Ollama	3%	1%	188	❌
LlamaShears.IntegrationTests.Fixtures	70%	52%	64	➖
LlamaShears.Core.Eventing.Extensions	100%	100%	1	✔
StrangeSoft.Plugins.Host	20%	21%	87	❌
LlamaShears.Core	31%	19%	1540	❌
LlamaShears.Provider.Onnx.Embeddings	3%	0%	72	❌
LlamaShears.Provider.OpenAI	2%	0%	229	❌
LlamaShears.Api.Web	17%	7%	482	❌
LlamaShears.Hosting	26%	8%	27	❌
LlamaShears.Analyzers.CodeFixes	85%	69%	60	✔
LlamaShears.Analyzers	88%	76%	199	✔
Summary	45% (11433 / 34836)	36% (2477 / 10361)	11293	❌

Package | Line Rate | Branch Rate | Complexity | Health -------- | --------- | ----------- | ---------- | ------ LlamaShears.Core.Eventing | 92% | 88% | 58 | ✔ LlamaShears.Core.Abstractions | 51% | 33% | 464 | ➖ LlamaShears.Api | 30% | 30% | 475 | ❌ LlamaShears.Provider.Ollama | 44% | 28% | 188 | ❌ LlamaShears.Core.Eventing.Extensions | 100% | 100% | 1 | ✔ LlamaShears.Core | 45% | 42% | 1540 | ❌ LlamaShears.Provider.Onnx.Embeddings | 37% | 38% | 72 | ❌ LlamaShears.Provider.OpenAI | 66% | 65% | 229 | ➖ LlamaShears.Api.Web | 1% | 1% | 482 | ❌ LlamaShears.Hosting | 33% | 21% | 27 | ❌ LlamaShears.Plugins | 0% | 100% | 1 | ❌ LlamaShears.Core.Eventing | 90% | 78% | 58 | ✔ LlamaShears | 52% | 36% | 25 | ➖ LlamaShears.Plugins.Host | 34% | 24% | 36 | ❌ LlamaShears.Core.Abstractions | 44% | 23% | 464 | ❌ LlamaShears.Api | 6% | 2% | 475 | ❌ LlamaShears.Provider.Ollama | 3% | 1% | 188 | ❌ LlamaShears.IntegrationTests.Fixtures | 73% | 57% | 64 | ➖ LlamaShears.Core.Eventing.Extensions | 100% | 100% | 1 | ✔ StrangeSoft.Plugins.Host | 20% | 21% | 87 | ❌ LlamaShears.Core | 43% | 29% | 1540 | ❌ LlamaShears.Provider.Onnx.Embeddings | 3% | 0% | 72 | ❌ LlamaShears.Provider.OpenAI | 2% | 0% | 229 | ❌ LlamaShears.Api.Web | 20% | 9% | 482 | ❌ LlamaShears.Hosting | 26% | 8% | 27 | ❌ LlamaShears.Plugins | 0% | 100% | 1 | ❌ LlamaShears.Core.Eventing | 87% | 74% | 58 | ✔ LlamaShears | 52% | 36% | 25 | ➖ LlamaShears.Plugins.Host | 34% | 24% | 36 | ❌ LlamaShears.Core.Abstractions | 34% | 21% | 464 | ❌ LlamaShears.Api | 7% | 3% | 475 | ❌ LlamaShears.Provider.Ollama | 3% | 1% | 188 | ❌ LlamaShears.IntegrationTests.Fixtures | 70% | 52% | 64 | ➖ LlamaShears.Core.Eventing.Extensions | 100% | 100% | 1 | ✔ StrangeSoft.Plugins.Host | 20% | 21% | 87 | ❌ LlamaShears.Core | 31% | 19% | 1540 | ❌ LlamaShears.Provider.Onnx.Embeddings | 3% | 0% | 72 | ❌ LlamaShears.Provider.OpenAI | 2% | 0% | 229 | ❌ LlamaShears.Api.Web | 17% | 7% | 482 | ❌ LlamaShears.Hosting | 26% | 8% | 27 | ❌ LlamaShears.Analyzers.CodeFixes | 85% | 69% | 60 | ✔ LlamaShears.Analyzers | 88% | 76% | 199 | ✔ **Summary** | **45%** (11433 / 34836) | **36%** (2477 / 10361) | **11293** | ❌

copilot-pull-request-reviewer[bot] (Migrated from github.com) reviewed

2026-05-20 08:56:51 -04:00

copilot-pull-request-reviewer[bot] (Migrated from github.com) left a comment

Pull request overview

Improves the /chat header layout responsiveness by allowing header contents (agent/session selects and action buttons) to wrap on narrow viewports, preventing horizontal overflow after adding the session selector.

Changes:

Allow .chat-header to wrap (flex-wrap: wrap) to avoid overflow on narrow widths.
Make header <select> elements flex/shrinkable with a desktop max-width cap.
Add a @media (max-width: 480px) rule to stack selects and adjust the action button group layout.

Comments suppressed due to low confidence (1)

src/LlamaShears.Api.Web/Components/Chat/ChatHeader.razor.css:32

On small screens, .chat-header-actions may still end up on the same row as a select if the selects are allowed to shrink. If the desired behavior is “actions group flows onto its own line” under 480px, consider also forcing the actions container to take the full row (e.g., flex-basis: 100% / width: 100%) and then align its internal buttons as desired.

    .chat-header-actions {
        margin-left: 0;
        flex-wrap: wrap;
    }

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

## Pull request overview Improves the `/chat` header layout responsiveness by allowing header contents (agent/session selects and action buttons) to wrap on narrow viewports, preventing horizontal overflow after adding the session selector. **Changes:** - Allow `.chat-header` to wrap (`flex-wrap: wrap`) to avoid overflow on narrow widths. - Make header `<select>` elements flex/shrinkable with a desktop max-width cap. - Add a `@media (max-width: 480px)` rule to stack selects and adjust the action button group layout. <details> <summary>Comments suppressed due to low confidence (1)</summary> **src/LlamaShears.Api.Web/Components/Chat/ChatHeader.razor.css:32** * On small screens, `.chat-header-actions` may still end up on the same row as a select if the selects are allowed to shrink. If the desired behavior is “actions group flows onto its own line” under 480px, consider also forcing the actions container to take the full row (e.g., `flex-basis: 100%` / `width: 100%`) and then align its internal buttons as desired. ``` .chat-header-actions { margin-left: 0; flex-wrap: wrap; } ``` </details> --- 💡 <a href="/jasoncouture/llama-shears/new/main?filename=.github/instructions/*.instructions.md" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Add Copilot custom instructions</a> for smarter, more guided reviews. <a href="https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Learn how to get started</a>.

src/LlamaShears.Api.Web/Components/Chat/ChatHeader.razor.css

					
				@ -17,0 +29,4 @@

				    .chat-header-actions {

				        margin-left: 0;

				        flex-wrap: wrap;

				    }

In the <=480px media query, flex-basis: 100% alone doesn’t guarantee the selects will actually render full-width because they still have flex-shrink: 1 from flex: 1 1 8rem and can shrink to share a line with later flex items. If the intent is to force stacking/full-width, set flex-shrink: 0 (or override to flex: 0 0 100% / width: 100%) for the selects at this breakpoint.

This issue also appears on line 29 of the same file.

In the <=480px media query, `flex-basis: 100%` alone doesn’t guarantee the selects will actually render full-width because they still have `flex-shrink: 1` from `flex: 1 1 8rem` and can shrink to share a line with later flex items. If the intent is to force stacking/full-width, set `flex-shrink: 0` (or override to `flex: 0 0 100%` / `width: 100%`) for the selects at this breakpoint. This issue also appears on line 29 of the same file.

Sign in to join this conversation.

No reviewers