Make demo a bit more mobile friendly (#44)

1. Change `ui.horizontal()` to `ui.horizontal_wrapped()` for the
`PlotDemo` selector so it doesn't go off screen.
2. Wrap several of the demo's "settings" UI's in a
`ScrollArea::horizontal`s so they don't go off screen and make the plots
go off screen as well.
3. Wrap the plots in the LinkedAxes demo in a `ScrollArea::horizontal`
so they don't go off screen.

# Before and after screenshots

## Lines

Before:
<img width="392" alt="Screenshot 2024-09-09 at 7 15 24 PM"
src="https://github.com/user-attachments/assets/23063cfe-04bd-4e76-9158-7b6cbaf4f2bf">

After:
<img width="398" alt="Screenshot 2024-09-09 at 7 17 13 PM"
src="https://github.com/user-attachments/assets/7285dcea-4434-4b5b-b9bc-7cae330de703">

## Legend

Before:
<img width="319" alt="Screenshot 2024-09-09 at 7 43 05 PM"
src="https://github.com/user-attachments/assets/84a6b78a-dc9e-42df-be3b-cf26d54af848">


After:
<img width="315" alt="Screenshot 2024-09-09 at 7 22 37 PM"
src="https://github.com/user-attachments/assets/d2225e97-d321-4af0-8f60-4d2591aea17b">

## Charts

Before:
<img width="320" alt="Screenshot 2024-09-09 at 7 43 12 PM"
src="https://github.com/user-attachments/assets/90b1c287-6b44-42c3-b8f1-417d5c367a4a">



After:
<img width="318" alt="Screenshot 2024-09-09 at 7 25 15 PM"
src="https://github.com/user-attachments/assets/31793d79-dbb5-42c8-bfe7-435d5b4f7686">


## Linked Axes

Before:
<img width="321" alt="Screenshot 2024-09-09 at 7 43 29 PM"
src="https://github.com/user-attachments/assets/4622c4f0-c9af-4c85-a5e3-a106ae5ea2f5">



After:
<img width="323" alt="Screenshot 2024-09-09 at 7 29 50 PM"
src="https://github.com/user-attachments/assets/d008fdcc-2a3c-4f6b-8624-6afa0e38da63">

demo/src/plot_demo.rs

@@ -1,7 +1,9 @@
 use std::f64::consts::TAU;
 use std::ops::RangeInclusive;
 
-use egui::{remap, vec2, Color32, ComboBox, NumExt, Pos2, Response, Stroke, TextWrapMode, Vec2b};
+use egui::{
+    remap, vec2, Color32, ComboBox, NumExt, Pos2, Response, ScrollArea, Stroke, TextWrapMode, Vec2b,
+};
 
 use egui_plot::{
     Arrows, AxisHints, Bar, BarChart, BoxElem, BoxPlot, BoxSpread, CoordinatesFormatter, Corner,
@@ -63,7 +65,7 @@ impl PlotDemo {
             ui.add(crate::egui_github_link_file!());
         });
         ui.separator();
-        ui.horizontal(|ui| {
+        ui.horizontal_wrapped(|ui| {
             ui.selectable_value(&mut self.open_panel, Panel::Lines, "Lines");
             ui.selectable_value(&mut self.open_panel, Panel::Markers, "Markers");
             ui.selectable_value(&mut self.open_panel, Panel::Legend, "Legend");
@@ -254,7 +256,9 @@ impl LineDemo {
 
 impl LineDemo {
     fn ui(&mut self, ui: &mut egui::Ui) -> Response {
-        self.options_ui(ui);
+        ScrollArea::horizontal().show(ui, |ui| {
+            self.options_ui(ui);
+        });
 
         if self.animate {
             ui.ctx().request_repaint();
@@ -392,8 +396,27 @@ impl LegendDemo {
     }
 
     fn ui(&mut self, ui: &mut egui::Ui) -> Response {
+        ScrollArea::horizontal().show(ui, |ui| {
+            self.settings_ui(ui);
+        });
+
         let Self { config } = self;
+        let legend_plot = Plot::new("legend_demo")
+            .legend(config.clone())
+            .data_aspect(1.0);
+        legend_plot
+            .show(ui, |plot_ui| {
+                plot_ui.line(Self::line_with_slope(0.5).name("lines"));
+                plot_ui.line(Self::line_with_slope(1.0).name("lines"));
+                plot_ui.line(Self::line_with_slope(2.0).name("lines"));
+                plot_ui.line(Self::sin().name("sin(x)"));
+                plot_ui.line(Self::cos().name("cos(x)"));
+            })
+            .response
+    }
 
+    fn settings_ui(&mut self, ui: &mut egui::Ui) {
+        let Self { config } = self;
         egui::Grid::new("settings").show(ui, |ui| {
             ui.label("Text style:");
             ui.horizontal(|ui| {
@@ -420,18 +443,6 @@ impl LegendDemo {
             );
             ui.end_row();
         });
-        let legend_plot = Plot::new("legend_demo")
-            .legend(config.clone())
-            .data_aspect(1.0);
-        legend_plot
-            .show(ui, |plot_ui| {
-                plot_ui.line(Self::line_with_slope(0.5).name("lines"));
-                plot_ui.line(Self::line_with_slope(1.0).name("lines"));
-                plot_ui.line(Self::line_with_slope(2.0).name("lines"));
-                plot_ui.line(Self::sin().name("sin(x)"));
-                plot_ui.line(Self::cos().name("cos(x)"));
-            })
-            .response
     }
 }
 
@@ -642,6 +653,13 @@ impl LinkedAxesDemo {
             ui.checkbox(&mut self.link_cursor_y, "Y");
         });
 
+        ScrollArea::horizontal()
+            .show(ui, |ui| self.plots_ui(ui))
+            .inner
+    }
+
+    fn plots_ui(&self, ui: &mut egui::Ui) -> Response {
+        ui.style_mut().wrap_mode = Some(TextWrapMode::Extend);
         let link_group_id = ui.id().with("linked_demo");
         ui.horizontal(|ui| {
             Plot::new("left-top")
@@ -877,6 +895,17 @@ impl Default for ChartsDemo {
 
 impl ChartsDemo {
     fn ui(&mut self, ui: &mut egui::Ui) -> Response {
+        ScrollArea::horizontal().show(ui, |ui| {
+            self.options_ui(ui);
+        });
+        match self.chart {
+            Chart::GaussBars => self.bar_gauss(ui),
+            Chart::StackedBars => self.bar_stacked(ui),
+            Chart::BoxPlot => self.box_plot(ui),
+        }
+    }
+
+    fn options_ui(&mut self, ui: &mut egui::Ui) -> Response {
         ui.horizontal(|ui| {
             ui.vertical(|ui| {
                 ui.label("Type:");
@@ -912,12 +941,8 @@ impl ChartsDemo {
                     });
                 });
             });
-        });
-        match self.chart {
-            Chart::GaussBars => self.bar_gauss(ui),
-            Chart::StackedBars => self.bar_stacked(ui),
-            Chart::BoxPlot => self.box_plot(ui),
-        }
+        })
+        .response
     }
 
     fn bar_gauss(&self, ui: &mut egui::Ui) -> Response {