Position & Docking

The Global Toolbar should never get in your way. That’s why you can drag it vertically and, if needed, dock it to a screen edge, where it lives on as a small indicator.

Vertical drag

1. Press and hold Hold your finger on the toolbar — it gets visually emphasized (stronger shadow, colored border) and a drag indicator appears on the left.

2. Drag vertically Move your finger up or down. The toolbar follows immediately.

3. Release On release, the position is automatically saved in the app configuration.

Limits

The toolbar always stays inside the visible area:

Limit	Value
Minimum offset from the bottom	16 px (above the device safe area)
Maximum height	screen height minus 200 px
Default position	80 px from the bottom

So you cannot accidentally push it off-screen.

Persistence

The vertical position is stored in the AppConfig under toolbarVerticalOffset. That means:

• ✅ Position survives app restart
• ✅ Position survives hot reload
• ✅ Position is restored on the next launch

Docking (swipe-to-dock)

When you don’t need the toolbar right now, swipe it to the side to clear your screen.

1. Horizontal swipe Place your finger on the toolbar and swipe left or right.

2. Cross the threshold Only when you cover more than 60 px or swipe with a velocity of more than 300 px/s, it docks.

3. Animated transition The toolbar glides to the chosen edge and transforms into a small dock indicator.

Indicator

The indicator is a small, subtle element at the screen edge. It:

• Sticks to your current toolbar position vertically (not to a fixed spot)
• Shows a small notification dot when hidden buttons have open badges
• Expands again on tap

Discoverability hint

The first time the toolbar appears, you get a snackbar at the top: “Tip: swipe the toolbar left or right to hide it.”

This hint shows only once and is then marked as seen in the configuration.

Bring it back

You can restore the toolbar in two ways:

1. Tap the indicator at the screen edge
2. Swipe from the indicator toward the center (opposite direction of docking)

The toolbar smoothly slides back to the center and is fully usable again.

Persisted state

Three values are stored for the toolbar so it behaves identically across launches:

Value	Storage key	Meaning
Vertical position	toolbarVerticalOffset	Distance from the bottom in pixels
Dock state	toolbarDockState	expanded / dockedLeft / dockedRight
Swipe hint shown	toolbarSwipeHintShown	true once the discoverability snackbar has been seen

Special cases

Keyboard is open

When the on-screen keyboard is up, the toolbar is normally hidden, so it doesn’t block content. Exception: if search is active, the toolbar (with the search field) stays above the keyboard — otherwise you’d lose the search field as soon as the keyboard opened.

Search is active

While search is active, the dock state is temporarily ignored. The toolbar is always shown as a full toolbar in the center, so the search field and result dropdown have room to breathe. As soon as you close search, the previous dock state is restored.

On an excluded route

On routes like the Page Builder, Form Builder or during onboarding, the toolbar is not shown at all — regardless of dock state. As soon as you leave those areas, it returns.

Tips

Device orientation

The toolbar adapts automatically to portrait and landscape. On rotation, the position is preserved relative to the bottom edge.

Two-handed setup

If you work intensively with both the toolbar and screen content, dock it on the side opposite your writing hand — that way the indicator never covers what you’re editing.

Reset position

Want the toolbar back at the default position? Just drag it where you want it (e.g. about 80 px above the bottom) — it remembers the new spot.