MindBody Healcode Widget De-Uglifier

mindbody.html

<!-- The Mindbody healcode events widget is just broken and ugly by design. 
I've been trying here to fix the design both by CSS and JS tricks.
Hope it will help someone. Hope Mindbody will make the effort to make their most visible widget
not as ugly as it is today. -->

<script src="https://widgets.healcode.com/javascripts/healcode.js" type="text/javascript"></script>

<healcode-widget data-type="enrollments" data-widget-partner="object" data-widget-id="55551774b27"
                 data-widget-version="0"></healcode-widget>

<!-- Custom CSS used to improve how the healcode widget looks like -->
<style>
    div.healcode {
        max-width: 60em;
        font-size: 103%
    }

    div.filtered_collection {
        margin-top: 0.75em;
    }

    div.healcode.enrollments .enrollment {
        line-height: 1.7em;
        margin-bottom: 0;
    }

    div.healcode.enrollments .enrollment .healcode-description-area {
        width: 75%;
    }

    div.healcode.enrollments .enrollment .healcode-enrollment-name {
        color: #3e5c7e;
    }

    div.healcode.enrollments .enrollment .healcode-enrollment-name > a {
        font-weight: bold;
    }

    /* Fix the Previous/Today/Next Buttons to have bigger text */
    div.header > div.healcode-date-links-area.date_links.week_links > span.healcode-previous > a {
        font-size: 11px;
    }

    div.header > div.healcode-date-links-area.date_links.week_links > span.healcode-today > a {
        font-size: 11px;
    }

    div.header > div.healcode-date-links-area.date_links.week_links > span.healcode-next > a {
        font-size: 11px;
    }

    /* Fix the font size of the Sign Up button */
    div.healcode-button > a {
        font-size: 11px;
    }
</style>
<!-- Lots of code that simply make the enrollment divs have a "read more" button. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/readmore-js@2.2.1/readmore.min.js"></script>

<!-- Code that we use to fix the page styling -->
<script type="text/javascript">
    var shortenDescription = function () {
        // Shorten the description of all event listings and add a "Read more" button to uncollapse the full description.
        $("div.healcode.enrollments .healcode-description-area").readmore({
            collapsedHeight: 50,
        })
    };

    var fixEventTitleLink = function () {
        // Fix the title link of each of the event listings. Currently it is just a broken link.
        // For now the solution is to simply make it non clickable.
        $("h2.healcode-enrollment-name a:first").click(function () {
            return false;
        });
    }

    $(document).ready(function () {
        console.log('Listening for MindBody widget changes...')
        var x = new MutationObserver(function (e) {
            var arrayLength = e.length;
            for (var i = 0; i < e.length; i++) {
                if (e[i].addedNodes.length) {
                    console.log('Mindbody Widget has changed!')
                    shortenDescription();
                    fixEventTitleLink();
                }
            }
        });

        x.observe($("healcode-widget")[1], {childList: true});
    });
</script>