Polish Your Published App Look and Layout

Make published NotionApps feel like finished products — not utility admin forms. This guide covers the published-app visual system: login polish, layout density presets, form spacing and sticky Submit, desktop master–detail, details action rails, and cleaner app names (no more “Copy of …”).

Note

Who this is for
Makers who publish Create Forms, Lists, and Details to end users (desktop browsers and phones). Builder-only Phase A changes (nav rail, inspector tabs) are covered in separate Guides.

---

What you get

Feature	Where you configure it	What end users see
Login hero + wrapping title	Automatic from app color / icon / name	Brand-colored header, rounded inputs, full title (no hard 27-character cut)
Layout presets (Compact / Comfortable / Showcase)	Settings → General → Layout presets	Spacing, type scale, radii, and denser/airier forms & lists
Color presets	Same General preview (or Appearance)	Accent / theme color
Sticky desktop Submit	Create/Update Form Behaviour (or default)	Submit stays pinned while scrolling on desktop
Heading section rhythm	Add Heading comps on forms	Clear visual groups between field sections
Desktop master–detail	Automatic on wide desktop List screens	List left · details/forms right
Details sticky actions	Automatic on desktop Details	Edit / Delete stay visible at the bottom
Page Content TOC (new comps)	Show Page Content settings	Side TOC defaults on for new comps when enough headings exist
“Copy of” cleanup	Publish + login display	Clone prefixes stripped for end users

---

Before you start

You need:

• An application in the NotionApps builder with at least one List, one Details (or Update Form), and one Create Form
• Permission to Publish
• A desktop browser window wide enough to preview desktop layouts (about 1100px+ for master–detail)

Caution

Existing apps
Layout presets default to Comfortable. Apps without a saved preset keep today’s spacing until you pick Compact / Comfortable / Showcase. Page Content TOC stays off for older comps that never stored TOC prefs — only new Show Page Content comps default TOC on.

---

Part A — Layout presets (Compact / Comfortable / Showcase)

Layout presets change spacing, type, radii, and density — not only the accent color.

Step A1 — Open General settings

1. Open your app in the builder.
2. Click Settings in the left rail.
3. Stay on General (name, URL, workspace).
4. Look at the right-hand Appearance preview card.

Step A2 — Choose a layout preset

1. Find Layout presets.
2. Click one of:
   • Compact — tighter rows/padding, smaller type (dense ops UIs)
   • Comfortable — default; taller fields, softer radii (everyday work)
   • Showcase — larger type, airier spacing, fewer chrome lines (portals / catalogues)
3. Watch the mini phone preview update live.

Step A3 — Pair with a color preset

1. Under Layout presets, use Color presets (swatches) to set the accent.
2. For fonts / Custom CSS, open Appearance.

Tip

Maker tip
Layout presets change spacing and type. Color presets set the accent. Fine-tune fonts and CSS in Appearance.

When to use which preset

Goal	Preset
Field / ops tools with long lists	Compact
Most internal tools (recommended start)	Comfortable
Client portals, catalogues, editorial feel	Showcase

---

Part B — Login chrome (published app)

End users see a brand hero, a wrapping app title, and rounded login controls.

Step B1 — Set branding inputs

1. Settings → General: App name (avoid leaving “Copy of …” in names you care about for users — see Part F).
2. Settings → Appearance (or General color swatches): theme color.
3. Upload / select an App icon.

Step B2 — Preview the published login

1. Publish (or open the end-user URL for the app).
2. Confirm:
   • Title can wrap across 2–3 lines (not truncated mid-word at 27 characters)
   • Top band uses your theme color with the app icon
   • Email / code inputs and primary CTA use larger corner radii (~12px)
   • Google / Okta / Auth0 buttons still appear when enabled

Note

Desktop phone-preview Share App in the builder stays as-is. Full-width desktop login keeps the tinted page wash beside the card.

---

Part C — Form runtime (spacing + sticky Submit)

Step C1 — Open a Create or Update Form

1. Go to Screens.
2. Open a Create Form (for example Submit Service Request).
3. Switch the preview to Desktop.

Step C2 — Use Headings to group sections

1. In Add to screen / Logic, add Heading components between groups of fields.
2. Headings get extra vertical space so forms read as sections (without a new “section” component type).

Step C3 — Desktop sticky Submit

On desktop, Create/Update forms default to a sticky page footer Submit when you have not overridden placement.

1. Open the form’s submit / Behaviour controls.
2. Review Desktop position:
   • Leave unset / use sticky footer for long intake forms
   • Or set Floating / End of form / Match mobile as needed
     See also: Control Desktop Form Submit Placement.
3. Scroll the desktop preview — Submit should stay visible at the bottom when sticky.

Step C4 — Confirm phone is unchanged

1. Switch preview to Phone.
2. Confirm Submit still follows Mobile position only.

Note

