Skip to content

better ux for thinkingmode control (more responsive, less likely to overlap message) #2565

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 15, 2025
Merged

better ux for thinkingmode control (more responsive, less likely to overlap message) #2565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/app/aipanel/aimessage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,7 +223,7 @@ export const AIMessage = memo(({ message, isStreaming }: AIMessageProps) => {
className={cn(
"px-2 rounded-lg [&>*:first-child]:!mt-0",
message.role === "user"
? "py-2 bg-accent-800 text-white max-w-[calc(90%-10px)]"
? "py-2 bg-accent-800 text-white max-w-[calc(100%-50px)] @w450:max-w-[calc(100%-105px)]"
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Responsive width constraints updated for better UX.

The user message max-width changes provide more consistent spacing to prevent overlap with other UI elements. The base width is adjusted to calc(100%-50px), and at container widths ≥450px, it further constrains to calc(100%-105px) to accommodate the expanded ThinkingMode button.

Verify that the @w450 container query breakpoint is properly configured in your Tailwind setup:

🏁 Script executed:

#!/bin/bash
# Check Tailwind configuration for container query setup
rg -n "container.*query|@container" tailwind.config.* 2>/dev/null || echo "No tailwind.config found, checking for Tailwind v4 setup..."
rg -n "containerQueries|container-queries" package.json

Length of output: 59

I need to search more broadly for the Tailwind configuration in this codebase. Let me gather additional information:

🏁 Script executed:

#!/bin/bash
# Find tailwind config file with various extensions
fd -e js -e ts -e cjs -e mjs "tailwind\.config" . 2>/dev/null | head -20

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Check package.json for Tailwind and container-queries
cat package.json | grep -A 5 -B 5 "tailwind\|container-queries" 2>/dev/null

Length of output: 1216

🏁 Script executed:

#!/bin/bash
# Search for @w450 usage in the codebase
rg -n "@w450" . 2>/dev/null

Length of output: 309

🏁 Script executed:

#!/bin/bash
# Look for container query configuration patterns
rg -n "containers|@container" frontend/ --type=tsx --type=ts -C 3 2>/dev/null | head -50

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Check the actual file being reviewed
cat frontend/app/aipanel/aimessage.tsx | sed -n '220,235p'

Length of output: 806

🏁 Script executed:

#!/bin/bash
# Search for tailwind config in package.json or other non-standard locations
cat package.json | grep -i "tailwind" | head -20

Length of output: 150

🏁 Script executed:

#!/bin/bash
# Find all tailwind.config references and CSS files
fd "\.config\." . --type f 2>/dev/null | grep -i tailwind
fd "tailwind\.css\|globals\.css" . --type f 2>/dev/null

Length of output: 0

🏁 Script executed:

#!/bin/bash
# Search for where @w450 might be defined (CSS, schema, type defs)
rg -n "w450|containerQueries|container.*query" . --type=json --type=js --type=ts 2>/dev/null | grep -v node_modules | head -30

Length of output: 309

🏁 Script executed:

#!/bin/bash
# Look for CSS files with custom breakpoint or container definitions
find . -name "*.css" -type f 2>/dev/null | grep -v node_modules | head -10
cat $(find . -name "*.css" -type f 2>/dev/null | grep -v node_modules | head -1)

Length of output: 678

🏁 Script executed:

#!/bin/bash
# Check if there's inline tailwind config in vite.config or similar
fd "vite\.config|next\.config" . -e ts -e js 2>/dev/null | head -5

Length of output: 59

🏁 Script executed:

#!/bin/bash
# Check the tailwindsetup.css file for custom breakpoints
cat frontend/tailwindsetup.css

Length of output: 3062

🏁 Script executed:

#!/bin/bash
# Check vite config for Tailwind theme configuration
cat tsunami/frontend/vite.config.ts

Length of output: 886

🏁 Script executed:

#!/bin/bash
# Also check electron vite config
cat electron.vite.config.ts

Length of output: 6061

🌐 Web query:

Tailwind v4 container query syntax @theme custom breakpoints

💡 Result:

Short summary + examples:

  • Turn an element into a container with @container, then use container-query variants that start with @ (e.g. @sm, @md, @max-md). You can also use @Min-[] / @max-[] arbitrary values and named containers like @container/foo with variants @sm/foo. [1][2]

  • Customize container breakpoints in your CSS with @theme using --container-* variables (and media breakpoints with --breakpoint-*). Example: define new container sizes or override defaults. [1][2]

Examples

  1. Basic container query
<style type="text/tailwindcss"> @import "tailwindcss"; </style>
...
(Here @md applies when the parent container reaches the md container size.) [1][3]
  1. Max / range / arbitrary
...
[1][3]
  1. Named container
...
[1][2]
  1. Define custom container breakpoints via @theme
<style type="text/tailwindcss"> @import "tailwindcss"; @theme { --container-8xl: 96rem; /* or reset all and define your own: --container-*: initial; --container-tablet: 20rem; --container-laptop: 32rem; */ } </style>

Then use @8XL or @tablet as container variants. [1][2]

Notes

  • Tailwind v4 includes built-in container query support (no plugin needed). [3]
  • Use rem for consistency with default breakpoints to avoid ordering surprises, or use arbitrary @min/ @max values for one-offs. [1][2]

Sources
[1] Tailwind CSS docs — Responsive design / Container queries.
[2] StackOverflow discussion: using @container and customizing --container-* in Tailwind v4.
[3] Tailwind v4 beta notes (container query support in core).

🌐 Web query:

Tailwind v4.1 @container @w450 syntax how does it work

💡 Result:

Short answer: Tailwind v4.1 uses @container to turn an element into a CSS Container and then container-query variants to apply utilities based on the parent container’s size. You can use the built‑in named container breakpoints (e.g. @sm, @md, @lg) and also arbitrary container-query ranges with bracket syntax (e.g. @Min-[450px], @max-[28rem]) to target specific container widths.

How it works (example):

  • Make parent a container:
    ...
  • Use container-query variants on children:

    @container-aware text

  • Use an arbitrary width test:

    becomes larger when parent ≥ 450px

Notes:

  • @Min-* / @max-* variants map to container query min-width / max-width; you can stack them to make ranges (@Min-[320px]:@max-[600px]:...).
  • The arbitrary-bracket form follows Tailwind’s arbitrary-value syntax (square brackets) and works the same for container queries as for breakpoint/utility values.

Sources: Tailwind v4 container-query docs and release notes (container queries, @min/@max variants) and examples of arbitrary container-query usage. [1][2][3]

References
[1] Tailwind v4 container-query support & examples (official v4 docs/release notes).
[2] Tailwind docs: container / sizing utilities (shows @container usage and @max/@min variants).
[3] Examples / community threads showing arbitrary @Min-[...] usage for container queries.

@w450 container query variants will not work—@container directive is missing from component hierarchy.

While the @w450 breakpoint is properly defined in frontend/tailwindsetup.css as --container-w450: 450px; and Tailwind v4.1.17 is correctly configured, container query variants like @w450:max-w-[calc(100%-105px)] (line 226) and @w450:inline (line 75) require a parent element marked with @container. A search of the codebase found no @container directive anywhere, meaning these responsive constraints will be silently ignored and never activate.

Add @container to an appropriate parent element in the component hierarchy, or remove the @w450: variants if container queries are not intended.

🤖 Prompt for AI Agents 
In frontend/app/aipanel/aimessage.tsx around line 226, the Tailwind container
query variants like "@w450:max-w-[calc(100%-105px)]" (and "@w450:inline" at line
75) won't work because no ancestor element is marked with @container; add an
appropriate @container directive to a parent wrapper (for example the component
root or a nearby container that wraps the message elements) so the @w450
container queries can match, or if container queries are not desired remove the
@w450: variants; ensure the chosen parent is high enough in the component
hierarchy to cover these elements and that the container's inline size (or block
size if used) will trigger the defined --container-w450 breakpoint.

: "min-w-[min(100%,500px)]"
)}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/app/aipanel/aipanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -464,7 +464,7 @@ const AIPanelComponentInner = memo(() => {
ref={containerRef}
data-waveai-panel="true"
className={cn(
"bg-gray-900 flex flex-col relative",
"@container bg-gray-900 flex flex-col relative",
model.inBuilder ? "mt-0 h-full" : "mt-1 h-[calc(100%-4px)]",
(isDragOver || isReactDndDragOver) && "bg-gray-800 border-accent",
isFocused ? "border-2 border-accent" : "border-2 border-transparent"
Expand Down
2 changes: 1 addition & 1 deletion frontend/app/aipanel/aipanelheader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const AIPanelHeader = memo(() => {
};

return (
<div className="@container py-2 pl-3 pr-1 @xs:p-2 @xs:pl-4 border-b border-gray-600 flex items-center justify-between min-w-0">
<div className="py-2 pl-3 pr-1 @xs:p-2 @xs:pl-4 border-b border-gray-600 flex items-center justify-between min-w-0">
<h2 className="text-white text-sm @xs:text-lg font-semibold flex items-center gap-2 flex-shrink-0 whitespace-nowrap">
<i className="fa fa-sparkles text-accent"></i>
Wave AI
Expand Down
10 changes: 8 additions & 2 deletions frontend/app/aipanel/thinkingmode.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
// SPDX-License-Identifier: Apache-2.0

import { atoms } from "@/app/store/global";
import { cn } from "@/util/util";
import { useAtomValue } from "jotai";
import { memo, useRef, useState } from "react";
import { WaveAIModel } from "./waveai-model";
Expand Down Expand Up @@ -64,11 +65,16 @@ export const ThinkingLevelDropdown = memo(() => {
<div className="relative" ref={dropdownRef}>
<button
onClick={() => setIsOpen(!isOpen)}
className="flex items-center gap-1.5 px-2 py-1 text-xs text-gray-300 hover:text-white bg-gray-800/50 hover:bg-gray-700/50 rounded transition-colors cursor-pointer border border-gray-600/50"
className={cn(
"group flex items-center gap-1.5 px-2 py-1 text-xs text-gray-300 hover:text-white rounded transition-colors cursor-pointer border border-gray-600/50",
isOpen ? "bg-gray-700" : "bg-gray-800/50 hover:bg-gray-700"
)}
title={`Thinking: ${currentMetadata.name}`}
>
<i className={`fa ${currentMetadata.icon} text-[10px]`}></i>
<span className="text-[11px]">{currentMetadata.name}</span>
<span className={`text-[11px] ${isOpen ? "inline" : "hidden group-hover:inline @w450:inline"}`}>
{currentMetadata.name}
</span>
<i className="fa fa-chevron-down text-[8px]"></i>
</button>

Expand Down
1 change: 1 addition & 0 deletions frontend/tailwindsetup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
--ansi-brightcyan: #b7b8cb;
--ansi-brightwhite: #f0f0f0;

--container-w450: 450px;
--container-xs: 300px;
--container-xxs: 200px;
--container-tiny: 120px;
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading