Make the code example demo narrow enough to fit on mobile (#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,51 +15,92 @@ impl Default for CodeExample {
 
 impl CodeExample {
     fn samples_in_grid(&mut self, ui: &mut egui::Ui) {
-        show_code(ui, r#"ui.heading("Code samples");"#);
+        // Note: we keep the code narrow so that the example fits on a mobile screen.
-        ui.heading("Code samples");
+
+        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.label("Name");
-                ui.text_edit_singleline(&mut self.name);
+                ui.text_edit_singleline(name);
             });"#,
         );
         // Putting things on the same line using ui.horizontal:
         ui.horizontal(|ui| {
-            ui.label("Your name: ");
+            ui.label("Name");
-            ui.text_edit_singleline(&mut self.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!("{name} is {age}"));"#);
+        ui.label(format!("{name} is {age}"));
+        ui.end_row();
+    }
+
+    fn code(&mut self, ui: &mut egui::Ui) {
         show_code(
             ui,
-            r#"ui.label(format!("Hello '{}', age {}", self.name, self.age));"#,
+            r"
+pub struct CodeExample {
+    name: String,
+    age: u32,
+}
+
+impl CodeExample {
+    fn ui(&mut self, ui: &mut egui::Ui) {
+        // Saves us from writing `&mut self.name` etc
+        let Self { name, age } = self;",
         );
-        ui.label(format!("Hello '{}', age {}", self.name, self.age));
+
-        ui.end_row();
+        ui.horizontal(|ui| {
+            let font_id = egui::TextStyle::Monospace.resolve(ui.style());
+            let indentation = 8.0 * ui.fonts(|f| f.glyph_width(&font_id, ' '));
+            let item_spacing = ui.spacing_mut().item_spacing;
+            ui.add_space(indentation - item_spacing.x);
+
+            egui::Grid::new("code_samples")
+                .striped(true)
+                .num_columns(2)
+                .show(ui, |ui| {
+                    self.samples_in_grid(ui);
+                });
+        });
+
+        crate::rust_view_ui(ui, "    }\n}");
     }
 }
 
@@ -72,9 +113,9 @@ impl super::Demo for CodeExample {
         use super::View;
         egui::Window::new(self.name())
             .open(open)
-            .default_size([800.0, 400.0])
+            .min_width(375.0)
-            .vscroll(false)
+            .default_size([390.0, 500.0])
-            .hscroll(true)
+            .scroll2(false)
             .resizable([true, false])
             .show(ctx, |ui| self.ui(ui));
     }
@@ -82,42 +123,11 @@ impl super::Demo for CodeExample {
 
 impl super::View for CodeExample {
     fn ui(&mut self, ui: &mut egui::Ui) {
-        ui.vertical_centered(|ui| {
+        ui.scope(|ui| {
-            ui.add(crate::egui_github_link_file!());
+            ui.spacing_mut().item_spacing = egui::vec2(8.0, 8.0);
+            self.code(ui);
         });
 
-        crate::rust_view_ui(
-            ui,
-            r"
-pub struct CodeExample {
-    name: String,
-    age: u32,
-}
-
-impl CodeExample {
-    fn ui(&mut self, ui: &mut egui::Ui) {
-"
-            .trim(),
-        );
-
-        ui.horizontal(|ui| {
-            let font_id = egui::TextStyle::Monospace.resolve(ui.style());
-            let indentation = 8.0 * ui.fonts(|f| f.glyph_width(&font_id, ' '));
-            let item_spacing = ui.spacing_mut().item_spacing;
-            ui.add_space(indentation - item_spacing.x);
-
-            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}");
-
         ui.separator();
 
         crate::rust_view_ui(ui, &format!("{self:#?}"));
@@ -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()