Secondary destinations stay in the Phase A More overflow for bottom navigation. This release does not add a new form FAB.

---

Part D — Desktop master–detail (List | Details / Form)

On desktop with a wide enough preview/window (≥ ~1100px), List screens open records in a right pane instead of pushing a full-screen Details/Form.

Step D1 — Open a List on Desktop

1. Screens → select a List (for example Service Requests).
2. Switch preview to Desktop.
3. Optionally click Hide configuration so the preview is wide enough.
4. Until a row is selected, the right pane shows Select a row.

Step D2 — Select a row

1. Click a list row.
2. Details (or Update Form) open in the right pane.
3. Use Close on the pane toolbar to clear the selection (empty “Select a row” state).

Step D3 — Create from the list FAB

1. Click the list + / create action on desktop.
2. The Create Form opens in the right pane (same workspace), not a second phone column.

Step D4 — Phone / narrow desktop still stack

1. Switch to Phone preview (or shrink below the breakpoint).
2. Row tap still pushes Details/Form on the stack — mobile navigation is unchanged.

Caution

Master–detail does not appear if
Preview is Phone, or the desktop preview/container is narrower than ~1100px. Widen the window / hide configuration, then click a row again.

---

Part E — Details sticky action rail + Page Content TOC

Details sticky actions (desktop)

On desktop Details, primary actions (Edit / Delete) sit in a sticky footer rail — similar to sticky Submit on forms — so users do not scroll to find them.

Page Content table of contents (new comps)

1. On a Details (or Form) screen, add Show Page Content.
2. Open the component settings — Table of contents defaults to enabled for newly created comps.
3. TOC still only appears when the page has at least the minimum heading count (default 2).
4. Existing comps without stored TOC prefs stay off (no forced migration).

Note

Deep dive: Add a Table of Contents to Page Content.

---

Part F — Cleaner app names (“Copy of …”)

Cloning an app still creates draft names like Copy of …. End users should not see that prefix.

Surface	Behavior
Login / OTP titles	Leading Copy of is stripped (including nested copies)
Publish	Published app name is sanitized so clones stop shipping the prefix
Draft / builder name	Can still show Copy of … until you rename

Maker tip: After cloning, rename the app under Settings → General before you publish to customers.

---

End-to-end example (makers)

Goal: Ship a Service Request app that looks intentional on desktop and phone.

1. Settings → General → Layout preset Comfortable + your brand color.
2. Confirm login on the published URL (hero color, wrapping title, rounded fields).
3. Open Submit Service Request → Desktop preview → sticky Submit + Heading sections.
4. Open Service Requests List → Desktop + wide preview → click a row → details in the right pane with sticky Edit/Delete.
5. Switch to Phone → confirm stack navigation and mobile Submit.
6. Publish and retest the live app.

---

Checklist

• Layout preset chosen (Compact / Comfortable / Showcase)
• Color / icon set for login hero
• Published login title wraps; no hard truncate
• Forms use Headings for section grouping
• Desktop Submit sticky (or intentional override)
• Phone Submit still follows Mobile position
• Desktop List shows master–detail at wide width
• Phone List still stack-pushes Details/Form
• Details sticky Edit/Delete on desktop
• New Page Content comps: TOC enabled when headings qualify
• App renamed / publish sanitized (no customer-facing “Copy of …”)
• App Published

---

Troubleshooting

Symptom	Likely cause	What to do
Layout presets do nothing in preview	Looking at Appearance only / not saved	Use General → Layout presets; wait for save; refresh preview
Login title still truncated	Old published build	Publish again; hard-refresh end-user
No master–detail pane	Phone preview or narrow desktop	Desktop view + widen ≥ ~1100px; Hide configuration
Row still full-screen pushes on desktop	Below breakpoint	Widen preview; confirm Desktop toggle
Sticky Submit missing	Desktop position = Match mobile / overridden	Set Sticky page footer (or clear override)
TOC missing on old Page Content	Existing comps default off	Enable TOC in component settings
“Copy of” still on login	Name does not start with prefix, or not published	Rename in General; publish

---

Related Guides

• Control Desktop Form Submit Placement
• Add a Table of Contents to Page Content
• Find Your Way Around the Builder Nav Rail
• Custom CSS Guide
• Custom Font Guide

---

Builder options at a glance

This guide teaches a focused maker workflow. For the full screen option inventory (What it does / How to use / Why) and annotated builder screenshots, use the matching Types of Screens guide:

• Data screens: List (View Items), Details, Form (Add Item), Form (Update One Item), List (Update Items), Content
• Everyday chrome / Queue & activity: see the Types of Screens index
• Automation native screens: Native Automation Screens

Recommended defaults

• Change one option family at a time, then publish and test on phone and desktop.
• Prefer screen-level settings in Content / Behaviour / Appearance before custom CSS/JS.
• Keep public access and navigation visibility intentional on every screen you link from this guide.