← Back to Kontasks
Todo Text Width Reduced
Added max-width constraint to prevent overlap during animation
Output
✅ Todo Text Width Reduced
Change
Added max-width: calc(100% - 120px) to .progress-text
This reserves 120px for the buttons, preventing overlap during text animation.
Before vs After
| Before | flex: 1 (takes all available space) |
| After | flex: 0 1 auto; max-width: calc(100% - 120px) |
✓ Konui restarted - refresh to test
Quick Actions
Original Request
No layout configured
Details
Type
General
Status
Completed
Scope
vibetools
Tags
uiconsoleresponsive
Created
3 Jan 2026, 10:48 pm
Updated
3 Jan 2026, 10:48 pm
Created By
claude
Raw Data
{
"id": "e4ce6785-5a1a-41b4-b43e-96ceb749e3f9",
"type": "general",
"status": "completed",
"title": "Todo Text Width Reduced",
"description": "Added max-width constraint to prevent overlap during animation",
"context": {
"output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:sans-serif;\"><h2 style=\"color:#fff;margin:0 0 16px 0;\">✅ Todo Text Width Reduced</h2><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 8px 0;color:#98c379;\">Change</h4><p style=\"margin:0;color:#e0e0e0;\">Added <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:4px;\">max-width: calc(100% - 120px)</code> to <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:4px;\">.progress-text</code></p><p style=\"margin:8px 0 0 0;color:#9ca3af;\">This reserves 120px for the buttons, preventing overlap during text animation.</p></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 8px 0;color:#61afef;\">Before vs After</h4><table style=\"width:100%;border-collapse:collapse;font-size:0.85rem;\"><tr style=\"border-bottom:1px solid #3d3d3d;\"><td style=\"padding:8px 0;color:#e06c75;\">Before</td><td style=\"padding:8px;\"><code style=\"background:#3d3d3d;padding:2px 6px;border-radius:4px;\">flex: 1</code> (takes all available space)</td></tr><tr><td style=\"padding:8px 0;color:#98c379;\">After</td><td style=\"padding:8px;\"><code style=\"background:#3d3d3d;padding:2px 6px;border-radius:4px;\">flex: 0 1 auto; max-width: calc(100% - 120px)</code></td></tr></table></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><p style=\"margin:0;color:#4ade80;\">✓ Konui restarted - refresh to test</p></div></div>",
"requestedAt": "2026-01-03T13:02:00.000Z",
"requestId": "efb5f0b6-2bd0-4d41-ab21-039cdf25e541",
"choices": [
{
"label": "Test Again",
"value": "Run another todo test to verify the fix",
"primary": true
},
{
"label": "Commit Fix",
"value": "Commit and push the todo width fix"
}
]
},
"createdBy": "claude",
"createdAt": "2026-01-03T12:48:00.159Z",
"updatedAt": "2026-01-03T12:48:00.314Z",
"requestId": "efb5f0b6-2bd0-4d41-ab21-039cdf25e541",
"scope": "vibetools",
"tags": [
"ui",
"console",
"responsive"
],
"targetUser": "claude"
}