docs(ui-docs): document `gap-x` prop (Layout); document `@click` (Button)

front/ui-docs/components/ui/button.md

@@ -38,7 +38,7 @@ Buttons are UI elements that users can interact with to perform actions and mani
 
 ## Action
 
-[The default action of buttons is `submit` \[mdn\]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type). Specify an `onClick` function to change the behavior of a button.
+[The default action of buttons is `submit` \[mdn\]](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type). Specify an [`onClick` or `@click`](#short-form-click) function to change the behavior of a button.
 
 ```vue-html
 <form>
@@ -52,6 +52,18 @@ Buttons are UI elements that users can interact with to perform actions and mani
   <Button :onClick="() => {}">With `onClick`</Button>
 </form>
 
+### Short-form @click
+
+For convenience, you can use the Vue-specific `@click` syntax to add the `onClick` prop. The following two buttons are effectively equal:
+
+```vue-html
+  <Button :onClick="() => { console.log('Hi!') }"> Long form </Button>
+  <Button @click="console.log('Hi!')"> Short form </Button>
+```
+
+<Button :onClick="() => { console.log('Hi!') }"> Long form </Button>
+<Button @click="console.log('Hi!')"> Short form </Button>
+
 ## Button colors
 
 Buttons come in different types depending on the type of action they represent.
@@ -60,6 +72,8 @@ Find [a complete overview of recommended styles on the color page](../../using-c
 
 ### Default
 
+Default buttons represent **neutral** actions such as cancelling a change or dismissing a notification.
+
 <Layout grid class="preview transparent">
 
 <div style="grid-column: span 3">

front/ui-docs/components/ui/layout.md

@@ -21,11 +21,13 @@ import Layout from "~/components/ui/Layout.vue"
 
 CSS provides [four methods to arrange items in a container](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_methods): Flow, Columns, Flex and Grid. To make typical alignment tasks in the Funkwhale Ui easier, we have created a few useful presets.
 
+By default, the items have a 32px gap. You can [change it with the `gap-x` prop](#gap-x-set-the-gap-to-one-of-the-defaults).
+
 ## Apply presets
 
 The following containers are responsive. Change your window's size or select a device preset from your browser's dev tools to see how layouts are affected by available space.
 
-<Layout flex style="--gap:8px">
+<Layout flex gap-8>
   <Card width="163px" title="flex" to="/components/ui/layout/flex" >
     <Layout flex style="outline: 4px dashed var(--border-color)">
       <Button primary icon="bi-eye" />
@@ -41,7 +43,7 @@ The following containers are responsive. Change your window's size or select a d
     </Layout>
   </Card>
   <Card width="163px" title="stack" to="/components/ui/layout/stack">
-    <Layout stack style="--gap:0; margin:-8px; outline: 4px dashed var(--border-color)">
+    <Layout stack no-gap style="margin:-8px; outline: 4px dashed var(--border-color)">
       <Button primary icon="bi-eye" />
       <Button outline icon="bi-eye" />
       <Button destructive icon="bi-eye" />
@@ -66,6 +68,12 @@ Add one of these props to your `Layout` component to turn them into semantic con
 
 ## Common props
 
+### `gap-x`: Set the gap to one of the defaults
+
+```ts
+`gap-${'4' | '8' | '12' | '16' | '24' | '32' | '48' | '64' | 'auto'}`
+```
+
 ### `no-gap`: Remove the gap between items
 
 <Layout flex>