🐛 Bug: Bulgarian constant in .copilotKitMessagesFooter breaks chat design

[hejtmii]

♻️ Reproduction Steps

1. Place the chat component into a container with 800px width and 24px padding
2. Configure it with a short initial message
3. Run the app
4. The message(s) have scrollbars displayed !

✅ Expected Behavior

There should be no extra scrollbar displayed unless needed due to the size of the content of the message(s)

❌ Actual Behavior

There is an unwanted scrollbar in the message(s) container

This seems to be caused by the presence of .copilotKitMessagesFooter that has a Bulgarian constant width of 97% (changed from earlier 90% ... also conceptually wrong)

8674da1#r163976396

Expecting specific width of a component making sub-component widths in exact percentages is an anti-pattern, if actually needed, it should use calc 100% - the necessary padding/margin

Alternatively, the layout could be reviewed as a whole, not having to rely on parent-child size relationships (using flex or padding/margin directly on the message component)

𝌚 CopilotKit Version

v1.9.3 but I can see the same value being used in v1.10.2

📄 Logs (Optional)

[linear]

CPK-4098 🐛 Bug: Bulgarian constant in .copilotKitMessagesFooter breaks chat design

[copilotkit-support-bot]

The unwanted scrollbar is caused by the .copilotKitMessagesFooter element having a width of 97% combined with its padding, which creates overflow within the container. The recommended fix is to reduce the width to 94% (or use calc(100% - padding)), as demonstrated in the CopilotKit demo viewer.

Details

Root Cause of the Scrollbar Issue

The unwanted scrollbar is caused by the .copilotKitMessagesFooter element having a width of 97% combined with its padding, which creates overflow within the container:

• Base CSS styling: The footer has display: flex, padding: 0.5rem 0.75rem, and width: 97%
• Width + Padding conflict: The 97% width plus the horizontal padding (0.75rem on each side) exceeds 100% of the container width
• Overflow result: This causes horizontal overflow, triggering the unwanted scrollbar

Best Practice Solution

The CopilotKit codebase itself provides the recommended fix in the demo viewer example:

• Reduce the width to 94% with !important to override the default styling:

.copilotKitMessagesFooter {
  width: 94% !important;
}

Implementation Options

Option 1: Global CSS Override (Recommended)

/* Add to your global CSS file */
.copilotKitMessagesFooter {
  width: 94% !important;
}

Option 2: Component-Specific CSS

/* Add to your component's CSS module or styled component */
:global(.copilotKitMessagesFooter) {
  width: 94% !important;
}

Option 3: Alternative Width Values
If 94% doesn't work perfectly for your layout, you can experiment with:

• width: 95% !important;
• width: 93% !important;
• width: calc(100% - 2rem) !important; (accounting for padding)

Why This Solution Works

• Accounts for padding: The reduced width (94% vs 97%) provides enough space for the horizontal padding
• Prevents overflow: Total width + padding stays within 100% of the container
• Maintains responsive design: Percentage-based width preserves responsiveness
• Proven in production: This exact solution is used in CopilotKit's own demo viewer

Example Implementation:

• Demo Viewer CSS Override - Shows the 94% width fix in action

Source References:

• Base Footer Styles - Original problematic styles
• Messages Component - Footer structure implementation

---

Was this helpful?

If this solution worked for you, please click on the appropriate option below to help us improve:

✅ Issue Solved | ❌ Need more help

[NathanTarbert]

Hey @hejtmii, thanks for reporting this.

A ticket was initiated, and we'll look into this.

[NathanTarbert]

Hey @hejtmii, would you be available to hop on a quick call?
Feel free to book at your convenience - https://cal.com/nathan-tarbert-copilotkit/15min

[NathanTarbert]

Also, have you tried our MCP server to see if you make any progress here?
https://docs.copilotkit.ai/mcp

[hejtmii]

Also, have you tried our MCP server to see if you make any progress here? https://docs.copilotkit.ai/mcp

Not yet, will try. But still feel that your code is conceptually wrong, will book the call

[hejtmii]

Just for the record, we now revert the change in our own CSS to the previous value. But it is still conceptually wrong :-)

.copilotKitMessagesFooter {
  width: 90% !important;
}