Broken formatting of ingriedent summary

[frudolph77]

Version

Version: development on https://app.tandoor.dev/

Bug description

The formatting of the ingredients summary is broken when the ingredients are separated in multiple steps.

Looking into the HTML shows that the ingredients from the steps are wrapped in divs. This is invalid HTML and will break the table layout .

<div class="card-body">
    <div class="row">
        <div class="col col-md-8">
            <h4 class="card-title"><i class="fas fa-pepper-hot"></i> Zutaten</h4>
        </div>
    </div><br>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-sm">
                <div>  <!-- DIV NOT ALLOWED HERE -->
                    <tr data-v-5fa7e004="">
                        <td data-v-5fa7e004="" class="d-print-non">
                            <i data-v-5fa7e004="" class="far fa-check-circle text-primary"></i>
                        </td>
                        <td data-v-5fa7e004=""><span data-v-5fa7e004="">200</span></td>
                        <td data-v-5fa7e004=""><span data-v-5fa7e004="">g</span></td>
                        <td data-v-5fa7e004="">
                            <span data-v-5fa7e004="">Reis</span>
                        </td>
                        <td data-v-5fa7e004="">
                            <div data-v-5fa7e004=""><span data-v-5fa7e004="" class="d-print-none touchable"><i
                                        data-v-5fa7e004="" class="far fa-comment"></i></span>
                                <div data-v-5fa7e004="" class="d-none d-print-block"><i data-v-5fa7e004=""
                                        class="far fa-comment-alt d-print-none"></i> Sadri </div>
                            </div>
                        </td>
                    </tr>
                </div>  <!-- DIV NOT ALLOWED HERE -->
                <div>  <!-- DIV NOT ALLOWED HERE -->
                    <tr data-v-5fa7e004="">
                        <td data-v-5fa7e004="" class="d-print-non">
                            <i data-v-5fa7e004="" class="far fa-check-circle text-primary"></i>
                        </td>
                        <td data-v-5fa7e004=""><span data-v-5fa7e004="">250</span></td>
                        <td data-v-5fa7e004=""><span data-v-5fa7e004="">g</span></td>
                        <td data-v-5fa7e004="">
                            <span data-v-5fa7e004="">Kokosmilch</span>
                        </td>
                        <td data-v-5fa7e004="">
                            <div data-v-5fa7e004=""><span data-v-5fa7e004="" class="d-print-none touchable"><i
                                        data-v-5fa7e004="" class="far fa-comment"></i></span>
                                <div data-v-5fa7e004="" class="d-none d-print-block"><i data-v-5fa7e004=""
                                        class="far fa-comment-alt d-print-none"></i> test </div>
                            </div>
                        </td>
                    </tr>
                    <tr data-v-5fa7e004="">
                        <td data-v-5fa7e004="" class="d-print-non">
                            <i data-v-5fa7e004="" class="far fa-check-circle text-primary"></i>
                        </td>
                        <td data-v-5fa7e004=""><span data-v-5fa7e004="">1</span></td>
                        <td data-v-5fa7e004=""><span data-v-5fa7e004="">Pckg</span></td>
                        <td data-v-5fa7e004="">
                            <span data-v-5fa7e004="">Massaman Thai Curry Paste</span>
                        </td>
                        <td data-v-5fa7e004=""></td>
                    </tr>
                </div>  <!-- DIV NOT ALLOWED HERE -->
            </table>
        </div>
    </div>
</div>```

[vabene1111]

fixed this for the next release, thanks for reporting

[Programie]

I have the same issue with the latest release (1.0.4). The ingredients overview is incorrectly formatted as each step is using it's own HTML table resulting in the table columns to be not correctly aligned.

[vabene1111]

thanks for reporting, i will take a look

[frudolph77]

I can confirm. Have seen this issue fixed before.

<div class="card-body">
    <div class="row">
        <div class="col col-md-8">
            <h4 class="card-title"><i class="fas fa-pepper-hot"></i>Zutaten</h4>
        </div>
    </div>
    <br>
        <div class="row"><div class="col-md-12"><!---->
            <table class="table table-sm">
                <tr data-v-2ed92105="">
                    <td data-v-2ed92105="" class="d-print-non"><!----><i data-v-2ed92105="" class="far fa-check-circle text-primary"></i></td>
                    <td data-v-2ed92105=""><span data-v-2ed92105="">200</span></td>
                    <td data-v-2ed92105=""><span data-v-2ed92105="">g</span></td>
                    <td data-v-2ed92105=""><span data-v-2ed92105="">Reis</span></td>
                    <td data-v-2ed92105=""><!----></td>
                </tr>
            </table><!-- this is new -->
        </div></div><!-- this is new -->
        <div class="row"><div class="col-md-12"><!-- this is new -->
            <table class="table table-sm"><!-- this is new -->
                    <tr data-v-2ed92105="">
                        <td data-v-2ed92105="" class="d-print-non"><!----><i data-v-2ed92105="" class="far fa-check-circle text-primary"></i></td>
                        <td data-v-2ed92105=""><span data-v-2ed92105="">250</span></td>
                        <td data-v-2ed92105=""><span data-v-2ed92105="">g</span></td>
                        <td data-v-2ed92105=""><!----><span data-v-2ed92105="">Kokosmilch</span></td>
                        <td data-v-2ed92105=""><!----></td>
                    </tr>
                    <tr data-v-2ed92105="">
                        <td data-v-2ed92105="" class="d-print-non"><!----><i data-v-2ed92105="" class="far fa-check-circle text-primary"></i></td>
                        <td data-v-2ed92105=""><span data-v-2ed92105="">1</span></td>
                        <td data-v-2ed92105=""><span data-v-2ed92105="">Pckg</span></td>
                        <td data-v-2ed92105=""><!----><span data-v-2ed92105="">Massaman Thai Curry Paste</span></td>
                        <td data-v-2ed92105=""><!----></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12"><!---->
                <table class="table table-sm">
                    <!-- next step -->
                </table>
            </div>
        </div>

Each step is now surrounded by <div class="row"><div class="col-md-12"> ... </div></div> and inside this div-soup there is the table for the ingredients of the step.

Maybe, you should collect all ingredients from all steps first and then render this collection.

regards and Happy New Year
Frank

[vabene1111]

thanks, i will take a look at it the next few days

[paaff]

Hi, can also confirm that I see this behavior on version 1.0.4 :)

Just started looking into this project, really cool so far 👍

[vabene1111]

this is one of the next things on my todo :)

[vabene1111]

fixed in the next release, if someone finds a case where this does not work just report :)