Citation view not wrapping in case of many links

[IPv777]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/HugoBlox/hugo-blox-builder/issues?q=is%3Aissue
• [X] This issue is not a question, feature request, or anything other than a bug report directly related to Hugo Blox Builder. Please post those things on Discord: https://discord.gg/z8wNYzb

Description

The responsive break occurs with Firefox Desktop using mobile view and with Chrome on my Android

Reproduction Link

https://academic-demo.netlify.app

Steps to Reproduce

1. Load Academic CV on a mobile browser
2. Slide to left

Expected Result

correct wrap off all text on the page

Actual Result

not working

What Hugo Module versions does your site use?

On my website :

module [github.com/HugoBlox/hugo-blox-builder/starters/academic-cv](https://pkg.go.dev/github.com/HugoBlox/hugo-blox-builder/starters/academic-cv)

go 1.19

require (
    [github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify](https://pkg.go.dev/github.com/HugoBlox/hugo-blox-builder/modules/blox-plugin-netlify@v1.1.2-0.20231209203044-d31adfedd40b) v1.1.2-0.20231209203044-d31adfedd40b
    [github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind](https://pkg.go.dev/github.com/HugoBlox/hugo-blox-builder/modules/blox-tailwind@v0.2.1-0.20240602133901-492e343c2a33) v0.2.1-0.20240602133901-492e343c2a33
)

On your demo website, I dont know

What operating system(s) are you seeing the problem on?

Windows, Android

What browser(s) are you seeing the problem on?

Chrome, Firefox

Which Hugo Blox template are you using?

Academic CV

What version of Hugo are you using?

0.126.3

[github-actions[bot]]

This issue is stale because it has not had any recent activity. The resources of the project maintainers are limited, and so we are asking for your help.

If this is a bug and you can still reproduce this error on the main branch, consider contributing a Pull Request with a fix.

If this is a feature request, and you feel that it is still relevant and valuable, consider contributing a Pull Request for review.

This issue will automatically close soon if no further activity occurs. Thank you for your contributions.

[rodrigoalcarazdelaosa]

There's no left margin either in mobile. Not sure if it's intended, but doesn't look good.

[IPv777]

There's no left margin either in mobile. Not sure if it's intended, but doesn't look good.

yes, same problem here

[BhargavRajGuru]

I second that.

[fliptanedo]

I can confirm that the problem exists in iOS devices. It also appears to affect different HugoBlox templates in different ways. An easy way to check this is to view the demo sites (links below).

Academic CV

Link: Netlify deployment link

You can see that there's a large margin on the right. This seems to be exacerbated in iOS when zooming. I think it may be related to over scrolling.

Academic CV - Pro

Link: Netlify deployment link

If you look carefully, the white margin is still there on the right: you can see near the bottom where the page doesn't line up with the address bar. It's much smaller than the standard Academic CV template. Even when I try to zoom out or over scroll, the margin stays fixed.

Landing Page

Link Netlify deployment link

For this template there is no problem at all. There is no iOS overscroll in the left-right direction and the navbar and hero block go all the way across the screen.

I cannot figure out what's different in the Blox between the three examples above. However, the fact that some of the templates do not have this problem gives some hope that there is a simple solution.

[burkebrunson]

There's no left margin either in mobile. Not sure if it's intended, but doesn't look good.

I see the same for my own deployment.