First tag is clipped because of random placement in small screen

[knishant]

Current behavior I am using this module for a mobile app. For a display in portrait mode, where the width is 375 px, the first word added is often clipped. The word is long "conscientiousness" but it should easily fit in the width.

Expected behavior The tag should be shown in the middle but it is shown on the left or right at random location and hence the text is clipped often.

Angular version: Angular 17

angular-tag-cloud-module version: 17.0.1

I checked the code and the issue is with line 530. Randomness without bounds can place the tag outside of the div, hence it is clipped. The following code

wordStyle.left = left + (Math.random() - 0.5) * 2 * (this.calculatedWidth / 5) + 'px';

can be replaced by the following by just placing some limits on the left value.

const maxLeft = this.calculatedWidth - width - 2;
left = left + (Math.random() - 0.5) * 2 * (this.calculatedWidth / 5);
wordStyle.left = Math.max(2, Math.min(maxLeft, left)) + 'px';

Now it will clip only when the text is larger than the screen.