fix(wardrobe): keep item detail actions visible with long names

[salah153]

Description

The item detail dialog header drops action buttons when an item has a long
name. The edit control disappeared on my wardrobe, and a longer name took its
neighbours with it.

DialogTitle carried max-w-[45%] sm:max-w-none, so from sm up the title
had no cap. A flex item claims its content width before a flex-1 sibling
does, so the title took the space the actions row needed and the row
collapsed. The row hides its scrollbar too, so nothing suggests the missing
buttons are still scrolled off to the right.

The existing comment already describes this failure for narrow screens, where
a 45% cap handles it. That cap was not applied at wider breakpoints.

The fix leaves mobile behaviour alone and swaps the priority from sm up: the
title becomes the flexible item and the actions row is sized to its content,
so every action stays visible and the name truncates.

Related Issue

No issue filed. Reproduction is in the Testing section below.

Type of Change

• Bug fix (non-breaking change that fixes an issue)

Checklist

• I have read the CONTRIBUTING guide
• My code follows the project's coding style
• I have added tests that prove my fix/feature works
• New and existing tests pass locally
• I have updated documentation as needed
• My changes don't introduce new warnings or errors

No test is included. This is a Tailwind class change and I could not see an
existing suite it would fit into. Happy to add one if you have a preferred
approach for layout regressions.

Testing

Built the frontend image from this branch and ran it against the same backend
and the same item as the released build, so the only difference between the
two screenshots below is this change. The item is named
"Brandon PantBrandon PantBrandon Pant" and has nine actions available.

Test Environment

• Docker Compose

Tests Performed

• Released build: the title renders at full width and only 5 of the 9 actions
  are visible. Remove background, undo background removal, replace image and
  edit are all pushed out of the row.
• This branch: the title truncates and all 9 actions are visible, plus close.
• Short names render as before.

I first tried removing sm:max-w-none so the 45% cap applied at every width.
That was not enough: the title truncated, but with every conditional action
rendered (remove background and undo background removal both present), edit
and replace-image were still clipped. Sizing the actions row to its content
from sm up is what fixes it.

Screenshots (if applicable)

Before:

After:

Additional Notes

The action row keeps overflow-x-auto below sm, so the phone behaviour the
original comment protects is preserved.

Summary by Sourcery

Bug Fixes:

• Keep all item detail dialog actions visible on wider screens when item names are long by truncating the title instead of allowing it to displace the actions.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adjusts responsive flex sizing in the item detail dialog header: wide-screen titles now yield space to a content-sized action row and truncate long names, while mobile scrolling and reachability behavior remain unchanged.

File-Level Changes

Change	Details	Files
Rebalances header flex sizing at wider breakpoints so long item names truncate without displacing detail actions.	Makes the title flexible from sm upward while retaining the existing mobile width cap. Sizes the actions container to its content from sm upward, while preserving horizontal scrolling on smaller screens. Updates the inline explanation of responsive sizing and overflow behavior.	frontend/components/item-detail-dialog.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[github-actions]

Thanks for your first pull request to Wardrowbe! Please make sure you've read the CONTRIBUTING guide, especially the PR title format section. A maintainer will review this soon.

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

Sourcery assessment

Approved.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook