What

You might have tried to deploy cusdis docker in your docker environment. and after the deployment you will have the script and html block to add into your PaperMod Hugo project. and after adding the html to your single.html you see the cusdis on blog. and all ofa a sudden you see your cusdis iframe is not properly taking the height. how to fix this ?

Why

Why is this problem happening? After looking at the code provided by the cusdis deployment for adding into the hugo project.

<div id="cusdis_thread"
  data-host="https://your-deployment-url"
  data-app-id="YOUR-APP-ID"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://your-deployment-url/js/cusdis.es.js"></script>

the script cusdis.es.js has different code then what you get if you would have used the official cusdis deployment to create a project and tried to get the html block from that project.

Mainly you can check the height part. the iframe in the self hosted will not have the height added to its style.

How

To solve this you need to use the official script for your hugo project. use your own self hosted cusdis, but with a minor change.

<div id="cusdis_thread" data-host="https://your-deployment-url" data-app-id="YOUR-APP-ID"
    data-page-id="{{ .File.UniqueID }}" data-page-url="{{ .Permalink }}" data-page-title="{{ .Title }}"
    data-theme="auto">
</div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

You will have to add the script https://cusdis.com/js/cusdis.es.js instead of the script provided by your self hosted cusdis.