1290 reporter previewer buttons overlap (#282)

Fixes insightsengineering/teal#1290 as a part
of insightsengineering/teal#1253

Status: currently managed to figure out application on divs on buttons
so they do not overlap
Now: planning to put each button in a separate line so they do not go
out of the `encodings` panel

```r
library(shiny)
library(teal.reporter)

shinyApp(
  ui = fluidPage(reporter_previewer_ui("simple")),
  server = function(input, output, session) {
    reporter_previewer_srv("simple", Reporter$new())
  }
)
```

<img width="380" alt="image"
src="https://github.com/user-attachments/assets/b6bf60c9-7a26-4c50-a058-f4504e87f682">

---------

Co-authored-by: vedhav <vedhaviyash4@gmail.com>
Co-authored-by: 27856297+dependabot-preview[bot]@users.noreply.github.com <27856297+dependabot-preview[bot]@users.noreply.github.com>

DESCRIPTION

@@ -65,4 +65,4 @@ Encoding: UTF-8
 Language: en-US
 LazyData: true
 Roxygen: list(markdown = TRUE)
-RoxygenNote: 7.3.1
+RoxygenNote: 7.3.2

R/Previewer.R

@@ -148,7 +148,7 @@ reporter_previewer_srv <- function(id,
         shiny::tags$div(
           id = "previewer_reporter_buttons",
           class = "previewer_buttons_line",
-          previewer_buttons_list[previewer_buttons]
+          lapply(previewer_buttons_list[previewer_buttons], shiny::tags$div)
         )
       )
     })

inst/css/Previewer.css

@@ -1,13 +1,13 @@
 /* teal.reporter Previewer css */
 
 /* highlight the icon when hover */
-span.preview_card_control  i:hover {
+span.preview_card_control i:hover {
   color: blue;
 }
 
 .previewer_buttons_line {
   display: flex;
-  justify-content: end;
+  flex-wrap: wrap;
   margin-right: 10px;
 }
 
@@ -19,20 +19,20 @@ a.disabled {
   text-decoration: none;
 }
 
-a[id$=download_data].disabled,
-a[id$=download_data_prev].disabled {
+a[id$="download_data"].disabled,
+a[id$="download_data_prev"].disabled {
   border: 0;
   color: white;
   background-color: darkgrey;
 }
 
 /* icons in the previewer */
 .icon_previewer {
-  float:right;
-  margin-left:10px;
-  margin-right:10px;
-  margin-top:10px;
-  color:#337ab7;
+  float: right;
+  margin-left: 10px;
+  margin-right: 10px;
+  margin-top: 10px;
+  color: #337ab7;
 }
 
 /* prevents oversizing elements covered by shinybusy::block */