Consistency in reporting component UI

[nikolas-burkoff]

In example app here: #635 (comment) we have specified the reporting components directly:

encoding = tagList(
          fluidRow(
            column(4, teal.reporter::add_card_button_ui(ns("addReportCard"))),
            column(4, teal.reporter::download_report_button_ui(ns("downloadButton"))),
            column(4, teal.reporter::reset_report_button_ui(ns("resetButton")))
          )

Which can cause problems:

We might be able to use simple_reporter instead but does this also cause problems? We should be consistent in how and where module developers ought to specify the reporting ui

and this should be explained in #632

[kpagacz]

I firmly believe this should be solved with CSS. The buttons should be responsive on their own.

[kpagacz]

Looking at the CSS classes we have for these UI elements, seems we piggyback off of bootstrap which is recommended. The fluidRow and columns set up fixed positions for the buttons that override a sensible flex behaviour. In short - don't use fluidRow and columns because they are junky.

[Polkas]

I just update the example app in the main PR to use the regular div.