Wrap job description text in UI

[josh-jones-cookpad]

Description

When there are longer strings (like URLs) on the job definitions show and index views in the "description" cell, the text can overflow the cell, making it hard to read and get from the index page to the details page. This PR adds some CSS to help improve the UX in this case.

@cookpad/platform-task-force

Screenshots

The "show" view, before:

The "show" view, after:

The "index" view, before:

The "index" view, after:

[Copilot]

Pull request overview

This PR improves the UX of job definition views by adding CSS to properly wrap long text content (such as URLs) in description cells. Previously, long strings would overflow table cells, making content difficult to read and navigation challenging.

• Adds word-wrapping styles to table cells (td and th) to handle long strings
• Enables horizontal scrolling for the box-body container as a fallback
• Applies changes to both index and show views of job definitions

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The td and th selectors have identical CSS rules. Consider combining them to reduce code duplication:

.barbeque_job_definitions_controller .table.table-bordered td,
.barbeque_job_definitions_controller .table.table-bordered th {
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  min-width: 100px;
}

This maintains the same functionality while making the stylesheet more maintainable.

[Copilot]

Using both word-wrap, word-break, and overflow-wrap is redundant. overflow-wrap is the modern standard property, while word-wrap is its legacy alias. Consider using only:

overflow-wrap: break-word;
word-break: break-word;

The word-wrap property can be removed as overflow-wrap provides the same functionality with better modern browser support.

[coord-e]

word-break: break-word and overflow-wrap: break-word seems to be conflicting (maybe overflow-wrap is ignored?)

Has the same effect as overflow-wrap: anywhere combined with word-break: normal, regardless of the actual value of the overflow-wrap property.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/word-break

Also, since word-break: break-word seems to be deprecated, it should be replaced with a combination of other properties

[josh-jones-cookpad]

Thanks for the feedback @coord-e and @copilot ✨

I ran the app locally and stripped back the CSS as much as I could while making sure the UI fix looks the same. It turns out that word-break: break-word and overflow-wrap: break-word are not equivalent, especially in tables, and word-break: break-word actually behaves like overflow-wrap: anywhere, which is what I was looking for 💡 [TIL]

[coord-e]

Thanks!