From 0289890197a274d991995d46966b9f1c59ac2e79 Mon Sep 17 00:00:00 2001
From: aryans2611 <aryans8095@gmail.com>
Date: Fri, 23 Oct 2026 09:57:58 +0530
Subject: [PATCH 1/6] M6: mobile layout: one side panel at a time on phones,
 two-finger pan, scrolling toolbar

Windows narrower than 760 pt show the Layers or Design panel over the canvas, opened from two
touch-sized buttons. Two fingers pan as well as pinch. The main toolbar pill is capped to the
canvas width and scrolls sideways (drag or wheel) when its buttons don't fit; the help button
moves above it when they would overlap. The web page's viewport covers the safe area and stops
touch scrolling and overscroll.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 apps/figcraft-web/index.html            |  6 +--
 crates/ui-egui/src/canvas.rs            |  7 ++-
 crates/ui-egui/src/lib.rs               | 62 ++++++++++++++++++++++---
 crates/ui-egui/src/panel_width_tests.rs | 29 ++++++++++++
 crates/ui-egui/src/toolbar.rs           | 26 +++++++++--
 5 files changed, 116 insertions(+), 14 deletions(-)

diff --git a/apps/figcraft-web/index.html b/apps/figcraft-web/index.html
index 1a9969d5..f610aa81 100644
--- a/apps/figcraft-web/index.html
+++ b/apps/figcraft-web/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
   <title>FigCraft</title>
   <link data-trunk rel="rust" data-bin="figcraft-web" data-cargo-profile="web-release" data-wasm-opt="z" data-wasm-opt-params="--enable-bulk-memory --enable-bulk-memory-opt --enable-nontrapping-float-to-int --enable-sign-ext --enable-reference-types --enable-multivalue" data-weak-refs />
   <style>
