:art: Add padding for slim viewports.

2 files changed, 14 insertions, 2 deletions

diff --git a/examples/02-interactivity/README.md b/examples/02-interactivity/README.md
index d97f618..d2e486a 100644
--- a/examples/02-interactivity/README.md
+++ b/examples/02-interactivity/README.md
@@ -94,7 +94,9 @@ _exhaustiveness checking_ to ensure we handle all possible messages.
 
 ### View
 
-
+Because state management is handled in our `update` function, our `view` becomes
+a simple function that takes a model and returns some HTML in the form of a
+Lustre `Element`.
 
 ```gleam
 fn view(model: Model) -> Element(Msg) {
@@ -102,6 +104,16 @@ fn view(model: Model) -> Element(Msg) {
 }
 ```
 
+In Lustre we call _all_ functions that return an `Element` "view functions": there's
+nothing special about the `view` that takes your model.
+
+Folks coming from frameworks like React might notice the absence of components
+with local encapsulated state. Lustre _does_ have components like this, but unlike
+other frameworks these are a fairly advanced use of the library and are typically
+used for larger pieces of UI like an entire form or a table. We'll cover how
+components fit into Lustre in later examples, but for now resist the urge to think
+in terms of "components" and "state" and try to think of your UI as a composition
+of _view functions_.
 
 ## Creating a dynamic Lustre application
 
diff --git a/examples/02-interactivity/src/app.gleam b/examples/02-interactivity/src/app.gleam
index e47b7a4..d4b5eb6 100644
--- a/examples/02-interactivity/src/app.gleam
+++ b/examples/02-interactivity/src/app.gleam
@@ -50,8 +50,8 @@ fn update(model: Model, msg: Msg) -> Model {
 // VIEW ------------------------------------------------------------------------
 
 fn view(model: Model) -> Element(Msg) {
+  let styles = [#("width", "100vw"), #("height", "100vh"), #("padding", "1rem")]
   let count = int.to_string(model)
-  let styles = [#("width", "100vw"), #("height", "100vh")]
 
   ui.centre(
     [attribute.style(styles)],