[footnotes] breaks side widget

I was able to fix using some PHP snippet and Custom CSS:

/**

• DIVI + CITEKIT RICH FOOTNOTE FIX
  *
• Use:
• [footnote]Your footnote…[/footnote]
  *
• At bottom:
• [safe_footnotes]
  *
• CiteKit remains installed, but we replace its “footnote”
• shortcode renderer because its popup markup does not handle
• multi-paragraph / block-level footnotes safely.
  */

/* ==========================================================

• 1. REPLACE CITEKIT’S INLINE [footnote] SHORTCODE
• ========================================================== */

add_action( ‘init’, function() {

/*
 * CiteKit has already registered its shortcode by this point.
 * Remove only the footnote shortcode and replace it.
 */
remove_shortcode( 'footnote' );

add_shortcode( 'footnote', function( $atts, $content = null ) {

    static $footnote_number = 0;
    $footnote_number++;

    if ( $content === null ) {
        $content = '';
    }

    /*
     * wpautop() may already have changed a multiline shortcode
     * into something resembling:
     *
     * first paragraph</p><p>second paragraph
     *
     * We DO NOT output that HTML in the inline popup.
     * Convert it to readable plain text instead.
     */

    $popup = $content;

    // Add spaces where WordPress may have inserted block tags.
    $popup = preg_replace(
        '#</?(?:p|div|li|ul|ol|blockquote|table|tbody|thead|tfoot|tr|td|th|figure|figcaption|h[1-6])\b[^>]*>#i',
        ' ',
        $popup
    );

    $popup = preg_replace(
        '#<br\s*/?>#i',
        ' ',
        $popup
    );

    // Remove shortcodes from the popup copy.
    $popup = strip_shortcodes( $popup );

    // Remove remaining HTML.
    $popup = wp_strip_all_tags( $popup, true );

    // Normalize spaces.
    $popup = preg_replace( '/\s+/', ' ', $popup );
    $popup = trim( $popup );

    /*
     * Keep popup reasonably short.
     * The COMPLETE rich footnote appears at the bottom.
     */
    if ( mb_strlen( $popup ) > 500 ) {
        $popup = mb_substr( $popup, 0, 497 ) . '…';
    }

    $number = (int) $footnote_number;

    $output  = '<sup class="ck-footnote safe-ck-footnote"';
    $output .= ' id="fnref-' . esc_attr( $number ) . '"';
    $output .= ' tabindex="0">';

    $output .= '<a href="#fn-' . esc_attr( $number ) . '"';
    $output .= ' class="ck-footnote-ref">';
    $output .= esc_html( $number );
    $output .= '</a>';

    if ( $popup !== '' ) {
        $output .= '<span class="ck-footnote-popup">';
        $output .= esc_html( $popup );
        $output .= '</span>';
    }

    $output .= '</sup>';

    return $output;

} );

}, 999 );

/* ==========================================================

• 2. CREATE THE SAFE BOTTOM FOOTNOTE LIST
• ========================================================== */

