Кнопки касаются нижнего края модала в Semantic-UI

Question

Я использую Semantic-UI 2.3.1.Я создал стандартный модал, и в нижней части формы кнопки касаются нижней границы / края модала.Я попытался поместить кнопки в <div class="field"></div>, думая, что поле добавит к нему необходимые отступы, но это не так.Вот скриншот этого:

Мой HTML:

<div class="ui modal" id="edit_invoice_modal">
    <div class="header"><?= $new ? 'New' : 'Edit'; ?> Invoice</div>
    <div class="content">
        <div id="modal_error_message" class="ui hidden error message"></div>

        <form id="data" method="post" enctype="multipart/form-data" class="ui small form">

            <div class="two fields">
                <div class="required field">
                    <label>Description</label>
                    <input type="text" name="description" value="<?= $Invoice->description; ?>" />
                </div>
                <div class="required field">
                    <label>Cost Center</label>
                    <input type="text" name="cost_center" value="<?= $Invoice->cost_center; ?>" />
                </div>
            </div>

            <div class="field">
                <input class="ui right floated compact primary button" type="submit" name="submit" id="submit" value="Submit" />
                <?php if($new === false) { ?>
                    <input class="ui right floated compact button" type="button" name="delete" id="delete" value="Delete" />
                <?php } ?>
            </div>
        </form>
    </div>
</div>

МойJS:

$('#edit_invoice_modal').modal({
    autofocus: false
});

Я не переопределил ни один из стилей CSS или использование каких-либо шаблонов - простой ванильный Semantic-UI.Я просмотрел все документы Semantic-UI на предмет модальностей, и все они, кажется, работают безупречно.Я не могу понять, что я делаю не так.Спасибо за любую помощь!