Compact diagram instructions and add contextual help overlay

crates/oa-desktop/src/behavior/state_view.rs

@@ -225,13 +225,13 @@ fn selection_controls(app: &App) -> Element<'_, Message> {
         }
         controls = controls
             .push(action(
-                "Clear selection",
+                "Clear",
                 Message::DiagramSelection(SelectionEvent::Clear(snapshot.context())),
             ))
             .push(
                 label(format!(
-                    "Properties edit only {}",
-                    crate::views::short(app.project().named(app.selected), 18)
+                    "Properties: {} only",
+                    crate::views::short(app.project().named(app.selected), 10)
                 ))
                 .wrapping(iced::widget::text::Wrapping::None),
             );
@@ -241,12 +241,12 @@ fn selection_controls(app: &App) -> Element<'_, Message> {
     } else {
         "Use Select / move to select multiple elements"
     };
-    column![
-        controls,
-        label(hint).wrapping(iced::widget::text::Wrapping::None)
-    ]
-    .height(56)
-    .into()
+    controls
+        .push(crate::views::diagram_help(
+            crate::guide::Topic::States,
+            hint,
+        ))
+        .into()
 }
 
 fn transition_details(machine: Id, selected: Id) -> Element<'static, Message> {