separate editor FAB and panel for cleaner animation

Split the editor sheet into two distinct elements:
- .editor-fab: floating action button, always a pill in the corner
- .editor-panel: sliding panel that animates in/out independently

This enables proper CSS keyframe animations (slide-up/down on mobile,
slide-in/out on desktop) with a closing class for exit transitions.
Simplified the JS hook to only handle close behaviour.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

assets/css/admin/components.css

@@ -2378,94 +2378,19 @@
 }
 
 /* ══════════════════════════════════════════════════════════════════════════
-   Editor sheet (unified bottom/right sheet for page editing)
+   Editor FAB + Panel (page editing)
+
+   Two separate elements:
+   - .editor-fab: floating action button, always a pill in the corner
+   - .editor-panel: sliding panel, animates in/out
    ══════════════════════════════════════════════════════════════════════════ */
 
-.editor-sheet {
+/* ── Floating action button ── */
+.editor-fab {
   position: fixed;
   z-index: 1000;
-  background: var(--t-surface-base);
-  box-shadow: var(--t-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
-  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
-  display: flex;
-  flex-direction: column;
-}
-
-
-
-@media (prefers-reduced-motion: reduce) {
-  .editor-sheet {
-    transition: none;
-  }
-}
-
-/* ── Mobile: bottom-anchored ── */
-@media (max-width: 767px) {
-  /* Collapsed: floating pill button, no panel background */
-  .editor-sheet {
-    left: auto;
   right: 16px;
   bottom: 16px;
-    top: auto;
-    width: auto;
-    height: auto;
-    background: transparent;
-    box-shadow: none;
-    border: none;
-    border-radius: 0;
-  }
-
-  /* Open: full panel from bottom */
-  .editor-sheet[data-state="open"] {
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 15dvh;
-    width: auto;
-    height: auto;
-    background: var(--t-surface-base);
-    box-shadow: var(--t-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
-    border-radius: var(--t-radius-lg, 12px) var(--t-radius-lg, 12px) 0 0;
-    border: 1px solid var(--t-border-default);
-    border-bottom: none;
-  }
-}
-
-/* ── Desktop: right-anchored ── */
-/* ── Desktop: same floating button, side panel when open ── */
-@media (min-width: 768px) {
-  /* Collapsed: floating pill button, no panel background (same as mobile) */
-  .editor-sheet {
-    left: auto;
-    right: 16px;
-    bottom: 16px;
-    top: auto;
-    width: auto;
-    height: auto;
-    background: transparent;
-    box-shadow: none;
-    border: none;
-    border-radius: 0;
-  }
-
-  /* Open: side panel from right */
-  .editor-sheet[data-state="open"] {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 420px;
-    max-width: 90vw;
-    background: var(--t-surface-base);
-    box-shadow: var(--t-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
-    border-radius: var(--t-radius-lg, 12px) 0 0 var(--t-radius-lg, 12px);
-    border: 1px solid var(--t-border-default);
-    border-right: none;
-  }
-}
-
-
-/* ── Edit button in collapsed state ── */
-.editor-sheet-edit-btn {
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -2478,62 +2403,119 @@
   font-weight: 500;
   cursor: pointer;
   transition: filter 0.15s, box-shadow 0.15s;
-  /* Soft glow for visibility over any background */
   box-shadow:
     0 2px 8px rgba(0, 0, 0, 0.2),
     0 0 0 3px rgba(255, 255, 255, 0.6);
 }
 
-.editor-sheet-edit-btn:hover {
+.editor-fab:hover {
   filter: brightness(1.1);
 }
 
-.editor-sheet-edit-btn svg {
+.editor-fab svg {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }
 
-
+.editor-fab-dirty {
-/* ── Dirty indicator ── */
-.editor-sheet-dirty {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: var(--t-status-warning, oklch(0.75 0.18 85));
-  font-size: 0.75rem;
-  font-weight: 500;
-}
-
-.editor-sheet-dirty-dot {
   width: 8px;
   height: 8px;
   border-radius: 9999px;
-  background: currentColor;
+  background: var(--t-status-warning, oklch(0.75 0.18 85));
+  flex-shrink: 0;
 }
 
-/* Desktop collapsed: hide "Unsaved" text, show only dot */
+/* ── Editor panel ── */
+.editor-panel {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  background: var(--t-surface-base);
+  box-shadow: var(--t-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.15));
+}
+
+/* Hidden when collapsed (but not during close animation) */
+.editor-panel[data-state="collapsed"]:not(.closing) {
+  display: none;
+}
+
+/* ── Mobile: bottom sheet ── */
+@media (max-width: 767px) {
+  .editor-panel[data-state="open"],
+  .editor-panel.closing {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 15dvh;
+    border-radius: var(--t-radius-lg, 12px) var(--t-radius-lg, 12px) 0 0;
+    border: 1px solid var(--t-border-default);
+    border-bottom: none;
+  }
+
+  .editor-panel[data-state="open"] {
+    animation: editor-panel-slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
+  }
+
+  .editor-panel.closing {
+    animation: editor-panel-slide-down 0.25s cubic-bezier(0.32, 0.72, 0, 1) both;
+  }
+}
+
+@keyframes editor-panel-slide-up {
+  from { opacity: 0; transform: translateY(24px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes editor-panel-slide-down {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(24px); }
+}
+
+/* ── Desktop: side panel ── */
 @media (min-width: 768px) {
-  .editor-sheet[data-state="collapsed"] .editor-sheet-dirty span:not(.editor-sheet-dirty-dot) {
+  .editor-panel[data-state="open"],
-    /* Visually hidden but accessible to screen readers */
+  .editor-panel.closing {
-    position: absolute;
+    top: 0;
-    width: 1px;
+    right: 0;
-    height: 1px;
+    bottom: 0;
-    padding: 0;
+    width: 420px;
-    margin: -1px;
+    max-width: 90vw;
-    overflow: hidden;
+    border-radius: var(--t-radius-lg, 12px) 0 0 var(--t-radius-lg, 12px);
-    clip: rect(0, 0, 0, 0);
+    border: 1px solid var(--t-border-default);
-    white-space: nowrap;
+    border-right: none;
-    border: 0;
   }
 
-  .editor-sheet[data-state="collapsed"] .editor-sheet-dirty {
+  .editor-panel[data-state="open"] {
-    position: relative;
+    animation: editor-panel-slide-in 0.3s cubic-bezier(0.32, 0.72, 0, 1) both;
+  }
+
+  .editor-panel.closing {
+    animation: editor-panel-slide-out 0.25s cubic-bezier(0.32, 0.72, 0, 1) both;
   }
 }
 
-/* ── Sheet header (when expanded) ── */
+@keyframes editor-panel-slide-in {
-.editor-sheet-header {
+  from { opacity: 0; transform: translateX(24px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes editor-panel-slide-out {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(24px); }
+}
+
+/* Disable animations for users who prefer reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .editor-panel[data-state="open"],
+  .editor-panel.closing {
+    animation: none;
+  }
+}
+
+/* ── Panel header ── */
+.editor-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2543,28 +2525,45 @@
   gap: 0.5rem;
 }
 
-.editor-sheet-header-left {
+.editor-panel-header-left {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   min-width: 0;
 }
 
-.editor-sheet-title {
+.editor-panel-title {
   font-size: 0.875rem;
   font-weight: 600;
   color: var(--t-text-primary);
 }
 
-.editor-sheet-header-actions {
+.editor-panel-header-actions {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   flex-shrink: 0;
 }
 
-/* ── Sheet content ── */
+/* ── Dirty indicator ── */
-.editor-sheet-content {
+.editor-panel-dirty {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  color: var(--t-status-warning, oklch(0.75 0.18 85));
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.editor-panel-dirty-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 9999px;
+  background: currentColor;
+}
+
+/* ── Panel content ── */
+.editor-panel-content {
   flex: 1;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -2575,18 +2574,8 @@
   }
 }
 
-/* ── Hide content when collapsed ── */
+/* ── Page header inside panel ── */
-.editor-sheet[data-state="collapsed"] .editor-sheet-content {
+.editor-panel-page-header {
-  display: none;
-}
-
-/* Collapsed header doesn't need bottom border */
-.editor-sheet[data-state="collapsed"] .editor-sheet-header {
-  border-bottom: none;
-}
-
-/* ── Page header inside sheet ── */
-.editor-sheet-page-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -2598,7 +2587,7 @@
   }
 }
 
-.editor-sheet-page-title {
+.editor-panel-page-title {
   font-size: 0.9375rem;
   font-weight: 600;
   flex: 1;
@@ -2612,26 +2601,26 @@
   }
 }
 
-.editor-sheet-undo-redo {
+.editor-panel-undo-redo {
   display: flex;
   align-items: center;
   gap: 0.25rem;
   flex-shrink: 0;
 }
 
-/* Picker inside the editor sheet — grid scrolls within a capped height */
+/* Picker inside the editor panel — grid scrolls within a capped height */
-.editor-sheet .block-picker-overlay {
+.editor-panel .block-picker-overlay {
   position: static;
   background: none;
 }
 
-.editor-sheet .block-picker {
+.editor-panel .block-picker {
   border-radius: 0;
   max-height: none;
   padding: 0;
 }
 
-.editor-sheet .block-picker-grid {
+.editor-panel .block-picker-grid {
   max-height: 45dvh;
   overflow-y: auto;
 }

assets/js/app.js

@@ -679,28 +679,25 @@ const DirtyGuard = {
   }
 }
 
-// EditorSheet: simple open/collapse sheet for page editing
+// EditorSheet: handles click-outside and Escape for the editor panel
-// Positioning is handled by CSS - JS just handles click-outside and Escape
 const EditorSheet = {
   mounted() {
-    // Click outside to collapse (works in any mode for preview)
-    // Use mousedown instead of click to avoid race with LiveView re-renders
     this._onDocMousedown = (e) => {
-      if (!this.el.contains(e.target) && this._getState() !== "collapsed") {
+      if (this._getState() !== "open") return
-        this._setState("collapsed")
+      const fab = document.querySelector(".editor-fab")
-      }
+      if (this.el.contains(e.target)) return
+      if (fab && fab.contains(e.target)) return
+      this._close()
     }
     document.addEventListener("mousedown", this._onDocMousedown)
 
-    // Escape key to collapse
     this._onKeydown = (e) => {
-      if (e.key === "Escape" && this._getState() !== "collapsed") {
+      if (e.key === "Escape" && this._getState() === "open") {
         e.preventDefault()
-        this._setState("collapsed")
+        this._close()
       }
     }
     document.addEventListener("keydown", this._onKeydown)
-
   },
 
   destroyed() {
@@ -712,11 +709,22 @@ const EditorSheet = {
     return this.el.dataset.state || "collapsed"
   },
 
-  _setState(state) {
+  _close() {
-    this.el.dataset.state = state
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches
-    this.el.setAttribute("aria-expanded", state !== "collapsed")
+    if (prefersReducedMotion) {
-    this.pushEvent("editor_set_sheet_state", { state })
+      this.el.setAttribute("aria-hidden", "true")
-    this._announce(state === "collapsed" ? "Editor collapsed" : "Editor expanded")
+      this.pushEvent("editor_set_sheet_state", { state: "collapsed" })
+      this._announce("Editor collapsed")
+      return
+    }
+
+    this.el.classList.add("closing")
+    this.el.addEventListener("animationend", () => {
+      this.el.classList.remove("closing")
+      this.el.setAttribute("aria-hidden", "true")
+      this.pushEvent("editor_set_sheet_state", { state: "collapsed" })
+      this._announce("Editor collapsed")
+    }, { once: true })
   },
 
   _announce(message) {

lib/berrypod_web/components/shop_components/layout.ex

@@ -1066,54 +1066,40 @@ defmodule BerrypodWeb.ShopComponents.Layout do
 
   def editor_sheet(assigns) do
     ~H"""
+    <%!-- Floating action button: always visible when panel is closed --%>
+    <button
+      :if={@editor_sheet_state == :collapsed}
+      type="button"
+      phx-click={if @editing, do: "editor_set_sheet_state", else: "editor_toggle_editing"}
+      phx-value-state={if @editing, do: "open", else: nil}
+      class="editor-fab"
+      aria-label={if @editing, do: "Show editor", else: "Edit page"}
+    >
+      <.edit_pencil_svg />
+      <span>{if @editing, do: "Show editor", else: "Edit page"}</span>
+      <span :if={@editing && @editor_dirty} class="editor-fab-dirty" aria-label="Unsaved changes" />
+    </button>
+
+    <%!-- Editor panel: slides in/out --%>
     <aside
-      id="editor-sheet"
+      id="editor-panel"
-      class="editor-sheet"
+      class="editor-panel"
       role="region"
       aria-label="Page editor"
-      aria-expanded={to_string(@editor_sheet_state != :collapsed)}
+      aria-hidden={to_string(@editor_sheet_state == :collapsed)}
       data-state={@editor_sheet_state}
       data-editing={to_string(@editing)}
       phx-hook="EditorSheet"
     >
-      <%!-- Header: content varies by state and editing mode --%>
+      <div class="editor-panel-header">
-      <div class="editor-sheet-header">
+        <div class="editor-panel-header-left">
-        <%= if @editor_sheet_state == :collapsed and not @editing do %>
+          <span class="editor-panel-title">Page editor</span>
-          <%!-- Not editing, collapsed: show Edit button to enter edit mode --%>
+          <span :if={@editor_dirty} class="editor-panel-dirty" aria-live="polite">
-          <button
+            <span class="editor-panel-dirty-dot" aria-hidden="true" />
-            type="button"
-            phx-click="editor_toggle_editing"
-            class="editor-sheet-edit-btn"
-          >
-            <.edit_pencil_svg />
-            <span>Edit page</span>
-          </button>
-        <% end %>
-        <%= if @editor_sheet_state == :collapsed and @editing do %>
-          <%!-- Editing but collapsed: show button to expand sheet (for previewing) --%>
-          <button
-            type="button"
-            phx-click="editor_set_sheet_state"
-            phx-value-state="open"
-            class="editor-sheet-edit-btn"
-          >
-            <.edit_pencil_svg />
-            <span>Show editor</span>
-          </button>
-          <span :if={@editor_dirty} class="editor-sheet-dirty" aria-live="polite">
-            <span class="editor-sheet-dirty-dot" aria-hidden="true" />
-            <span>Unsaved</span>
-          </span>
-        <% end %>
-        <%= if @editor_sheet_state != :collapsed do %>
-          <div class="editor-sheet-header-left">
-            <span class="editor-sheet-title">Page editor</span>
-            <span :if={@editor_dirty} class="editor-sheet-dirty" aria-live="polite">
-              <span class="editor-sheet-dirty-dot" aria-hidden="true" />
             <span>Unsaved</span>
           </span>
         </div>
-          <div class="editor-sheet-header-actions">
+        <div class="editor-panel-header-actions">
           <button
             :if={@editor_save_status == :saved}
             type="button"
@@ -1132,11 +1118,9 @@ defmodule BerrypodWeb.ShopComponents.Layout do
             Save
           </button>
         </div>
-        <% end %>
       </div>
 
-      <%!-- Content area (hidden when collapsed) --%>
+      <div class="editor-panel-content">
-      <div class="editor-sheet-content">
         {render_slot(@inner_block)}
       </div>
     </aside>

lib/berrypod_web/page_renderer.ex

@@ -128,9 +128,9 @@ defmodule BerrypodWeb.PageRenderer do
     ~H"""
     <div id="editor-sheet-inner" phx-hook="EditorKeyboard" data-dirty={to_string(@editor_dirty)}>
       <%!-- Page title and undo/redo --%>
-      <div class="editor-sheet-page-header">
+      <div class="editor-panel-page-header">
-        <h3 class="editor-sheet-page-title">{@page.title}</h3>
+        <h3 class="editor-panel-page-title">{@page.title}</h3>
-        <div class="editor-sheet-undo-redo">
+        <div class="editor-panel-undo-redo">
           <button
             phx-click="editor_undo"
             class={[

test/berrypod_web/live/shop/custom_page_test.exs

@@ -125,13 +125,13 @@ defmodule BerrypodWeb.Shop.CustomPageTest do
       {:ok, view, _html} = live(conn, "/editable")
 
       # Editor sheet should be visible for admins
-      assert has_element?(view, ".editor-sheet")
+      assert has_element?(view, ".editor-panel")
 
       # Click the edit button in the sheet to enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
       # Now the editor sheet content should be visible (sheet state changes to open)
-      assert has_element?(view, ".editor-sheet-content")
+      assert has_element?(view, ".editor-panel-content")
     end
   end
 end

test/berrypod_web/page_editor_hook_test.exs

@@ -32,7 +32,7 @@ defmodule BerrypodWeb.PageEditorHookTest do
     test "editor sheet is not shown for non-admins", %{conn: conn} do
       {:ok, _view, html} = live(conn, "/")
 
-      refute html =~ "editor-sheet"
+      refute html =~ "editor-panel"
       refute html =~ "Edit page"
     end
   end
@@ -42,14 +42,14 @@ defmodule BerrypodWeb.PageEditorHookTest do
       conn = log_in_user(conn, user)
       {:ok, view, _html} = live(conn, "/")
 
-      assert has_element?(view, ".editor-sheet")
+      assert has_element?(view, ".editor-panel")
       assert has_element?(view, "button", "Edit page")
     end
 
     test "non-admin does not see editor sheet", %{conn: conn} do
       {:ok, view, _html} = live(conn, "/")
 
-      refute has_element?(view, ".editor-sheet")
+      refute has_element?(view, ".editor-panel")
       refute has_element?(view, "button", "Edit page")
     end
   end
@@ -63,41 +63,41 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/")
 
       # Sheet starts collapsed
-      assert has_element?(view, ".editor-sheet[data-state='collapsed']")
+      assert has_element?(view, ".editor-panel[data-state='collapsed']")
 
       # Click edit button (the specific edit button class)
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
       # Now editing, sheet expanded
-      assert has_element?(view, ".editor-sheet[data-editing='true']")
+      assert has_element?(view, ".editor-panel[data-editing='true']")
-      assert has_element?(view, ".editor-sheet-content")
+      assert has_element?(view, ".editor-panel-content")
       assert has_element?(view, ".block-card")
     end
 
     test "sheet shows the page title when editing", %{conn: conn} do
       {:ok, view, _html} = live(conn, "/")
 
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
-      assert has_element?(view, ".editor-sheet-page-title", "Home page")
+      assert has_element?(view, ".editor-panel-page-title", "Home page")
     end
 
     test "sheet state changes when entering edit mode and collapsing", %{conn: conn} do
       {:ok, view, _html} = live(conn, "/")
 
       # Starts collapsed
-      assert has_element?(view, ".editor-sheet[data-state='collapsed']")
+      assert has_element?(view, ".editor-panel[data-state='collapsed']")
 
       # Enter edit mode - expands to open
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
-      assert has_element?(view, ".editor-sheet[data-state='open']")
+      assert has_element?(view, ".editor-panel[data-state='open']")
 
       # Collapse sheet (still in edit mode, just previewing)
       render_click(view, "editor_set_sheet_state", %{"state" => "collapsed"})
 
-      assert has_element?(view, ".editor-sheet[data-state='collapsed']")
+      assert has_element?(view, ".editor-panel[data-state='collapsed']")
       # Still in edit mode
-      assert has_element?(view, ".editor-sheet[data-editing='true']")
+      assert has_element?(view, ".editor-panel[data-editing='true']")
     end
   end
 
@@ -110,7 +110,7 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/")
 
       # Enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
       # Home page default: hero is first block
       first_card = view |> element(".block-card:first-child")
@@ -134,9 +134,9 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/")
 
       # Enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
-      refute has_element?(view, ".editor-sheet-dirty")
+      refute has_element?(view, ".editor-panel-dirty")
 
       # Move a block to trigger dirty state
       blocks = Pages.get_page("home").blocks
@@ -146,7 +146,7 @@ defmodule BerrypodWeb.PageEditorHookTest do
       |> element("button[phx-click='editor_move_up'][phx-value-id='#{second_id}']")
       |> render_click()
 
-      assert has_element?(view, ".editor-sheet-dirty")
+      assert has_element?(view, ".editor-panel-dirty")
     end
   end
 
@@ -159,7 +159,7 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/")
 
       # Enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
       # Move a block to make changes
       blocks = Pages.get_page("home").blocks
@@ -188,7 +188,7 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/")
 
       # Enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
       # Get the first block type before reset (should be reversed, so last default)
       first_before_reset = view |> element(".block-card:first-child") |> render()
@@ -222,7 +222,7 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/")
 
       # Enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
       blocks = Pages.get_page("home").blocks
       second_id = Enum.at(blocks, 1)["id"]
@@ -247,7 +247,7 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/")
 
       # Enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
       blocks = Pages.get_page("home").blocks
       second_id = Enum.at(blocks, 1)["id"]
@@ -268,7 +268,7 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/")
 
       # Enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
       blocks = Pages.get_page("home").blocks
       second_id = Enum.at(blocks, 1)["id"]
@@ -287,7 +287,7 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/")
 
       # Enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
       # Initially both disabled
       assert has_element?(view, "button[phx-click='editor_undo'][disabled]")
@@ -316,13 +316,13 @@ defmodule BerrypodWeb.PageEditorHookTest do
       {:ok, view, _html} = live(conn, "/about")
 
       # Editor sheet visible for admin
-      assert has_element?(view, ".editor-sheet")
+      assert has_element?(view, ".editor-panel")
 
       # Enter edit mode
-      view |> element(".editor-sheet-edit-btn") |> render_click()
+      view |> element(".editor-fab") |> render_click()
 
-      assert has_element?(view, ".editor-sheet-content")
+      assert has_element?(view, ".editor-panel-content")
-      assert has_element?(view, ".editor-sheet-page-title", "About")
+      assert has_element?(view, ".editor-panel-page-title", "About")
       assert has_element?(view, ".block-card")
     end
   end