mirror of
https://github.com/coder/coder.git
synced 2026-11-03 14:21:04 +08:00
Andrew Aquino
023a1c992c
ref DEVEX-449 ## before In `AgentDevcontainerCard`, the devcontainer's display name truncated with an ellipsis--but only when the viewport is <768px (parent has `md:w-full`), which is also when the display name width gets capped at 320px (`max-w-xs`). At larger screen sizes, the display name overlaps with the rebuild button to the right. https://github.com/user-attachments/assets/47af30a2-f446-4b5f-bf63-24afb0532b19 ## after Now, the devcontainer display name fills up as much width as possible at all screen sizes (not just >=768px), and it also gets truncated with an ellipsis at all screen sizes. https://github.com/user-attachments/assets/68579438-6fb5-40ea-93cf-c3814dfaac1a --- (If we have a way to automate resizing screens in Storybook, lmk!) The trick is to set a `min-width` on the text we want to truncate, see this CSS Tricks article: https://css-tricks.com/flexbox-truncated-text/ I changed `max-w-xs` to `min-w-[284px]`. In addition to constraining the display name's width (see "before" above), the `max-width` caused the rebuild button to wrap to the next line if the screen is too narrow to show the display name at that width. This behavior on small screens is preserved. 🙂 However, since the display name's width isn't constrained anymore, it's written out fully if possible, which causes the rebuild button to wrap lines on wider screens if the display name is very long.