dropdown button with width="full" wider than containing block

[AdelheidF]

Actual Behavior

The dropdown button is wider than its containing block if the button text has no dashes or spaces.
Button uses width="full".

Expected Behavior

text is wrapped

Reproduction Sample

https://codepen.io/afreitag/pen/GRGPdwQ

Reproduction Steps

open codepen and observe. Red box displays block dimensions.

Reproduction Version

next.657

Relevant Info

No response

Regression?

Don't think so

Impact

No response

Esri team

ArcGIS Map Viewer

[geospatialem]

Applicable in the case mentioned above where text has no breaks, such as "BirdObservationCommentBirdObservationComment" and where "_" characters are present, such as "Bird_Observation_Comment_Bird_Observation_Comment".

[AdelheidF]

Could this be part of 1.0?

[benelan]

How smart do you want this to be; are you expecting it to understand word breaks such as, capitalization, underscores, periods, etc.

BirdObservationCommentBirdObservation
Comment

Or just wrap on the overflow

BirdObservationCommentBirdObservationCom
ment

[AdelheidF]

Or just wrap on the overflow

I think this is fine. Don't you do this already in other places like this?

[benelan]

I believe so. Although interestingly, it currently understands hyphens as word breaks and wraps there.

[macandcheese]

FWIW, it breaks in a different way when the button is not the dropdown-trigger:

[geospatialem]

@AdelheidF We're putting this in a list for Franco when he returns, but due to staffing, this one might land in time for the February release. Will post an update a few weeks into 2023.

[geospatialem]

Seeking design expertise for the dropdown button, if wrapping and/or truncating the text should be considered.

[jcfranco]

Installed an update to dropdown on rc that will make it easier to set up truncation in the original use case. You'll need to set 100% width in the dropdown or change its display to block as @Elijbet's suggestion shows. We can't do this reliably for all configurations since it really depends on the way the HTML/CSS is structured. For example, this shows the same issue can be seen with block + button.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified with v2.0.0-rc.2 when calcite-dropdown's width is set to 100% per Franco's comment above.

[AdelheidF]

I tested this fix now with the original (simple) codepen and it seems fixed with 2.0. But when I look at it in Map Viewer it's still not working.

I updated the codepen to display the issue in the right-side flow. It seems that if the calcite-blocks are surrounded by calcite-sortable-list it's still not working. If you comment out this element it displays correctly.

https://codepen.io/afreitag/pen/GRGPdwQ;

This workaround no longer works either

calcite-dropdown {
  display: block;
}

[jcfranco]

If you set calcite-sortable-list's display to block, it'll work.

[AdelheidF]

Nice, this works. I will use that.

Is this a workaround or the solution? Basically do you want me to close this issue again?

[jcfranco]

This would be the solution. The recent change to dropdown makes truncation easier to set up, but we can't handle all cases as it depends on the HTML structure.