Make the code example demo narrow enough to fit on mobile (emilk#4281)

I think it is a good example, and so I want to open it by default, but
for that it needs to work on mobile.

Hopefully this doesn't make it too cryptic

<img width="415" alt="image"
src="https://github.com/emilk/egui/assets/1148717/83d881fa-675e-4659-bd21-14abcb79fe46">

crates/egui_demo_app/src/backend_panel.rs

@@ -305,6 +305,7 @@ fn integration_ui(ui: &mut egui::Ui, _frame: &mut eframe::Frame) {
                         Some(egui::vec2(375.0, 667.0)),
                         "📱 iPhone SE 2nd Gen",
                     );
+                    ui.selectable_value(&mut size, Some(egui::vec2(393.0, 852.0)), "📱 iPhone 15");
                     ui.selectable_value(
                         &mut size,
                         Some(egui::vec2(1280.0, 720.0)),

crates/egui_demo_lib/src/demo/code_example.rs

@@ -15,78 +15,64 @@ impl Default for CodeExample {
 
 impl CodeExample {
     fn samples_in_grid(&mut self, ui: &mut egui::Ui) {
-        show_code(ui, r#"ui.heading("Code samples");"#);
-        ui.heading("Code samples");
+        // Note: we keep the code narrow so that the example fits on a mobile screen.
+
+        let Self { name, age } = self; // for brevity later on
+
+        show_code(ui, r#"ui.heading("Example");"#);
+        ui.heading("Example");
         ui.end_row();
 
         show_code(
             ui,
             r#"
-            // Putting things on the same line using ui.horizontal:
             ui.horizontal(|ui| {
-                ui.label("Your name: ");
-                ui.text_edit_singleline(&mut self.name);
+                ui.label("Name");
+                ui.text_edit_singleline(name);
             });"#,
         );
         // Putting things on the same line using ui.horizontal:
         ui.horizontal(|ui| {
-            ui.label("Your name: ");
-            ui.text_edit_singleline(&mut self.name);
+            ui.label("Name");
+            ui.text_edit_singleline(name);
         });
         ui.end_row();
 
         show_code(
             ui,
-            r#"ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age"));"#,
+            r#"
+            ui.add(
+                egui::DragValue::new(age)
+                    .clamp_range(0..=120)
+                    .suffix(" years"),
+            );"#,
+        );
+        ui.add(
+            egui::DragValue::new(age)
+                .clamp_range(0..=120)
+                .suffix(" years"),
         );
-        ui.add(egui::Slider::new(&mut self.age, 0..=120).text("age"));
         ui.end_row();
 
         show_code(
             ui,
             r#"
             if ui.button("Increment").clicked() {
-                self.age += 1;
+                *age += 1;
             }"#,
         );
         if ui.button("Increment").clicked() {
-            self.age += 1;
+            *age += 1;
         }
         ui.end_row();
 
-        show_code(
-            ui,
-            r#"ui.label(format!("Hello '{}', age {}", self.name, self.age));"#,
-        );
-        ui.label(format!("Hello '{}', age {}", self.name, self.age));
+        show_code(ui, r#"ui.label(format!("{name} is {age}"));"#);
+        ui.label(format!("{name} is {age}"));
         ui.end_row();
     }
-}
-
-impl super::Demo for CodeExample {
-    fn name(&self) -> &'static str {
-        "🖮 Code Example"
-    }
-
-    fn show(&mut self, ctx: &egui::Context, open: &mut bool) {
-        use super::View;
-        egui::Window::new(self.name())
-            .open(open)
-            .default_size([800.0, 400.0])
-            .vscroll(false)
-            .hscroll(true)
-            .resizable([true, false])
-            .show(ctx, |ui| self.ui(ui));
-    }
-}
-
-impl super::View for CodeExample {
-    fn ui(&mut self, ui: &mut egui::Ui) {
-        ui.vertical_centered(|ui| {
-            ui.add(crate::egui_github_link_file!());
-        });
 
-        crate::rust_view_ui(
+    fn code(&mut self, ui: &mut egui::Ui) {
+        show_code(
             ui,
             r"
 pub struct CodeExample {
@@ -96,8 +82,8 @@ pub struct CodeExample {
 
 impl CodeExample {
     fn ui(&mut self, ui: &mut egui::Ui) {
-"
-            .trim(),
+        // Saves us from writing `&mut self.name` etc
+        let Self { name, age } = self;",
         );
 
         ui.horizontal(|ui| {
@@ -109,14 +95,38 @@ impl CodeExample {
             egui::Grid::new("code_samples")
                 .striped(true)
                 .num_columns(2)
-                .min_col_width(16.0)
-                .spacing([16.0, 8.0])
                 .show(ui, |ui| {
                     self.samples_in_grid(ui);
                 });
         });
 
         crate::rust_view_ui(ui, "    }\n}");
+    }
+}
+
+impl super::Demo for CodeExample {
+    fn name(&self) -> &'static str {
+        "🖮 Code Example"
+    }
+
+    fn show(&mut self, ctx: &egui::Context, open: &mut bool) {
+        use super::View;
+        egui::Window::new(self.name())
+            .open(open)
+            .min_width(375.0)
+            .default_size([390.0, 500.0])
+            .scroll2(false)
+            .resizable([true, false])
+            .show(ctx, |ui| self.ui(ui));
+    }
+}
+
+impl super::View for CodeExample {
+    fn ui(&mut self, ui: &mut egui::Ui) {
+        ui.scope(|ui| {
+            ui.spacing_mut().item_spacing = egui::vec2(8.0, 8.0);
+            self.code(ui);
+        });
 
         ui.separator();
 
@@ -129,6 +139,12 @@ impl CodeExample {
             theme.ui(ui);
             theme.store_in_memory(ui.ctx());
         });
+
+        ui.separator();
+
+        ui.vertical_centered(|ui| {
+            ui.add(crate::egui_github_link_file!());
+        });
     }
 }
 

crates/egui_demo_lib/src/demo/demo_app_windows.rs

@@ -52,6 +52,15 @@ impl Default for Demos {
 impl Demos {
     pub fn from_demos(demos: Vec<Box<dyn Demo>>) -> Self {
         let mut open = BTreeSet::new();
+
+        // Explains egui very well
+        open.insert(
+            super::code_example::CodeExample::default()
+                .name()
+                .to_owned(),
+        );
+
+        // Shows off the features
         open.insert(
             super::widget_gallery::WidgetGallery::default()
                 .name()