add_shortcode( ‘safe_footnotes’, function( $atts = array() ) {

if ( ! is_singular() ) {
    return '';
}

$post_id = get_the_ID();

if ( ! $post_id ) {
    return '';
}

/*
 * Read the ORIGINAL database content.
 *
 * This is important: we don't want the version that has
 * already passed through wpautop(), CiteKit, or Divi.
 */
$raw_content = get_post_field( 'post_content', $post_id, 'raw' );

if ( ! $raw_content ) {
    return '';
}

/*
 * Extract the original [footnote]...[/footnote] contents.
 */
preg_match_all(
    '#\[footnote(?:\s+[^\]]*)?\](.*?)\[/footnote\]#is',
    $raw_content,
    $matches
);

if ( empty( $matches[1] ) ) {
    return '';
}

$atts = shortcode_atts(
    array(
        'title' => 'Notes',
    ),
    $atts,
    'safe_footnotes'
);

$output = '<section class="safe-citekit-footnotes">';

if ( $atts['title'] !== '' ) {
    $output .= '<h3 class="safe-citekit-footnotes-title">';
    $output .= esc_html( $atts['title'] );
    $output .= '</h3>';
}

$output .= '<ol class="ck-footnotes safe-footnotes-list">';


foreach ( $matches[1] as $index => $raw_footnote ) {

    $number = $index + 1;

    /*
     * Start with the ORIGINAL raw footnote.
     */
    $footnote = trim( $raw_footnote );


    /* --------------------------------------------------
     * PROTECT BLOCK-LEVEL HTML
     *
     * The footnotes contain captions, images, lists,
     * tables, etc. We don't want wpautop() wrapping those
     * incorrectly.
     * -------------------------------------------------- */

    /*
     * First process genuine WordPress shortcodes that may
     * exist inside the footnote, such as [caption].
     */
    $footnote = do_shortcode( $footnote );


    /*
     * Now add paragraphs intelligently.
     *
     * wpautop() converts:
     *
     * Paragraph one.
     *
     * Paragraph two.
     *
     * into separate <p> elements.
     */
    $footnote = wpautop( $footnote, true );


    /*
     * WordPress sometimes produces:
     *
     * <p><div ...>
     *
     * or:
     *
     * </div></p>
     *
     * around existing block markup. Remove those invalid
     * paragraph wrappers.
     */

    $block_tags =
        'address|article|aside|blockquote|div|dl|fieldset|' .
        'figure|figcaption|footer|form|h[1-6]|header|hr|' .
        'main|nav|ol|pre|section|table|ul';

    // <p> immediately before a block element.
    $footnote = preg_replace(
        '#<p>\s*(<(' . $block_tags . ')\b)#i',
        '$1',
        $footnote
    );

    // </p> immediately after a block element.
    $footnote = preg_replace(
        '#(</(' . $block_tags . ')>)\s*</p>#i',
        '$1',
        $footnote
    );

    // Empty paragraphs.
    $footnote = preg_replace(
        '#<p>\s*(?:&nbsp;|\xC2\xA0)?\s*</p>#i',
        '',
        $footnote
    );


    /*
     * Balance this individual footnote only.
     */
    $footnote = force_balance_tags( $footnote );


    /* --------------------------------------------------
     * BUILD THE FOOTNOTE
     * -------------------------------------------------- */

    $output .= '<li id="fn-' . esc_attr( $number ) . '"';
    $output .= ' class="safe-footnote-item">';

    $output .= '<div class="safe-footnote-body">';

    $output .= $footnote;

    $output .= '<div class="safe-footnote-return">';

    $output .= '<a href="#fnref-' . esc_attr( $number ) . '"';
    $output .= ' class="ck-footnote-back safe-footnote-back"';
    $output .= ' aria-label="Return to footnote reference ';
    $output .= esc_attr( $number ) . '">';
    $output .= '&#8617;';
    $output .= '</a>';

    $output .= '</div>';

    $output .= '</div>';
    $output .= '</li>';
}


$output .= '</ol>';
$output .= '</section>';

return $output;

} );

/* =====================================================
DIVI + CITEKIT SAFE FOOTNOTES
===================================================== */

.safe-citekit-footnotes {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

.safe-footnotes-list {
display: block;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

.safe-footnote-item {
display: list-item;
width: auto;
max-width: 100%;
margin-bottom: 1.5em;
box-sizing: border-box;
}

.safe-footnote-body {
display: flow-root;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}

/* ---- PARAGRAPHS ---- */

.safe-footnote-body p {
display: block !important;
float: none !important;
width: auto;
margin-top: 0;
margin-bottom: 1em;
}

.safe-footnote-body p + p {
margin-top: 1em;
}

/* ---- LISTS ---- */

.safe-footnote-body ul,
.safe-footnote-body ol {
display: block;
margin-top: 1em;
margin-bottom: 1em;
}

/* ---- CAPTIONS / IMAGES ---- */

.safe-footnote-body .wp-caption,
.safe-footnote-body figure {
display: block;
float: none;
width: auto !important;
max-width: 100% !important;
box-sizing: border-box;
}

.safe-footnote-body img {
max-width: 100% !important;
height: auto !important;
}

/* ---- TABLES ---- */

.safe-footnote-body table {
width: 100%;
max-width: 100%;
}

/* ---- LONG URLS ---- */

.safe-footnote-body a {
overflow-wrap: anywhere;
}

/* ---- RETURN ARROW ---- */

.safe-footnote-return {
display: block;
clear: both;
margin-top: .5em;
}

.safe-footnote-back {
display: inline-block;
}