"Resource label" overlaps "Resource value" when Layout is Responsive

[edimossilva]

• Scenario

  • On show resource page, when the layout is responsive and the row labels have many letters

• Issue

  • row resource label overlaps resource value.

• Example

• 

• Proposal

  • change the percentage of .attribute-label and .attribute-data from 15%-85% to 20%-80%

• What versions are you running?

  • Rails - 6.0.0
  • administrate - 0.14.0

[sedubois]

I would propose to add CSS to let the label wrap to the next line, otherwise fixing the width percentage might not work for all cases?

[Nucleotide]

I believe by looking at the 'Updated At' it does go to the next line. Long words without any breaks are always annoying.

[sedubois]

Could you try adding overflow-wrap: break-word?

[nickcharlton]

I'd +1 trying break-word. Do you think you could open a PR for this?

[betelgeuse]

I'd +1 trying break-word. Do you think you could open a PR for this?

The thing to be aware of is languages like Finnish that regularly have long words. Any breaking in the middle of the word is less than ideal without adding hyphens in proper places.

[nickcharlton]

That's a good point. Another reason to not use this is that break-word is also deprecated.

A better option might be to drop the value on a line below the label on smaller browser widths which would give us much more space to handle long/compound words.

[sedubois]

overflow-wrap: break-word is not deprecated AFAIK. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap.

[edimossilva]

I believe that changing the percentage is a good approach considering that I will add a min-width to .main-content in #1699
So it is like the real width of .attribute-label will be increased and the real width of .attribute-data column will not be reduced.