Update app.R

app.R

@@ -117,6 +117,27 @@ getMetricLabel <- function(metric_value) {
 
 # UI Definition
 ui <- fluidPage(
+  tags$head(
+    # Make the layout fluid on phones
+    tags$meta(name = "viewport",
+              content = "width=device-width, initial-scale=1"),
+    
+    # Tiny CSS tweaks that only activate below 576 px
+    tags$style(HTML("
+    @media (max-width: 575.98px) {
+      /* shrink side padding so the sidebar fits */
+      .sidebar-panel, .panel-body, .form-group {padding-left:8px !important; padding-right:8px !important;}
+      
+      /* make the Share button & inputs finger‑friendly */
+      #share-button        {font-size: 0.9rem; padding: 6px 10px;}
+      select.form-control  {font-size: 0.9rem; height: 36px;}
+      
+      /* relax margins in the heading paragraph */
+      p {margin-bottom: 0.6rem;}
+    }
+  "))
+  ),
+  
   titlePanel("Multiscale Representations Explorer"),
   
   tags$p(
@@ -130,13 +151,13 @@ ui <- fluidPage(
       icon("external-link", style = "font-size: 12px;")
     )
   ),
-
+  
   # ---- Here is the minimal "Share" button HTML + JS inlined in Shiny ----
   # We wrap it in tags$div(...) and tags$script(HTML(...)) so it is recognized
   # by Shiny. You can adjust the styling or placement as needed.
   tags$div(
-     style = "text-align: left; margin: 1em 0 1em 0em;",
-     HTML('
+    style = "text-align: left; margin: 1em 0 1em 0em;",
+    HTML('
        <button id="share-button" 
                 style="
                   display: inline-flex;
@@ -164,9 +185,9 @@ ui <- fluidPage(
           <strong>Share</strong>
         </button>
       '),
-      # Insert the JS as well
-      tags$script(
-        HTML("
+    # Insert the JS as well
+    tags$script(
+      HTML("
           (function() {
             const shareBtn = document.getElementById('share-button');
             // Reusable helper function to show a small “Copied!” message
@@ -223,10 +244,10 @@ ui <- fluidPage(
             });
           })();
         ")
-      )
-    ),
+    )
+  ),
   # ---- End: Minimal Share button snippet ----
-
+  
   
   sidebarLayout(
     sidebarPanel(
@@ -247,7 +268,7 @@ ui <- fluidPage(
       checkboxInput("compareToBest", "Compare to best single scale", value = FALSE)
     ),
     mainPanel(
-      plotOutput("heatmapPlot", height = "600px"),
+      plotOutput("heatmapPlot"),
       div(style = "margin-top: 10px; font-style: italic;", uiOutput("contextNote"))
     )
   )
@@ -340,7 +361,8 @@ server <- function(input, output) {
   })
   
   # Heatmap Output
-  output$heatmapPlot <- renderPlot({
+  output$heatmapPlot <- renderPlot(
+  {
     interp_data <- interpolated_data()
     if (is.null(interp_data)) {
       plot.new()
@@ -454,5 +476,4 @@ server <- function(input, output) {
 }
 
 # Run the Shiny App
-shinyApp(ui = ui, server = server)
-
+shinyApp(ui = ui, server = server)