Modified CSS So That Text Wrapping Does Not Occur

[DavidResende0]

Found in Services -> Workloads -> VMs and Instances

Fixes: #10465 (2nd issue)

Preview:

[skateman]

@DavidResende0 I need a before/after screenshot to see the differences

[DavidResende0]

Here's the before:

It's also worth noting that different strings will get cutoff and wrapped around in different languages.

[skateman]

This causes the summary screen tables to be not aligned:

I'm not sure if this is something we want...cc @himdel @gtanzillo

[himdel]

This is limited to labels in textual summary tables, so it should be safe if we can make sure the label always fits 👍.

But I'm worried about i18n + long labels not leaving enough space for the actual content. Chinese is probably fine but do we know the longest German label in textual summaries?

[himdel]

Oh, one more issue..

white-space: nowrap;
width: 20% !important;

That's probably an impossible combination, so the browser will always choose to ignore the width and autosize the table anyway (as long as there is a label wider than that). (Leading to the alignment issue David has found.)

[skateman]

But I'm worried about i18n + long labels not leaving enough space for the actual content. Chinese is probably fine but do we know the longest German label in textual summaries?

True, Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft will probably break it, but even Arbeitsunfähigkeitsbescheinigung cc @mzazrivec

[DavidResende0]

After doing some digging I've found the cause of the original issue:

manageiq-ui-classic/app/assets/stylesheets/patternfly_overrides.scss

Lines 313 to 316 in c968fb0

	table.table td:not(.table-view-pf-select) {
	//Force word break but prevent bs-switch from wrapping
	word-break: break-all;
	}

however, this class seems to be used a lot in the code so rather than changing it I think it would be better to make a new class specifically for the textual summary tables. The only issue is I don't know what file renders the tables.

[DavidResende0]

The change I made plus this PR (ManageIQ/react-ui-components#185) should resolve the issue now

[himdel]

LGTM, works with ManageIQ/react-ui-components#185

[miq-bot]

Checked commit DavidResende0@83fe5b6 with ruby 2.6.3, rubocop 0.82.0, haml-lint 0.35.0, and yamllint
0 files checked, 0 offenses detected
Everything looks fine. 🏆