-    html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #f5f5f5; }
-    #figcraft_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
+    html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; background: #f5f5f5; }
+    #figcraft_canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
     #figcraft_loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
       color: #6b6b6b; font: 14px system-ui, sans-serif; pointer-events: none; }
     @media (prefers-color-scheme: dark) {
diff --git a/crates/ui-egui/src/canvas.rs b/crates/ui-egui/src/canvas.rs
index 46451ae0..122d8066 100644
--- a/crates/ui-egui/src/canvas.rs
+++ b/crates/ui-egui/src/canvas.rs
@@ -498,8 +498,11 @@ fn input(app: &mut FigApp, ui: &mut Ui, resp: &egui::Response) -> bool {
         return true;
     }
     let ctx = ui.ctx().clone();
-    let (mods, scroll, zoom_delta, hover_pos, space) =
-        ctx.input(|i| (i.modifiers, i.smooth_scroll_delta, i.zoom_delta(), i.pointer.hover_pos(), i.key_down(egui::Key::Space)));
+    // Two fingers pan as well as pinch (a touch screen has no scroll wheel).
+    let (mods, scroll, zoom_delta, hover_pos, space) = ctx.input(|i| {
+        let pan = i.multi_touch().map_or(egui::Vec2::ZERO, |m| m.translation_delta);
+        (i.modifiers, i.smooth_scroll_delta + pan, i.zoom_delta(), i.pointer.hover_pos(), i.key_down(egui::Key::Space))
+    });
     let editing_text = app.session.ds().map(|d| d.text_edit.is_some()).unwrap_or(false);
     let typing_elsewhere = crate::a11y::field_focused(&ctx);
     app.canvas.space_pan = space && !editing_text && !typing_elsewhere;
diff --git a/crates/ui-egui/src/lib.rs b/crates/ui-egui/src/lib.rs
index c93333b3..dedd287a 100644
--- a/crates/ui-egui/src/lib.rs
+++ b/crates/ui-egui/src/lib.rs
@@ -466,6 +466,18 @@ pub(crate) fn repaint_in(ctx: &egui::Context, secs: f64) {
 pub const LEFT_PANEL: std::ops::RangeInclusive<f32> = 200.0..=480.0;
 pub const RIGHT_PANEL: std::ops::RangeInclusive<f32> = 240.0..=480.0;
 pub const PANEL_DEFAULT: f32 = 240.0;
+/// Windows narrower than this (logical points: phones, portrait tablets) show one side panel at a
+/// time over the canvas, opened from two buttons, instead of both beside it.
+pub const NARROW_WIDTH: f32 = 760.0;
+/// What an open side panel leaves of a narrow window: the column of panel buttons.
+const MOBILE_STRIP: f32 = 48.0;
+
+/// The side panel a narrow window shows.
+#[derive(Clone, Copy, PartialEq, Eq, Debug)]
+pub enum MobilePanel {
+    Left,
+    Right,
+}
 pub const CANVAS_MIN: f32 = 160.0;
 
 /// The widths the side panels are drawn at in `avail` points (the window less the icon rail), from
@@ -615,6 +627,8 @@ pub struct UiState {
     /// The Rename layers dialog (several layers), while open.
     pub batch_rename: Option<dialogs::BatchRenameUi>,
     pub left_collapsed: bool,
+    /// The side panel open in a narrow window (a phone), where only one shows at a time.
+    pub mobile_panel: Option<MobilePanel>,
     pub comments: comments::CommentUi,
     pub versions: versions::VersionUi,
     /// The branch review dialog, while open.
@@ -739,6 +753,7 @@ impl Default for UiState {
             find: None,
             batch_rename: None,
             left_collapsed: false,
+            mobile_panel: None,
             comments: comments::CommentUi::default(),
             versions: versions::VersionUi::default(),
             branch_review: None,
@@ -1551,6 +1566,26 @@ impl FigApp {
     }
 
     /// One frame of the window drawing now.
+    /// A narrow window's two buttons for the side panels (touch-sized); the open one closes again.
+    fn mobile_buttons(&mut self, ctx: &egui::Context, at: egui::Pos2) {
+        use a11y::Tip as _;
+        let t = theme::Tokens::get(ctx);
+        egui::Area::new(egui::Id::new("mobile_panel_buttons")).order(egui::Order::Foreground).fixed_pos(at).show(ctx, |ui| {
+            for (side, icon, name) in [(MobilePanel::Left, icons::Icon::Layers, i18n::tr("Layers")), (MobilePanel::Right, icons::Icon::Panels, i18n::tr("Design"))] {
+                let open = self.ui.mobile_panel == Some(side);
+                let (r, resp) = ui.allocate_exact_size(egui::vec2(40.0, 40.0), egui::Sense::click());
+                let resp = resp.tip(name);
+                let fill = if open { t.accent } else { t.panel };
+                ui.painter().rect(r, 8.0, fill, egui::Stroke::new(1.0, t.border), egui::StrokeKind::Inside);
+                icons::paint(ui.painter(), r.shrink(10.0), icon, if open { t.accent_text } else { t.icon });
+                if resp.clicked() {
+                    self.ui.mobile_panel = if open { None } else { Some(side) };
+                }
+                ui.add_space(4.0);
+            }
+        });
+    }
+
     pub(crate) fn frame(&mut self, ui: &mut egui::Ui) {
         let ctx = ui.ctx().clone();
         let t = theme::Tokens::get(&ctx);
@@ -1602,7 +1637,9 @@ impl FigApp {
             return;
         }
         let hidden = self.session.ds().map(|d| d.view.ui_hidden).unwrap_or(false);
-        if !hidden {
+        let narrow = !hidden && ui.available_width() < NARROW_WIDTH;
+        let mobile = self.ui.mobile_panel.filter(|_| narrow);
+        if !hidden && (!narrow || mobile == Some(MobilePanel::Left)) {
             egui::Panel::left("left_rail")
                 .exact_size(56.0)
                 .resizable(false)
@@ -1613,12 +1650,19 @@ impl FigApp {
                 });
         }
         // The panels are as wide as asked, less in a window too small for them and the canvas.
-        let left_open = !hidden && !self.ui.left_collapsed;
-        let (left_w, right_w) = fit_panels(ui.available_width(), left_open.then_some(self.ui.left_width), self.ui.right_width);
+        let left_open = !hidden && if narrow { mobile == Some(MobilePanel::Left) } else { !self.ui.left_collapsed };
+        let (left_w, right_w) = if narrow {
+            let w = (ui.available_width() - MOBILE_STRIP).max(0.0);
+            (if left_open { w } else { 0.0 }, w)
+        } else {
+            fit_panels(ui.available_width(), left_open.then_some(self.ui.left_width), self.ui.right_width)
+        };
         let rows = ui.available_rect_before_wrap().y_range();
         let mut edges: Vec<(&str, f32, f32, f32)> = Vec::new();
         if left_open {
-            edges.push(("left", ui.available_rect_before_wrap().min.x + left_w, left_w, 1.0));
+            if !narrow {
+                edges.push(("left", ui.available_rect_before_wrap().min.x + left_w, left_w, 1.0));
+            }
             egui::Panel::left("left_panel")
                 .resizable(false)
                 .exact_size(left_w)
@@ -1633,8 +1677,10 @@ impl FigApp {
                     layers::left_panel(self, ui)
                 });
         }
-        if !hidden {
-            edges.push(("right", ui.available_rect_before_wrap().max.x - right_w, right_w, -1.0));
+        if !hidden && (!narrow || mobile == Some(MobilePanel::Right)) {
+            if !narrow {
+                edges.push(("right", ui.available_rect_before_wrap().max.x - right_w, right_w, -1.0));
+            }
             egui::Panel::right("right_panel")
                 .resizable(false)
                 .exact_size(right_w)
@@ -1661,6 +1707,10 @@ impl FigApp {
                 });
             }
         });
+        if narrow {
+            let x = if mobile == Some(MobilePanel::Left) { ctx.content_rect().max.x - MOBILE_STRIP + 4.0 } else { ctx.content_rect().min.x + 4.0 };
+            self.mobile_buttons(&ctx, egui::pos2(x, rows.min + 8.0));
+        }
         // The panels' edges, over the canvas and the panels (drawn after them: they take the press).
         for (name, x, shown, grows) in edges {
             if let Some(w) = Self::panel_edge(ui, name, x, rows, shown, grows) {
diff --git a/crates/ui-egui/src/panel_width_tests.rs b/crates/ui-egui/src/panel_width_tests.rs
index a5a84d04..d27048f9 100644
--- a/crates/ui-egui/src/panel_width_tests.rs
+++ b/crates/ui-egui/src/panel_width_tests.rs
@@ -228,3 +228,32 @@ fn the_smallest_window_keeps_its_canvas_whatever_the_widths() {
         assert_eq!((app.ui.left_width, app.ui.right_width), asked, "the widths asked for come back in a wider window");
     }
 }
+
+/// A phone-sized window: the canvas has the whole width, and each side panel opens alone over it,
+/// leaving the strip with the panel buttons. A wide window ignores the choice.
+#[test]
+fn a_narrow_window_shows_one_side_panel_at_a_time() {
+    use crate::MobilePanel;
+    let ctx = egui::Context::default();
+    let mut app = FigApp::new(Session::new(), Box::new(NoServices));
+    let mut k = 0.0;
+    let mut canvas_width = |app: &mut FigApp, size: egui::Vec2| {
+        for _ in 0..4 {
+            k += 1.0 / 60.0;
+            let input = RawInput { screen_rect: Some(Rect::from_min_size(Pos2::ZERO, size)), time: Some(k), ..Default::default() };
+            ctx.run_ui(input, |ui| app.ui(ui)).textures_delta.clear();
+        }
+        app.canvas.rect.width()
+    };
+    let phone = vec2(390.0, 844.0);
+    assert!(app.session.execute("shape.rectangle", &json!({"x": 0, "y": 0, "width": 300, "height": 200})).is_ok());
+    assert!(canvas_width(&mut app, phone) >= 380.0, "closed panels leave the whole width");
+    for side in [MobilePanel::Left, MobilePanel::Right] {
+        app.ui.mobile_panel = Some(side);
+        let w = canvas_width(&mut app, phone);
+        assert!((1.0..=60.0).contains(&w), "{side:?}: the open panel leaves {w}");
+    }
+    app.ui.mobile_panel = Some(MobilePanel::Right);
+    let wide = canvas_width(&mut app, vec2(1440.0, 900.0));
+    assert!(wide > 600.0 && wide < 1100.0, "a wide window shows both panels beside the canvas ({wide})");
+}
diff --git a/crates/ui-egui/src/toolbar.rs b/crates/ui-egui/src/toolbar.rs
index d92cdf06..ee154c20 100644
--- a/crates/ui-egui/src/toolbar.rs
+++ b/crates/ui-egui/src/toolbar.rs
@@ -101,7 +101,21 @@ fn main_toolbar(app: &mut FigApp, ui: &mut Ui, canvas: Rect, t: &Tokens) {
     let width = main_width();
     let rect = pill(ui, &mut app.ui.nav, canvas, width, t);
     let current = app.session.tool.tool;
-    let mut x = rect.min.x + 8.0;
+    // Wider than the pill (a phone): the buttons slide sideways under a drag or the wheel.
+    let scroll_id = ui.id().with("tb_scroll");
+    let max_scroll = (width - rect.width()).max(0.0);
+    let mut scroll = ui.data(|d| d.get_temp::<f32>(scroll_id)).unwrap_or(0.0);
+    if max_scroll > 0.0 {
+        let drag = ui.ctx().read_response(ui.id().with("pill")).map_or(0.0, |r| r.drag_delta().x);
+        let wheel = if ui.rect_contains_pointer(rect) { ui.input(|i| i.smooth_scroll_delta.x + i.smooth_scroll_delta.y) } else { 0.0 };
+        scroll = (scroll - drag - wheel).clamp(0.0, max_scroll);
+    } else {
+        scroll = 0.0;
+    }
+    ui.data_mut(|d| d.insert_temp(scroll_id, scroll));
+    let outer_clip = ui.clip_rect();
+    ui.set_clip_rect(rect.intersect(outer_clip));
+    let mut x = rect.min.x + 8.0 - scroll;
     let cy = rect.center().y;
     for g in GROUPS {
         let in_group = g.tools.iter().any(|(tid, _)| *tid == current);
@@ -213,8 +227,12 @@ fn main_toolbar(app: &mut FigApp, ui: &mut Ui, canvas: Rect, t: &Tokens) {
             }
         }
     }
-    // Floating help button at the bottom right of the canvas.
-    let hr = Rect::from_center_size(pos2(canvas.max.x - 32.0, canvas.max.y - 32.0), vec2(32.0, 32.0));
+    ui.set_clip_rect(outer_clip);
+    // Floating help button at the bottom right of the canvas (above the pill when they'd overlap).
+    let mut hr = Rect::from_center_size(pos2(canvas.max.x - 32.0, canvas.max.y - 32.0), vec2(32.0, 32.0));
+    if hr.intersects(rect) {
+        hr = hr.translate(vec2(0.0, -(rect.height() + 12.0)));
+    }
     let hresp = ui.interact(hr, ui.id().with("help"), Sense::click()).tip(tr("Help and resources"));
     ui.painter().circle_filled(hr.center() + vec2(0.0, 1.0), 17.0, Color32::from_black_alpha(20));
     ui.painter().circle_filled(hr.center(), 16.0, t.panel);
@@ -356,7 +374,9 @@ fn builder_toolbar(app: &mut FigApp, ui: &mut Ui) {
 }
 
 /// Where a toolbar pill `width` wide sits: centred 12 px above the canvas's bottom edge.
+/// (Never wider than the canvas less a margin: on a phone the main toolbar scrolls inside it.)
 pub(crate) fn pill_rect(canvas: Rect, width: f32) -> Rect {
+    let width = width.min((canvas.width() - 16.0).max(0.0));
     Rect::from_center_size(pos2(canvas.center().x, canvas.max.y - 12.0 - 24.0), vec2(width, 48.0))
 }
 

From ab375119ad6b8085f025929cfda6f3cdf8723a6a Mon Sep 17 00:00:00 2001
From: aryans2611 <aryans8095@gmail.com>
Date: Fri, 23 Oct 2026 11:33:46 +0530
Subject: [PATCH 2/6] M6: mobile: submenus stay on screen, toolbar hides while
 a side panel is open

A submenu with no room beside its row (a phone) opens over its parent menu instead of off the
right edge. The toolbar pill is not drawn while a narrow window shows a side panel, where it was
squeezed into the strip left beside the panel.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 crates/ui-egui/src/lib.rs   |  2 +-
 crates/ui-egui/src/menus.rs | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/crates/ui-egui/src/lib.rs b/crates/ui-egui/src/lib.rs
index dedd287a..74358c60 100644
--- a/crates/ui-egui/src/lib.rs
+++ b/crates/ui-egui/src/lib.rs
@@ -1700,7 +1700,7 @@ impl FigApp {
             let mut worker = worker.unwrap_or_else(|| render_worker::Worker::new(ctx.clone()));
             canvas::show(self, ui, &mut worker);
             self.worker = Some(worker);
-            if !hidden {
+            if !hidden && mobile.is_none() {
                 ui.scope_builder(egui::UiBuilder::new().id_salt("toolbar"), |ui| {
                     a11y::container(ui, egui::accesskit::Role::Toolbar, i18n::tr("Tools"));
                     toolbar::show(self, ui);
diff --git a/crates/ui-egui/src/menus.rs b/crates/ui-egui/src/menus.rs
index 9659c6b3..edf6ba31 100644
--- a/crates/ui-egui/src/menus.rs
+++ b/crates/ui-egui/src/menus.rs
@@ -626,10 +626,19 @@ fn submenu_at<R>(
     if !open {
         return None;
     }
-    let pos = pos2(r.max.x + gap, r.min.y - 8.0);
+    let mut pos = pos2(r.max.x + gap, r.min.y - 8.0);
+    // No room beside the row (a phone): the submenu covers its parent instead of running off screen.
+    let screen = ui.ctx().content_rect();
+    let cramped = pos.x + MENU_W > screen.max.x;
+    if cramped {
+        pos.x = (screen.max.x - MENU_W - 8.0).max(screen.min.x + 4.0);
+    }
     let child = At { root: at.root, path: key.to_string() };
-    let shown =
-        egui::Area::new(area).fixed_pos(pos).order(egui::Order::Foreground).constrain(constrain).show(ui.ctx(), |ui| menu_frame(ui, t, child, add));
+    let shown = egui::Area::new(area)
+        .fixed_pos(pos)
+        .order(egui::Order::Foreground)
+        .constrain(constrain || cramped)
+        .show(ui.ctx(), |ui| menu_frame(ui, t, child, add));
     let panel = shown.response.rect;
     with_level(ui.ctx(), &at, |l| l.panel = Some(panel));
     shown.inner

From ea03f90aaf067876c72ee49221646f68d10f139b Mon Sep 17 00:00:00 2001
From: aryans2611 <aryans8095@gmail.com>
Date: Fri, 23 Oct 2026 13:09:25 +0530
Subject: [PATCH 3/6] M6: mobile: test that the toolbar pill fits a phone
 canvas; rustfmt

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 crates/ui-egui/src/lib.rs     |  4 +++-
 crates/ui-egui/src/toolbar.rs | 11 +++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/crates/ui-egui/src/lib.rs b/crates/ui-egui/src/lib.rs
index 74358c60..fff3d20f 100644
--- a/crates/ui-egui/src/lib.rs
+++ b/crates/ui-egui/src/lib.rs
@@ -1571,7 +1571,9 @@ impl FigApp {
         use a11y::Tip as _;
         let t = theme::Tokens::get(ctx);
         egui::Area::new(egui::Id::new("mobile_panel_buttons")).order(egui::Order::Foreground).fixed_pos(at).show(ctx, |ui| {
-            for (side, icon, name) in [(MobilePanel::Left, icons::Icon::Layers, i18n::tr("Layers")), (MobilePanel::Right, icons::Icon::Panels, i18n::tr("Design"))] {
+            for (side, icon, name) in
+                [(MobilePanel::Left, icons::Icon::Layers, i18n::tr("Layers")), (MobilePanel::Right, icons::Icon::Panels, i18n::tr("Design"))]
+            {
                 let open = self.ui.mobile_panel == Some(side);
                 let (r, resp) = ui.allocate_exact_size(egui::vec2(40.0, 40.0), egui::Sense::click());
                 let resp = resp.tip(name);
diff --git a/crates/ui-egui/src/toolbar.rs b/crates/ui-egui/src/toolbar.rs
index ee154c20..384ed108 100644
--- a/crates/ui-egui/src/toolbar.rs
+++ b/crates/ui-egui/src/toolbar.rs
@@ -492,6 +492,17 @@ mod tests {
     use super::*;
     use egui::Shape;
 
+    #[test]
+    fn pill_never_outgrows_a_phone_canvas() {
+        let phone = Rect::from_min_size(pos2(0.0, 0.0), vec2(375.0, 700.0));
+        let pill = pill_rect(phone, main_width());
+        assert!(pill.width() <= phone.width() - 16.0 && pill.min.x >= 8.0 && pill.max.x <= phone.max.x - 8.0, "{pill:?}");
+        // A desktop canvas keeps the full width, and a degenerate one doesn't go negative.
+        let wide = Rect::from_min_size(pos2(0.0, 0.0), vec2(1400.0, 800.0));
+        assert_eq!(pill_rect(wide, main_width()).width(), main_width());
+        assert_eq!(pill_rect(Rect::from_min_size(pos2(0.0, 0.0), vec2(4.0, 4.0)), main_width()).width(), 0.0);
+    }
+
     /// The stroke widths `icon` paints with in a `size` box at `ppp` pixels per point.
     fn widths(ppp: f32, icon: Icon, size: f32) -> Vec<f32> {
         let ctx = egui::Context::default();

From 8f51875700494fc0e23c62e34d945f02f4dafe2d Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Sat, 24 Oct 2026 10:08:50 +0700
Subject: [PATCH 4/6] #1209: the open panel button's icon uses accent_on, and
 frame() keeps its doc comment

The icon was painted accent_text on the accent fill (green on green); the inserted fn had taken
frame()'s doc line.
---
 crates/ui-egui/src/lib.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crates/ui-egui/src/lib.rs b/crates/ui-egui/src/lib.rs
index 088db689..f58ac4ce 100644
--- a/crates/ui-egui/src/lib.rs
+++ b/crates/ui-egui/src/lib.rs
@@ -1620,7 +1620,6 @@ impl FigApp {
         !hidden && (!board || self.ui.board_panel)
     }
 
-    /// One frame of the window drawing now.
     /// A narrow window's two buttons for the side panels (touch-sized); the open one closes again.
     fn mobile_buttons(&mut self, ctx: &egui::Context, at: egui::Pos2) {
         use a11y::Tip as _;
@@ -1634,7 +1633,7 @@ impl FigApp {
                 let resp = resp.tip(name);
                 let fill = if open { t.accent } else { t.panel };
                 ui.painter().rect(r, 8.0, fill, egui::Stroke::new(1.0, t.border), egui::StrokeKind::Inside);
-                icons::paint(ui.painter(), r.shrink(10.0), icon, if open { t.accent_text } else { t.icon });
+                icons::paint(ui.painter(), r.shrink(10.0), icon, if open { t.accent_on } else { t.icon });
                 if resp.clicked() {
                     self.ui.mobile_panel = if open { None } else { Some(side) };
                 }
@@ -1643,6 +1642,7 @@ impl FigApp {
         });
     }
 
+    /// One frame of the window drawing now.
     pub(crate) fn frame(&mut self, ui: &mut egui::Ui) {
         let ctx = ui.ctx().clone();
         let t = theme::Tokens::get(&ctx);

From 4babe5a04a2d5e2b80fab8ca6da996d4fa999614 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Sat, 24 Oct 2026 10:11:02 +0700
Subject: [PATCH 5/6] #1209: everything that opens or closes the left panel
 does so on a phone too

UiState::open_left_panel / close_left_panel set the narrow window's panel along with left_collapsed:
the Assets panel (Shift+I), libraries, file and layer rename, page select, version history, the rail
tabs, the panel's Collapse button and panel.leftSidebar (which toggles what a narrow window shows).
Test: view.assets opens the left panel in a phone-sized window.
---
 crates/ui-egui/src/layers.rs            |  8 ++---
 crates/ui-egui/src/lib.rs               | 39 ++++++++++++++++++++++---
 crates/ui-egui/src/menus.rs             |  4 +--
 crates/ui-egui/src/panel_width_tests.rs |  4 +++
 crates/ui-egui/src/versions.rs          |  2 +-
 5 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/crates/ui-egui/src/layers.rs b/crates/ui-egui/src/layers.rs
index f172b309..61eb4162 100644
--- a/crates/ui-egui/src/layers.rs
+++ b/crates/ui-egui/src/layers.rs
@@ -118,10 +118,10 @@ pub fn rail(app: &mut FigApp, ui: &mut Ui) {
                 Some(tb) => {
                     // Leaving the version history shows the tab rather than collapsing it.
                     if active {
-                        app.ui.left_collapsed = true;
+                        app.ui.close_left_panel();
                     } else {
                         app.ui.left_tab = tb;
-                        app.ui.left_collapsed = false;
+                        app.ui.open_left_panel();
                     }
                     app.ui.versions = Default::default();
                 }
@@ -161,7 +161,7 @@ pub fn left_panel(app: &mut FigApp, ui: &mut Ui) {
     }
     icons::paint(ui.painter(), hr.shrink(5.0), Icon::Panels, t.icon);
     if hresp.clicked() {
-        app.ui.left_collapsed = true;
+        app.ui.close_left_panel();
     }
     ui.painter().line_segment([head.left_bottom(), head.right_bottom()], Stroke::new(1.0, t.border));
     match app.ui.left_tab {
@@ -612,7 +612,7 @@ pub(crate) fn start_rename(app: &mut FigApp, ids: &[NodeId]) {
     let rows = listed_rows(&doc, page, &app.ui.expanded, &app.ui.layer_filter.trim().to_lowercase());
     let Some(id) = rows.iter().map(|r| r.id).find(|r| ids.contains(r)) else { return };
     app.ui.left_tab = LeftTab::File;
-    app.ui.left_collapsed = false;
+    app.ui.open_left_panel();
     rename_layer(app, id);
 }
 
diff --git a/crates/ui-egui/src/lib.rs b/crates/ui-egui/src/lib.rs
index f58ac4ce..b63668bb 100644
--- a/crates/ui-egui/src/lib.rs
+++ b/crates/ui-egui/src/lib.rs
@@ -491,6 +491,22 @@ pub enum MobilePanel {
     Left,
     Right,
 }
+
+impl UiState {
+    /// Opens the left panel; a narrow window shows it in place of the right one.
+    pub fn open_left_panel(&mut self) {
+        self.left_collapsed = false;
+        self.mobile_panel = Some(MobilePanel::Left);
+    }
+
+    /// Closes the left panel.
+    pub fn close_left_panel(&mut self) {
+        self.left_collapsed = true;
+        if self.mobile_panel == Some(MobilePanel::Left) {
+            self.mobile_panel = None;
+        }
+    }
+}
 pub const CANVAS_MIN: f32 = 160.0;
 
 /// The widths the side panels are drawn at in `avail` points (the window less the icon rail), from
@@ -645,6 +661,8 @@ pub struct UiState {
     pub left_collapsed: bool,
     /// The side panel open in a narrow window (a phone), where only one shows at a time.
     pub mobile_panel: Option<MobilePanel>,
+    /// The window was narrow (one side panel at a time) at the last frame.
+    pub narrow: bool,
     pub comments: comments::CommentUi,
     pub versions: versions::VersionUi,
     /// The branch review dialog, while open.
@@ -778,6 +796,7 @@ impl Default for UiState {
             batch_rename: None,
             left_collapsed: false,
             mobile_panel: None,
+            narrow: false,
             comments: comments::CommentUi::default(),
             versions: versions::VersionUi::default(),
             branch_review: None,
@@ -1054,7 +1073,14 @@ impl FigApp {
                 "panel.devMode" => {
                     self.ui.right_tab = if self.ui.right_tab == RightTab::Inspect { RightTab::Design } else { RightTab::Inspect };
                 }
-                "panel.leftSidebar" => self.ui.left_collapsed = !self.ui.left_collapsed,
+                "panel.leftSidebar" => {
+                    let shown = if self.ui.narrow { self.ui.mobile_panel == Some(MobilePanel::Left) } else { !self.ui.left_collapsed };
+                    if shown {
+                        self.ui.close_left_panel();
+                    } else {
+                        self.ui.open_left_panel();
+                    }
+                }
                 "panel.widths" => {
                     let width = |k: &str| r.data.get(k).and_then(Value::as_f64).map(|w| w as f32);
                     let (left, right) = (width("left"), width("right"));
@@ -1069,7 +1095,7 @@ impl FigApp {
                 "panel.layers" => self.ui.left_tab = LeftTab::File,
                 "panel.assets" => {
                     self.ui.left_tab = LeftTab::Assets;
-                    self.ui.left_collapsed = false;
+                    self.ui.open_left_panel();
                     self.ui.versions = Default::default();
                 }
                 "panel.versionHistory" => versions::open(self),
@@ -1078,7 +1104,7 @@ impl FigApp {
                 }
                 "panel.libraries" => {
                     self.ui.left_tab = LeftTab::Assets;
-                    self.ui.left_collapsed = false;
+                    self.ui.open_left_panel();
                     self.ui.libraries = true;
                 }
                 "home" => self.ui.home = true,
@@ -1635,7 +1661,11 @@ impl FigApp {
                 ui.painter().rect(r, 8.0, fill, egui::Stroke::new(1.0, t.border), egui::StrokeKind::Inside);
                 icons::paint(ui.painter(), r.shrink(10.0), icon, if open { t.accent_on } else { t.icon });
                 if resp.clicked() {
-                    self.ui.mobile_panel = if open { None } else { Some(side) };
+                    if side == MobilePanel::Left && !open {
+                        self.ui.open_left_panel();
+                    } else {
+                        self.ui.mobile_panel = if open { None } else { Some(side) };
+                    }
                 }
                 ui.add_space(4.0);
             }
@@ -1696,6 +1726,7 @@ impl FigApp {
         let hidden = self.session.ds().map(|d| d.view.ui_hidden).unwrap_or(false);
         let narrow = !hidden && ui.available_width() < NARROW_WIDTH;
         let mobile = self.ui.mobile_panel.filter(|_| narrow);
+        self.ui.narrow = narrow;
         // A narrow window shows the right panel when its button asks for it, a board's too.
         let right_open = (self.right_panel_shown(hidden) && !narrow) || mobile == Some(MobilePanel::Right);
         if !hidden && (!narrow || mobile == Some(MobilePanel::Left)) {
diff --git a/crates/ui-egui/src/menus.rs b/crates/ui-egui/src/menus.rs
index 47593193..8fbd88c3 100644
--- a/crates/ui-egui/src/menus.rs
+++ b/crates/ui-egui/src/menus.rs
@@ -231,7 +231,7 @@ pub fn invoke(app: &mut FigApp, id: &str) {
         // The file name in the left panel's header turns into its editor, the name selected.
         "file.rename" => {
             app.ui.left_tab = crate::LeftTab::File;
-            app.ui.left_collapsed = false;
+            app.ui.open_left_panel();
             app.ui.rename_file = true;
         }
         "text.link" => app.ui.menu_input = Some(crate::dialogs::MenuInput::Link(String::new())),
@@ -246,7 +246,7 @@ pub fn invoke(app: &mut FigApp, id: &str) {
         "tool.set" => app.ui.tool_flyout = Some("move"),
         "page.select" => {
             app.ui.left_tab = crate::LeftTab::File;
-            app.ui.left_collapsed = false;
+            app.ui.open_left_panel();
             app.ui.pages_open = true;
         }
         // From a menu the link is pasted into the Join dialog (`collab.join {link}` joins directly).
diff --git a/crates/ui-egui/src/panel_width_tests.rs b/crates/ui-egui/src/panel_width_tests.rs
index b1e937d5..70bfa927 100644
--- a/crates/ui-egui/src/panel_width_tests.rs
+++ b/crates/ui-egui/src/panel_width_tests.rs
@@ -254,6 +254,10 @@ fn a_narrow_window_shows_one_side_panel_at_a_time() {
         let w = canvas_width(&mut app, phone);
         assert!((1.0..=60.0).contains(&w), "{side:?}: the open panel leaves {w}");
     }
+    // A command that opens the left panel opens it on a phone too, in place of the right one.
+    app.run("view.assets", json!({}));
+    let w = canvas_width(&mut app, phone);
+    assert!((1.0..=60.0).contains(&w) && app.ui.mobile_panel == Some(MobilePanel::Left), "view.assets leaves {w}");
     app.ui.mobile_panel = Some(MobilePanel::Right);
     let wide = canvas_width(&mut app, vec2(1440.0, 900.0));
     assert!(wide > 600.0 && wide < 1100.0, "a wide window shows both panels beside the canvas ({wide})");
diff --git a/crates/ui-egui/src/versions.rs b/crates/ui-egui/src/versions.rs
index 2d0f9ae2..b3aa879c 100644
--- a/crates/ui-egui/src/versions.rs
+++ b/crates/ui-egui/src/versions.rs
@@ -50,7 +50,7 @@ impl Form {
 /// Open the panel (File ▸ Show version history).
 pub fn open(app: &mut FigApp) {
     app.ui.versions.open = true;
-    app.ui.left_collapsed = false;
+    app.ui.open_left_panel();
     app.ui.left_tab = crate::LeftTab::File;
 }
 

From d54186c9bf5779eed2795b54888f7efa47eb2993 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Mon, 26 Oct 2026 08:44:25 +0700
Subject: [PATCH 6/6] #1209: port the phone layout to egui 0.37

---
 crates/ui-egui/src/lib.rs     | 2 +-
 crates/ui-egui/src/toolbar.rs | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/crates/ui-egui/src/lib.rs b/crates/ui-egui/src/lib.rs
index 2882ebec..a5340853 100644
--- a/crates/ui-egui/src/lib.rs
+++ b/crates/ui-egui/src/lib.rs
@@ -1939,7 +1939,7 @@ impl FigApp {
     fn mobile_buttons(&mut self, ctx: &egui::Context, at: egui::Pos2) {
         use a11y::Tip as _;
         let t = theme::Tokens::get(ctx);
-        egui::Area::new(egui::Id::new("mobile_panel_buttons")).order(egui::Order::Foreground).fixed_pos(at).show(ctx, |ui| {
+        egui::Area::new(egui::Id::unique("mobile_panel_buttons")).order(egui::Order::Foreground).fixed_pos(at).show(ctx, |ui| {
             for (side, icon, name) in
                 [(MobilePanel::Left, icons::Icon::Layers, i18n::tr("Layers")), (MobilePanel::Right, icons::Icon::Panels, i18n::tr("Design"))]
             {
diff --git a/crates/ui-egui/src/toolbar.rs b/crates/ui-egui/src/toolbar.rs
index 531c7fc1..2c38be21 100644
--- a/crates/ui-egui/src/toolbar.rs
+++ b/crates/ui-egui/src/toolbar.rs
@@ -169,11 +169,11 @@ fn main_toolbar(app: &mut FigApp, ui: &mut Ui, canvas: Rect, t: &Tokens, board:
 /// How far the buttons of a pill `width` wide drawn at `rect` are scrolled: wider than the pill (a
 /// phone), they slide sideways under a drag or the wheel.
 fn pill_scroll(ui: &Ui, rect: Rect, width: f32) -> f32 {
-    let scroll_id = ui.id().with("tb_scroll");
+    let scroll_id = ui.scope_id().with("tb_scroll");
     let max_scroll = (width - rect.width()).max(0.0);
     let mut scroll = 0.0;
     if max_scroll > 0.0 {
-        let drag = ui.ctx().read_response(ui.id().with("pill")).map_or(0.0, |r| r.drag_delta().x);
+        let drag = ui.ctx().read_response(ui.scope_id().with("pill")).map_or(0.0, |r| r.drag_delta().x);
         let wheel = if ui.rect_contains_pointer(rect) { ui.input(|i| i.smooth_scroll_delta.x + i.smooth_scroll_delta.y) } else { 0.0 };
         scroll = (ui.data(|d| d.get_temp::<f32>(scroll_id)).unwrap_or(0.0) - drag - wheel).clamp(0.0, max_scroll);
     }