Skip to content

fix chat message styling #470

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
iceljc merged 1 commit into from
Jul 14, 2026
Merged

fix chat message styling #470

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
7 changes: 7 additions & 0 deletions src/lib/styles/pages/_chat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1465,6 +1465,13 @@

.cb-conv {
padding: 1rem;
display: flex;
flex-direction: column;
min-height: 100%;

Comment on lines +1468 to +1471

@qodo-code-review qodo-code-review Bot Jul 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Remediation recommended

1. Extra scroll from min-height 🐞 Bug ≡ Correctness

.cb-conv adds min-height: 100% while keeping padding: 1rem; with default `box-sizing:
content-box`, the padding is added on top of the min-height, making the container taller than its
scroll parent and introducing unwanted blank scroll space.
Agent Prompt 
### Issue description
`.cb-conv` has `min-height: 100%` and `padding: 1rem`. With default `box-sizing: content-box`, the element’s padding increases its outer size beyond 100% of the parent, which can create a blank scroll gap inside the scroll container.

### Issue Context
`.cb-conv` is rendered as a direct child of `.cb-msgs-scroll` (the overflow-y:scroll container).

### Fix Focus Areas
- src/lib/styles/pages/_chat.scss[1466-1475]

### Proposed fix
Add `box-sizing: border-box;` to `.cb-conv` (or adjust `min-height` to account for padding, e.g. `min-height: calc(100% - 2rem)`).

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

& > :first-child {
margin-top: auto;
}
Comment on lines +1472 to +1474

@qodo-code-review qodo-code-review Bot Jul 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Informational

2. Brittle first-child spacing 🐞 Bug ⚙ Maintainability

The new & > :first-child { margin-top: auto; } will apply to whatever becomes the first direct
child of .cb-conv, so inserting any new element before the message list will unexpectedly be
pushed downward and break the intended bottom-alignment behavior.
Agent Prompt 
### Issue description
The selector `& > :first-child` is DOM-order-dependent and can misapply `margin-top: auto` if a new direct child is inserted before the message list.

### Issue Context
The current first child is `<ul class="cb-conv-list">`, so the rule works today but is fragile.

### Fix Focus Areas
- src/lib/styles/pages/_chat.scss[1466-1475]
- src/routes/chat/[agentId]/[conversationId]/chat-box.svelte[1966-1969]

### Proposed fix
Replace `& > :first-child` with a stable target, e.g. `& > .cb-conv-list { margin-top: auto; }`.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

}


Expand Down
Loading