From 149750ce72d2ce6ad80063e2609876cf59311456 Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Thu, 27 Jun 2024 13:37:54 -0700
Subject: [PATCH 1/3] Doc editor and code editor are toggleable docks

---
 app/gui2/e2e/actions.ts                       |  11 +-
 app/gui2/src/App.vue                          |   2 +-
 app/gui2/src/assets/base.css                  |   1 +
 app/gui2/src/components/BottomPanel.vue       |  79 ++++++++
 app/gui2/src/components/CodeEditor.vue        | 111 +----------
 app/gui2/src/components/DockPanel.vue         |  89 +++++----
 .../src/components/DocumentationEditor.vue    |   9 +-
 app/gui2/src/components/ExtendedMenu.vue      |  24 ++-
 app/gui2/src/components/GraphEditor.vue       | 186 +++++++++++-------
 .../components/GraphEditor/NodeWidgetTree.vue |   2 +-
 .../GraphEditor/widgets/WidgetVector.vue      |   2 +-
 app/gui2/src/components/MarkdownEditor.vue    |   1 +
 .../MarkdownEditor/FormattingToolbar.vue      |   5 +-
 .../MarkdownEditor/MarkdownEditorImpl.vue     |   5 +-
 app/gui2/src/components/PlusButton.vue        |   2 +-
 app/gui2/src/components/ResizeHandles.vue     |  26 +--
 app/gui2/src/components/SlideIn.vue           |  54 +++++
 app/gui2/src/components/TopBar.vue            |  11 +-
 app/gui2/src/composables/events.ts            |  24 ++-
 .../__tests__/editHandler.test.ts             |   2 +-
 20 files changed, 383 insertions(+), 263 deletions(-)
 create mode 100644 app/gui2/src/components/BottomPanel.vue
 create mode 100644 app/gui2/src/components/SlideIn.vue

diff --git a/app/gui2/e2e/actions.ts b/app/gui2/e2e/actions.ts
index 79f0e0fd2d5f..40aecf65e467 100644
--- a/app/gui2/e2e/actions.ts
+++ b/app/gui2/e2e/actions.ts
@@ -12,11 +12,14 @@ export async function goToGraph(page: Page, closeDocPanel: boolean = true) {
   await page.goto('/')
   // Initial load through vite can take a while. Make sure that the first locator has enough time.
   await expect(page.locator('.GraphEditor')).toBeVisible({ timeout: 100000 })
-  if (closeDocPanel) {
-    await page.locator('.rightDock > .closeButton').click()
-  }
   // Wait until nodes are loaded.
   await expect(locate.graphNode(page)).toExist()
+  if (closeDocPanel) {
+    await expect(page.getByTestId('rightDock')).toExist()
+    await page.getByRole('button', { name: 'Documentation Panel' }).click()
+    // Wait for the closing animation.
+    await expect(page.getByTestId('rightDock')).not.toBeVisible()
+  }
   // Wait for position initialization
   await expectNodePositionsInitialized(page, 72)
 }
@@ -46,7 +49,7 @@ export async function exitFunction(page: Page, x = 300, y = 300) {
 /// Move node defined by the given binding  by the given x and y.
 export async function dragNodeByBinding(page: Page, nodeBinding: string, x: number, y: number) {
   const node = graphNodeByBinding(page, nodeBinding)
-  const grabHandle = await node.locator('.grab-handle')
+  const grabHandle = node.locator('.grab-handle')
   await grabHandle.dragTo(grabHandle, {
     targetPosition: { x, y },
     force: true,
diff --git a/app/gui2/src/App.vue b/app/gui2/src/App.vue
index ad1446574dfd..a12df0351f80 100644
--- a/app/gui2/src/App.vue
+++ b/app/gui2/src/App.vue
@@ -101,6 +101,6 @@ registerAutoBlurHandler()
 
 .enso-dashboard .App {
   /* Compensate for top bar, render the app below it. */
-  margin-top: calc(0px - var(--row-height) - var(--top-level-gap) - var(--top-bar-margin));
+  top: calc(var(--row-height) + var(--top-level-gap, 0px) + var(--top-bar-margin, 0px) + 16px);
 }
 </style>
diff --git a/app/gui2/src/assets/base.css b/app/gui2/src/assets/base.css
index 521a3bb4cafd..103a7d310242 100644
--- a/app/gui2/src/assets/base.css
+++ b/app/gui2/src/assets/base.css
@@ -58,6 +58,7 @@
   --visualization-resize-handle-inside: 3px;
   --visualization-resize-handle-outside: 3px;
   --right-dock-default-width: 40%;
+  --code-editor-default-height: 30%;
 }
 
 *,
diff --git a/app/gui2/src/components/BottomPanel.vue b/app/gui2/src/components/BottomPanel.vue
new file mode 100644
index 000000000000..65e48f4ffa0d
--- /dev/null
+++ b/app/gui2/src/components/BottomPanel.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { codeEditorBindings } from '@/bindings'
+import ResizeHandles from '@/components/ResizeHandles.vue'
+import ToggleIcon from '@/components/ToggleIcon.vue'
+import { useResizeObserver } from '@/composables/events'
+import { Rect } from '@/util/data/rect'
+import { Vec2 } from '@/util/data/vec2'
+import { useLocalStorage } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+const MIN_DOCK_SIZE_PX = 20
+
+const rootElement = ref<HTMLElement>()
+
+const show = defineModel<boolean>('show', { required: true })
+
+const savedSize = useLocalStorage<{ height: number | null }>('code-editor-size', { height: null })
+
+const computedSize = useResizeObserver(rootElement)
+const computedBounds = computed(() => new Rect(Vec2.Zero, computedSize.value))
+
+function clampSize(size: number) {
+  return Math.max(size, MIN_DOCK_SIZE_PX)
+}
+
+const style = computed(() =>
+  savedSize.value?.height != null ?
+    { '--panel-size': `${clampSize(savedSize.value.height)}px` }
+  : undefined,
+)
+</script>
+
+<template>
+  <ToggleIcon
+    v-model="show"
+    :title="`Code Editor (${codeEditorBindings.bindings.toggle.humanReadable})`"
+    icon="bottom_panel"
+    class="toggleDock"
+  />
+  <Transition>
+    <div v-if="show" ref="rootElement" class="BottomPanel dock" :style="style">
+      <slot />
+      <ResizeHandles
+        top
+        :modelValue="computedBounds"
+        @update:modelValue="savedSize = { height: $event.height }"
+      />
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.BottomPanel {
+  --panel-size: var(--code-editor-default-height);
+  position: relative;
+  bottom: 0;
+  height: var(--panel-size);
+  margin-right: 1px;
+  backdrop-filter: var(--blur-app-bg);
+  background-color: rgba(255, 255, 255, 0.35);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.4);
+}
+.v-enter-active,
+.v-leave-active {
+  transition: height 0.1s ease;
+}
+.v-enter-from,
+.v-leave-to {
+  height: 0;
+}
+
+.toggleDock {
+  z-index: 1;
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+}
+</style>
diff --git a/app/gui2/src/components/CodeEditor.vue b/app/gui2/src/components/CodeEditor.vue
index 80755fb602d6..4872b518c006 100644
--- a/app/gui2/src/components/CodeEditor.vue
+++ b/app/gui2/src/components/CodeEditor.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import type { ChangeSet, Diagnostic, Highlighter } from '@/components/CodeEditor/codemirror'
-import SvgButton from '@/components/SvgButton.vue'
-import { usePointer } from '@/composables/events'
 import { useGraphStore, type NodeId } from '@/stores/graph'
 import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
@@ -9,7 +7,6 @@ import { useAutoBlur } from '@/util/autoBlur'
 import { chain } from '@/util/data/iterable'
 import { unwrap } from '@/util/data/result'
 import { qnJoin, tryQualifiedName } from '@/util/qualifiedName'
-import { useLocalStorage } from '@vueuse/core'
 import { createDebouncer } from 'lib0/eventloop'
 import { MutableModule } from 'shared/ast'
 import { textChangeToEdits, type SourceRangeEdit } from 'shared/util/data/text'
@@ -39,8 +36,6 @@ const {
   textEditToChangeSpec,
 } = await import('@/components/CodeEditor/codemirror')
 
-const emit = defineEmits<{ close: [] }>()
-
 const projectStore = useProjectStore()
 const graphStore = useGraphStore()
 const suggestionDbStore = useSuggestionDbStore()
@@ -299,38 +294,12 @@ onMounted(() => {
   editorView.focus()
   rootElement.value?.prepend(editorView.dom)
 })
-
-const editorSize = useLocalStorage<{ width: number | null; height: number | null }>(
-  'code-editor-size',
-  { width: null, height: null },
-)
-
-let initSize = { width: 0, height: 0 }
-const resize = usePointer((pos, _, type) => {
-  if (rootElement.value == null) return
-  if (type == 'start') initSize = rootElement.value.getBoundingClientRect()
-  editorSize.value.width = initSize.width + pos.relative.x
-  editorSize.value.height = initSize.height - pos.relative.y
-})
-
-function resetSize() {
-  editorSize.value.width = null
-  editorSize.value.height = null
-}
-
-const editorStyle = computed(() => {
-  return {
-    width: editorSize.value.width ? `${editorSize.value.width}px` : '50%',
-    height: editorSize.value.height ? `${editorSize.value.height}px` : '30%',
-  }
-})
 </script>
 
 <template>
   <div
     ref="rootElement"
     class="CodeEditor"
-    :style="editorStyle"
     @keydown.arrow-left.stop
     @keydown.arrow-right.stop
     @keydown.arrow-up.stop
@@ -340,95 +309,26 @@ const editorStyle = computed(() => {
     @keydown.delete.stop
     @wheel.stop.passive
     @contextmenu.stop
-  >
-    <div class="resize-handle" v-on="resize.events" @dblclick="resetSize">
-      <svg viewBox="0 0 16 16">
-        <circle cx="2" cy="2" r="1.5" />
-        <circle cx="8" cy="2" r="1.5" />
-        <circle cx="8" cy="8" r="1.5" />
-        <circle cx="14" cy="2" r="1.5" />
-        <circle cx="14" cy="8" r="1.5" />
-        <circle cx="14" cy="14" r="1.5" />
-      </svg>
-    </div>
-    <SvgButton name="close" class="closeButton" title="Close Code Editor" @click="emit('close')" />
-  </div>
+  ></div>
 </template>
 
 <style scoped>
 .CodeEditor {
-  position: absolute;
-  bottom: 5px;
-  left: 5px;
-  width: 50%;
-  height: 30%;
-  max-width: calc(100% - 10px);
-  max-height: calc(100% - 10px);
-  backdrop-filter: var(--blur-app-bg);
-  border-radius: 7px;
+  width: 100%;
+  height: 100%;
   font-family: var(--font-mono);
-
-  &.v-enter-active,
-  &.v-leave-active {
-    transition:
-      transform 0.2s ease,
-      opacity 0.2s ease;
-  }
-
-  &.v-enter-from,
-  &.v-leave-to {
-    transform: scale(95%);
-    opacity: 0;
-  }
 }
 
 :deep(.ͼ1 .cm-scroller) {
   font-family: var(--font-mono);
-}
-
-.resize-handle {
-  position: absolute;
-  top: -3px;
-  right: -3px;
-  width: 20px;
-  height: 20px;
-  padding: 5px;
-  cursor: nesw-resize;
-
-  svg {
-    fill: black;
-    width: 100%;
-    height: 100%;
-    opacity: 0.1;
-    transition: opacity 0.1s ease-in-out;
-  }
-
-  &:hover svg {
-    opacity: 0.9;
-  }
-}
-
-.closeButton {
-  position: absolute;
-  top: 4px;
-  left: 6px;
-  color: red;
-  opacity: 0.3;
-
-  &:hover {
-    opacity: 0.6;
-  }
+  /* Prevent touchpad back gesture, which can be triggered while panning. */
+  overscroll-behavior: none;
 }
 
 .CodeEditor :deep(.cm-editor) {
   position: relative;
-  color: white;
   width: 100%;
   height: 100%;
-  background-color: rgba(255, 255, 255, 0.35);
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.4);
-  border-radius: 5px;
   opacity: 1;
   color: black;
   text-shadow: 0 0 2px rgba(255, 255, 255, 0.4);
@@ -457,5 +357,6 @@ const editorStyle = computed(() => {
 
 .CodeEditor :deep(.cm-gutters) {
   border-radius: 3px 0 0 3px;
+  min-width: 32px;
 }
 </style>
diff --git a/app/gui2/src/components/DockPanel.vue b/app/gui2/src/components/DockPanel.vue
index b6f80074a58a..e476093491c1 100644
--- a/app/gui2/src/components/DockPanel.vue
+++ b/app/gui2/src/components/DockPanel.vue
@@ -1,75 +1,74 @@
 <script setup lang="ts">
+import { documentationEditorBindings } from '@/bindings'
 import ResizeHandles from '@/components/ResizeHandles.vue'
-import SvgButton from '@/components/SvgButton.vue'
+import SlideIn from '@/components/SlideIn.vue'
+import ToggleIcon from '@/components/ToggleIcon.vue'
 import { useResizeObserver } from '@/composables/events'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
-import { computed, ref } from 'vue'
+import { computed, ref, type ComponentInstance } from 'vue'
 
-const rootElement = ref<HTMLElement>()
+const MIN_DOCK_SIZE_PX = 200
+
+const toolbarElement = ref<HTMLElement>()
+const slideInPanel = ref<ComponentInstance<typeof SlideIn>>()
+const slideInPanelRoot = computed(() => slideInPanel.value?.rootElement)
 
 const show = defineModel<boolean>('show', { required: true })
 const size = defineModel<number | undefined>('size')
 
-const computedSize = useResizeObserver(rootElement)
+const computedSize = useResizeObserver(slideInPanelRoot)
 const computedBounds = computed(() => new Rect(Vec2.Zero, computedSize.value))
 
-const style = computed(() => {
-  return {
-    width: size.value != null ? `${size.value}px` : undefined,
-  }
-})
+function clampSize(size: number) {
+  return Math.max(size, MIN_DOCK_SIZE_PX)
+}
+
+const style = computed(() => ({
+  '--slide-in-panel-size': size.value != null ? `${clampSize(size.value)}px` : undefined,
+}))
 </script>
 
 <template>
-  <Transition name="rightDock">
-    <div v-if="show" ref="rootElement" class="DockPanel rightDock" :style="style">
-      <div class="scrollArea">
-        <slot />
-      </div>
-      <SvgButton name="close" class="closeButton button" @click.stop="show = false" />
-      <ResizeHandles left :modelValue="computedBounds" @update:modelValue="size = $event.width" />
+  <ToggleIcon
+    v-model="show"
+    :title="`Documentation Panel (${documentationEditorBindings.bindings.toggle.humanReadable})`"
+    icon="right_panel"
+    class="toggleDock"
+  />
+  <SlideIn ref="slideInPanel" :show="show" :style="style" class="DockPanel" data-testid="rightDock">
+    <div ref="toolbarElement" class="toolbar"></div>
+    <div class="scrollArea">
+      <slot :toolbar="toolbarElement" />
     </div>
-  </Transition>
+    <ResizeHandles left :modelValue="computedBounds" @update:modelValue="size = $event.width" />
+  </SlideIn>
 </template>
 
 <style scoped>
 .DockPanel {
-  position: absolute;
-  top: 46px;
-  bottom: 0;
-  width: var(--right-dock-default-width);
-  right: 0;
-  border-radius: 7px 0 0;
+  --slide-in-panel-size: var(--right-dock-default-width);
   background-color: rgb(255, 255, 255);
-  padding: 4px 12px 0 0;
-}
-.rightDock-enter-active,
-.rightDock-leave-active {
-  transition: left 0.25s ease;
-  /* Prevent absolutely-positioned children (such as the close button) from bypassing the show/hide animation. */
-  overflow-x: clip;
 }
-.rightDock-enter-from,
-.rightDock-leave-to {
-  width: 0;
-}
-.rightDock .scrollArea {
+
+.scrollArea {
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  padding-left: 6px;
+  padding-left: 10px;
+  /* Prevent touchpad back gesture, which can be triggered while panning. */
+  overscroll-behavior-x: none;
 }
 
-.rightDock .closeButton {
-  position: absolute;
-  top: 4px;
-  right: 28px;
-  color: red;
-  opacity: 0.3;
+.toolbar {
+  height: 48px;
+  padding-left: 4px;
+}
 
-  &:hover {
-    opacity: 0.6;
-  }
+.toggleDock {
+  z-index: 1;
+  position: absolute;
+  right: 16px;
+  top: 16px;
 }
 </style>
diff --git a/app/gui2/src/components/DocumentationEditor.vue b/app/gui2/src/components/DocumentationEditor.vue
index b8e8931e8a3c..fcdb7e657037 100644
--- a/app/gui2/src/components/DocumentationEditor.vue
+++ b/app/gui2/src/components/DocumentationEditor.vue
@@ -9,6 +9,9 @@ import { Err, Ok, mapOk, withContext, type Result } from 'shared/util/data/resul
 import { toRef, toValue } from 'vue'
 
 const documentation = defineModel<string>({ required: true })
+const _props = defineProps<{
+  toolbarContainer: HTMLElement | undefined
+}>()
 
 const graphStore = useGraphStore()
 const projectStore = useProjectStore()
@@ -66,5 +69,9 @@ function useDocumentationImages(
 </script>
 
 <template>
-  <MarkdownEditor v-model="documentation" :transformImageUrl="transformImageUrl" />
+  <MarkdownEditor
+    v-model="documentation"
+    :transformImageUrl="transformImageUrl"
+    :toolbarContainer="toolbarContainer"
+  />
 </template>
diff --git a/app/gui2/src/components/ExtendedMenu.vue b/app/gui2/src/components/ExtendedMenu.vue
index 039685855ea2..779011015c61 100644
--- a/app/gui2/src/components/ExtendedMenu.vue
+++ b/app/gui2/src/components/ExtendedMenu.vue
@@ -30,8 +30,8 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
     /></template>
     <template #entries>
       <div>
-        <div class="label">Zoom</div>
-        <div class="zoomControl">
+        <div class="nonInteractive"><SvgIcon name="zoom" class="rowIcon" />Zoom</div>
+        <div class="zoomControl rightSide">
           <SvgButton
             class="zoomButton"
             name="minus"
@@ -53,12 +53,14 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
         </div>
       </div>
       <MenuButton v-model="showCodeEditor" @click="open = false">
+        <SvgIcon name="bottom_panel" class="rowIcon" />
         Code Editor
-        <div v-text="toggleCodeEditorShortcut" />
+        <div class="rightSide" v-text="toggleCodeEditorShortcut" />
       </MenuButton>
       <MenuButton v-model="showDocumentationEditor" @click="open = false">
+        <SvgIcon name="right_panel" class="rowIcon" />
         Documentation Editor
-        <div v-text="toggleDocumentationEditorShortcut" />
+        <div class="rightSide" v-text="toggleDocumentationEditorShortcut" />
       </MenuButton>
     </template>
   </DropdownMenu>
@@ -68,7 +70,7 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
 .ExtendedMenu {
   background: var(--color-frame-bg);
   border-radius: var(--radius-full);
-  margin: 0 32px 0 auto;
+  margin: 0 12px 0 auto;
 }
 
 .moreIcon {
@@ -82,7 +84,6 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
 
   > * {
     display: flex;
-    justify-content: space-between;
     align-items: center;
     padding-left: 8px;
     padding-right: 8px;
@@ -93,7 +94,16 @@ const toggleDocumentationEditorShortcut = documentationEditorBindings.bindings.t
   background-color: var(--color-menu-entry-selected-bg);
 }
 
-.label {
+.rowIcon {
+  display: inline-block;
+  margin-right: 4px;
+}
+
+.rightSide {
+  margin-left: auto;
+}
+
+.nonInteractive {
   user-select: none;
   pointer-events: none;
 }
diff --git a/app/gui2/src/components/GraphEditor.vue b/app/gui2/src/components/GraphEditor.vue
index 3e19c45fbd0c..607c645c6375 100644
--- a/app/gui2/src/components/GraphEditor.vue
+++ b/app/gui2/src/components/GraphEditor.vue
@@ -6,6 +6,7 @@ import {
   interactionBindings,
   undoBindings,
 } from '@/bindings'
+import BottomPanel from '@/components/BottomPanel.vue'
 import CodeEditor from '@/components/CodeEditor.vue'
 import ComponentBrowser from '@/components/ComponentBrowser.vue'
 import { type Usage } from '@/components/ComponentBrowser/input'
@@ -369,7 +370,8 @@ function deleteSelected() {
 
 // === Code Editor ===
 
-const codeEditorArea = ref<HTMLElement>()
+const codeEditor = shallowRef<ComponentInstance<typeof CodeEditor>>()
+const codeEditorArea = computed(() => unrefElement(codeEditor))
 const showCodeEditor = ref(false)
 const codeEditorHandler = codeEditorBindings.handler({
   toggle() {
@@ -379,8 +381,8 @@ const codeEditorHandler = codeEditorBindings.handler({
 
 // === Documentation Editor ===
 
-const rightDock = shallowRef<ComponentInstance<typeof DockPanel>>()
-const documentationEditorArea = computed(() => unrefElement(rightDock))
+const docEditor = shallowRef<ComponentInstance<typeof DocumentationEditor>>()
+const documentationEditorArea = computed(() => unrefElement(docEditor))
 const showDocumentationEditor = computedFallback(
   storedShowDocumentationEditor,
   // Show documentation editor when documentation exists on first graph visit.
@@ -653,90 +655,122 @@ const groupColors = computed(() => {
 </script>
 
 <template>
-  <div
-    ref="viewportNode"
-    class="GraphEditor viewport"
-    :class="{ draggingEdge: graphStore.mouseEditedEdge != null }"
-    :style="groupColors"
-    v-on.="graphNavigator.pointerEvents"
-    v-on..="nodeSelection.events"
-    @click="handleClick"
-    @dragover.prevent
-    @drop.prevent="handleFileDrop($event)"
-    @pointermove.capture="graphNavigator.pointerEventsCapture.pointermove"
-    @wheel.capture="graphNavigator.pointerEventsCapture.wheel"
-  >
-    <div class="layer" :style="{ transform: graphNavigator.transform }">
-      <GraphNodes
-        :graphNodeSelections="graphNodeSelections"
-        @nodeOutputPortDoubleClick="handleNodeOutputPortDoubleClick"
-        @nodeDoubleClick="(id) => stackNavigator.enterNode(id)"
-        @createNodes="createNodesFromSource"
-        @setNodeColor="setSelectedNodesColor"
-      />
+  <div class="GraphEditor" @dragover.prevent @drop.prevent="handleFileDrop($event)">
+    <div class="vertical">
+      <div
+        ref="viewportNode"
+        class="viewport"
+        :class="{ draggingEdge: graphStore.mouseEditedEdge != null }"
+        :style="groupColors"
+        v-on.="graphNavigator.pointerEvents"
+        v-on..="nodeSelection.events"
+        @click="handleClick"
+        @pointermove.capture="graphNavigator.pointerEventsCapture.pointermove"
+        @wheel.capture="graphNavigator.pointerEventsCapture.wheel"
+      >
+        <div class="layer" :style="{ transform: graphNavigator.transform }">
+          <GraphNodes
+            :graphNodeSelections="graphNodeSelections"
+            @nodeOutputPortDoubleClick="handleNodeOutputPortDoubleClick"
+            @nodeDoubleClick="(id) => stackNavigator.enterNode(id)"
+            @createNodes="createNodesFromSource"
+            @setNodeColor="setSelectedNodesColor"
+          />
+        </div>
+        <div
+          ref="graphNodeSelections"
+          class="layer"
+          :style="{ transform: graphNavigator.transform, 'z-index': -1 }"
+        />
+        <GraphEdges :navigator="graphNavigator" @createNodeFromEdge="handleEdgeDrop" />
+        <ComponentBrowser
+          v-if="componentBrowserVisible"
+          ref="componentBrowser"
+          :navigator="graphNavigator"
+          :nodePosition="componentBrowserNodePosition"
+          :usage="componentBrowserUsage"
+          @accepted="commitComponentBrowser"
+          @canceled="hideComponentBrowser"
+        />
+        <TopBar
+          v-model:recordMode="projectStore.recordMode"
+          v-model:showColorPicker="showColorPicker"
+          v-model:showCodeEditor="showCodeEditor"
+          v-model:showDocumentationEditor="showDocumentationEditor"
+          :zoomLevel="100.0 * graphNavigator.targetScale"
+          :componentsSelected="nodeSelection.selected.size"
+          :class="{ extraRightSpace: !showDocumentationEditor }"
+          @recordOnce="onRecordOnceButtonPress()"
+          @fitToAllClicked="zoomToSelected"
+          @zoomIn="graphNavigator.stepZoom(+1)"
+          @zoomOut="graphNavigator.stepZoom(-1)"
+          @collapseNodes="collapseNodes"
+          @removeNodes="deleteSelected"
+        />
+        <PlusButton title="Add Component" @click.stop="addNodeAuto()" />
+        <SceneScroller
+          :navigator="graphNavigator"
+          :scrollableArea="Rect.Bounding(...graphStore.visibleNodeAreas)"
+        />
+        <GraphMouse />
+      </div>
+      <BottomPanel v-model:show="showCodeEditor">
+        <Suspense>
+          <CodeEditor ref="codeEditor" />
+        </Suspense>
+      </BottomPanel>
     </div>
-    <div
-      ref="graphNodeSelections"
-      class="layer"
-      :style="{ transform: graphNavigator.transform, 'z-index': -1 }"
-    />
-    <GraphEdges :navigator="graphNavigator" @createNodeFromEdge="handleEdgeDrop" />
-    <DockPanel
-      ref="rightDock"
-      v-model:show="showDocumentationEditor"
-      v-model:size="rightDockWidth"
-      data-testid="rightDock"
-    >
-      <DocumentationEditor
-        :modelValue="documentation.state.value"
-        @update:modelValue="documentation.set"
-      />
+    <DockPanel v-model:show="showDocumentationEditor" v-model:size="rightDockWidth">
+      <template #default="{ toolbar }">
+        <DocumentationEditor
+          ref="docEditor"
+          :modelValue="documentation.state.value"
+          :toolbarContainer="toolbar"
+          @update:modelValue="documentation.set"
+        />
+      </template>
     </DockPanel>
-    <ComponentBrowser
-      v-if="componentBrowserVisible"
-      ref="componentBrowser"
-      :navigator="graphNavigator"
-      :nodePosition="componentBrowserNodePosition"
-      :usage="componentBrowserUsage"
-      @accepted="commitComponentBrowser"
-      @canceled="hideComponentBrowser"
-    />
-    <TopBar
-      v-model:recordMode="projectStore.recordMode"
-      v-model:showColorPicker="showColorPicker"
-      v-model:showCodeEditor="showCodeEditor"
-      v-model:showDocumentationEditor="showDocumentationEditor"
-      :zoomLevel="100.0 * graphNavigator.targetScale"
-      :componentsSelected="nodeSelection.selected.size"
-      @recordOnce="onRecordOnceButtonPress()"
-      @fitToAllClicked="zoomToSelected"
-      @zoomIn="graphNavigator.stepZoom(+1)"
-      @zoomOut="graphNavigator.stepZoom(-1)"
-      @collapseNodes="collapseNodes"
-      @removeNodes="deleteSelected"
-    />
-    <PlusButton title="Add Component" @click.stop="addNodeAuto()" />
-    <Transition>
-      <Suspense ref="codeEditorArea">
-        <CodeEditor v-if="showCodeEditor" @close="showCodeEditor = false" />
-      </Suspense>
-    </Transition>
-    <SceneScroller
-      :navigator="graphNavigator"
-      :scrollableArea="Rect.Bounding(...graphStore.visibleNodeAreas)"
-    />
-    <GraphMouse />
   </div>
 </template>
 
 <style scoped>
 .GraphEditor {
-  position: relative;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   contain: layout;
-  overflow: clip;
   user-select: none;
   /* Prevent touchpad back gesture, which can be triggered while panning. */
   overscroll-behavior-x: none;
+
+  display: flex;
+  flex-direction: row;
+  & :deep(.DockPanel) {
+    flex: none;
+  }
+  & .vertical {
+    flex: auto;
+    min-width: 0;
+  }
+}
+
+.vertical {
+  display: flex;
+  flex-direction: column;
+  & :deep(.BottomPanel) {
+    flex: none;
+  }
+  & .viewport {
+    flex: auto;
+    min-height: 0;
+  }
+}
+
+.viewport {
+  contain: layout;
+  overflow: clip;
   --group-color-fallback: #006b8a;
   --node-color-no-type: #596b81;
 }
diff --git a/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue b/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue
index deb82947b519..c7d010b2820a 100644
--- a/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue
+++ b/app/gui2/src/components/GraphEditor/NodeWidgetTree.vue
@@ -9,7 +9,7 @@ import { useGraphStore, type NodeId } from '@/stores/graph'
 import { Ast } from '@/util/ast'
 import type { Vec2 } from '@/util/data/vec2'
 import type { Icon } from '@/util/iconName'
-import { computed, ref, toRef, watch } from 'vue'
+import { computed, toRef, watch } from 'vue'
 
 const props = defineProps<{
   ast: Ast.Ast
diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetVector.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetVector.vue
index 3afa9eafabc5..9faa5821d663 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetVector.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetVector.vue
@@ -4,7 +4,7 @@ import ListWidget from '@/components/widgets/ListWidget.vue'
 import { injectGraphNavigator } from '@/providers/graphNavigator'
 import type { PortId } from '@/providers/portInfo'
 import { Score, WidgetInput, defineWidget, widgetProps } from '@/providers/widgetRegistry'
-import { WidgetEditHandler, type WidgetId } from '@/providers/widgetRegistry/editHandler'
+import { WidgetEditHandler } from '@/providers/widgetRegistry/editHandler'
 import { Ast } from '@/util/ast'
 import { computed, shallowRef, toRef, toValue, watchEffect, type WatchSource } from 'vue'
 
diff --git a/app/gui2/src/components/MarkdownEditor.vue b/app/gui2/src/components/MarkdownEditor.vue
index f917dc2cae30..09e5ceea9bfd 100644
--- a/app/gui2/src/components/MarkdownEditor.vue
+++ b/app/gui2/src/components/MarkdownEditor.vue
@@ -5,6 +5,7 @@ import { defineAsyncComponent } from 'vue'
 const text = defineModel<string>({ required: true })
 const props = defineProps<{
   transformImageUrl?: UrlTransformer
+  toolbarContainer: HTMLElement | undefined
 }>()
 
 const LazyMarkdownEditor = defineAsyncComponent(
diff --git a/app/gui2/src/components/MarkdownEditor/FormattingToolbar.vue b/app/gui2/src/components/MarkdownEditor/FormattingToolbar.vue
index 9787b449907d..972c94f9a3e4 100644
--- a/app/gui2/src/components/MarkdownEditor/FormattingToolbar.vue
+++ b/app/gui2/src/components/MarkdownEditor/FormattingToolbar.vue
@@ -22,9 +22,10 @@ const { blockType } = props.formatting
 <style scoped>
 .FormattingToolbar {
   --color-frame-bg: white;
-  position: sticky;
-  top: 0;
   display: flex;
+  height: 100%;
+  flex-direction: row;
+  align-items: center;
   gap: 6px;
   line-height: 16px;
 }
diff --git a/app/gui2/src/components/MarkdownEditor/MarkdownEditorImpl.vue b/app/gui2/src/components/MarkdownEditor/MarkdownEditorImpl.vue
index 3e9298f0deaa..20009017229f 100644
--- a/app/gui2/src/components/MarkdownEditor/MarkdownEditorImpl.vue
+++ b/app/gui2/src/components/MarkdownEditor/MarkdownEditorImpl.vue
@@ -20,6 +20,7 @@ import { shallowRef, toRef, useCssModule, type ComponentInstance } from 'vue'
 const markdown = defineModel<string>({ required: true })
 const props = defineProps<{
   transformImageUrl?: UrlTransformer | undefined
+  toolbarContainer: HTMLElement | undefined
 }>()
 
 const contentElement = shallowRef<ComponentInstance<typeof LexicalContent>>()
@@ -38,7 +39,9 @@ const { urlUnderCursor } = useLinkNode(editor)
 
 <template>
   <div class="MarkdownEditor fullHeight">
-    <FormattingToolbar :formatting="formatting" @pointerdown.prevent />
+    <Teleport :to="toolbarContainer">
+      <FormattingToolbar :formatting="formatting" @pointerdown.prevent />
+    </Teleport>
     <LexicalContent ref="contentElement" @wheel.stop.passive @contextmenu.stop @pointerdown.stop />
     <FloatingSelectionMenu :selectionElement="contentElement">
       <template #default="{ collapsed }">
diff --git a/app/gui2/src/components/PlusButton.vue b/app/gui2/src/components/PlusButton.vue
index 930b50f1c8f0..1cea54ea3bcd 100644
--- a/app/gui2/src/components/PlusButton.vue
+++ b/app/gui2/src/components/PlusButton.vue
@@ -11,7 +11,7 @@
 .PlusButton {
   position: absolute;
   bottom: 10px;
-  left: 10px;
+  right: 10px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
diff --git a/app/gui2/src/components/ResizeHandles.vue b/app/gui2/src/components/ResizeHandles.vue
index a50d91451da2..100942d2c46c 100644
--- a/app/gui2/src/components/ResizeHandles.vue
+++ b/app/gui2/src/components/ResizeHandles.vue
@@ -10,11 +10,12 @@ const emit = defineEmits<{
 }>()
 
 let initialBounds: Rect | undefined = undefined
-function resizeHandler(resizeX: 'left' | 'right' | false, resizeY: boolean) {
+function resizeHandler(resizeX: 'left' | 'right' | false, resizeY: 'top' | 'bottom' | false) {
   const resizing = {
     left: resizeX === 'left',
     right: resizeX === 'right',
-    bottom: resizeY,
+    top: resizeY === 'top',
+    bottom: resizeY === 'bottom',
   }
   return usePointer((pos, _, type) => {
     switch (type) {
@@ -43,15 +44,17 @@ function resizeHandler(resizeX: 'left' | 'right' | false, resizeY: boolean) {
 const handler = {
   left: resizeHandler('left', false).events,
   right: resizeHandler('right', false).events,
-  bottom: resizeHandler(false, true).events,
-  bottomLeft: resizeHandler('left', true).events,
-  bottomRight: resizeHandler('right', true).events,
+  top: resizeHandler(false, 'top').events,
+  bottom: resizeHandler(false, 'bottom').events,
+  bottomLeft: resizeHandler('left', 'bottom').events,
+  bottomRight: resizeHandler('right', 'bottom').events,
 }
 </script>
 
 <template>
   <div v-if="props.left" class="left" v-on="handler.left" />
   <div v-if="props.right" class="right" v-on="handler.right" />
+  <div v-if="props.top" class="top" v-on="handler.top" />
   <div v-if="props.bottom" class="bottom" v-on="handler.bottom" />
   <svg v-if="props.bottom && props.left" class="corner bottom left" v-on="handler.bottomLeft">
     <circle />
@@ -62,18 +65,14 @@ const handler = {
 </template>
 
 <style scoped>
-.left {
-  position: absolute;
-  cursor: ew-resize;
-  top: 0;
-  height: 100%;
-}
+.left,
 .right {
   position: absolute;
   cursor: ew-resize;
   top: 0;
   height: 100%;
 }
+.top,
 .bottom {
   position: absolute;
   cursor: ns-resize;
@@ -88,6 +87,10 @@ const handler = {
   right: calc(0px - var(--resize-handle-outside));
   width: calc(var(--resize-handle-inside) + var(--resize-handle-outside));
 }
+.top {
+  top: calc(0px - var(--resize-handle-inside));
+  height: calc(var(--resize-handle-inside) + var(--resize-handle-outside));
+}
 .bottom {
   top: unset;
   bottom: calc(0px - var(--resize-handle-outside));
@@ -126,6 +129,7 @@ const handler = {
 
 .left,
 .right,
+.top,
 .bottom {
   z-index: 1;
 }
diff --git a/app/gui2/src/components/SlideIn.vue b/app/gui2/src/components/SlideIn.vue
new file mode 100644
index 000000000000..ca2d6c3e926d
--- /dev/null
+++ b/app/gui2/src/components/SlideIn.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, shallowRef } from 'vue'
+
+/* Animate the width of a panel, while holding the interior width constant.
+ *
+ * Rendering the content at the target width and clipping prevents distracting and expensive reflow.
+ */
+
+// Target size is passed via CSS variable --slide-in-panel-size.
+const props = defineProps<{
+  show: boolean
+  // Default: from right.
+  from?: 'right' | 'left'
+}>()
+
+const contentStyle = computed(() => (props.from === 'left' ? { right: 0 } : { left: 0 }))
+
+const rootElement = shallowRef<HTMLElement>()
+
+defineExpose({ rootElement })
+</script>
+
+<template>
+  <Transition>
+    <div v-if="show" ref="rootElement" class="SlideIn">
+      <div class="content" :style="contentStyle">
+        <slot />
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.SlideIn {
+  box-sizing: content-box;
+  width: var(--slide-in-panel-size);
+  position: relative;
+  overflow-x: clip;
+  &.v-enter-active,
+  &.v-leave-active {
+    transition: width 0.1s ease;
+  }
+  &.v-enter-from,
+  &.v-leave-to {
+    width: 0;
+  }
+}
+
+.content {
+  position: absolute;
+  width: var(--slide-in-panel-size);
+  height: 100%;
+}
+</style>
diff --git a/app/gui2/src/components/TopBar.vue b/app/gui2/src/components/TopBar.vue
index 9a1394c6379d..8877fe23acfe 100644
--- a/app/gui2/src/components/TopBar.vue
+++ b/app/gui2/src/components/TopBar.vue
@@ -69,16 +69,19 @@ const barStyle = computed(() => {
   position: absolute;
   display: flex;
   gap: 8px;
-  top: 9px;
-  /* FIXME[sb]: Get correct offset from dashboard. */
-  left: 9px;
-  width: 100%;
+  top: 8px;
+  left: 0;
+  right: 0;
   pointer-events: none;
   > * {
     pointer-events: auto;
   }
 }
 
+.TopBar.extraRightSpace {
+  right: 32px;
+}
+
 .selection-menu-enter-active,
 .selection-menu-leave-active {
   transition: opacity 0.25s ease;
diff --git a/app/gui2/src/composables/events.ts b/app/gui2/src/composables/events.ts
index 4a7192a825bf..1d41cd649510 100644
--- a/app/gui2/src/composables/events.ts
+++ b/app/gui2/src/composables/events.ts
@@ -140,12 +140,32 @@ export function modKey(e: KeyboardEvent | MouseEvent): boolean {
   return isMacLike ? e.metaKey : e.ctrlKey
 }
 
-/** A helper for getting Element out of VueInstance, it allows using `useResizeObserver` with Vue components. */
+/** A helper for getting Element out of VueInstance, it allows using `useResizeObserver` with Vue components.
+ *
+ * Note that this function is only shallowly reactive: It will trigger its reactive scope if the value of `element`
+ * changes, but not if the root `Element` of the provided `VueInstance` changes. This is because a
+ * `ComponentPublicInstance` is implicitly treated as if `markRaw` were applied[^1]. As a result, this function should
+ * not be used for any component that may have a dynamic root element; rather, the component can use `defineExpose` to
+ * provide access to a `ref`.
+ *
+ * [^1]: https://github.com/vuejs/core/blob/ae97e5053895eeaaa443306e72cd8f45da001179/packages/runtime-core/src/componentPublicInstance.ts#L312
+ */
 export function unrefElement(
   element: Ref<Element | undefined | null | VueInstance>,
 ): Element | undefined | null {
   const plain = toValue(element)
-  return (plain as VueInstance)?.$el ?? plain
+  const result = (plain as VueInstance)?.$el ?? plain
+  // A component's root can be a Node (if it's a fragment), TextNode, or Comment (if its root uses a v-if).
+  if (result != null && !(result instanceof Element)) {
+    if (result instanceof Comment && result.data.includes('v-if')) {
+      console.warn(
+        "unrefElement: Component root is a v-if, but a root element can't be watched reactively.",
+        result,
+      )
+    }
+    return undefined
+  }
+  return result
 }
 
 interface ResizeObserverData {
diff --git a/app/gui2/src/providers/widgetRegistry/__tests__/editHandler.test.ts b/app/gui2/src/providers/widgetRegistry/__tests__/editHandler.test.ts
index 2cd1f6a2d679..290b7425ee3b 100644
--- a/app/gui2/src/providers/widgetRegistry/__tests__/editHandler.test.ts
+++ b/app/gui2/src/providers/widgetRegistry/__tests__/editHandler.test.ts
@@ -5,7 +5,7 @@ import { useCurrentEdit, type CurrentEdit } from '@/providers/widgetTree'
 import { assert } from 'shared/util/assert'
 import { expect, test, vi, type Mock } from 'vitest'
 import { proxyRefs } from 'vue'
-import { WidgetEditHandler, type WidgetId } from '../editHandler'
+import { WidgetEditHandler } from '../editHandler'
 
 // If widget's name is a prefix of another widget's name, then it is its ancestor.
 // The ancestor with longest name is a direct parent.

From 21e1a24231e562b6a1187013a5d429917c45ad9a Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Mon, 1 Jul 2024 09:57:07 -0700
Subject: [PATCH 2/3] Fix keyboardBusy bug

---
 app/gui2/src/composables/events.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/gui2/src/composables/events.ts b/app/gui2/src/composables/events.ts
index 1d41cd649510..997bef4d285f 100644
--- a/app/gui2/src/composables/events.ts
+++ b/app/gui2/src/composables/events.ts
@@ -115,8 +115,20 @@ export function useEventConditional(
 }
 
 /** Whether any element currently has keyboard focus. */
-export function keyboardBusy() {
-  return document.activeElement != document.body
+export function keyboardBusy(): boolean {
+  return (
+    document.activeElement !== document.body &&
+    document.activeElement instanceof HTMLElement &&
+    isEditable(document.activeElement)
+  )
+}
+
+function isEditable(element: HTMLElement) {
+  return (
+    element.isContentEditable ||
+    element instanceof HTMLInputElement ||
+    element instanceof HTMLTextAreaElement
+  )
 }
 
 /** Whether focused element is within given element's subtree. */

From 836da9504169dfa26cca9c8527b1240743db8dce Mon Sep 17 00:00:00 2001
From: Kaz <kaz@lambdaverse.org>
Date: Thu, 4 Jul 2024 08:52:15 -0700
Subject: [PATCH 3/3] Use existing SizeTransition component

---
 app/gui2/src/components/DockPanel.vue | 26 ++++++-------
 app/gui2/src/components/SlideIn.vue   | 54 ---------------------------
 2 files changed, 13 insertions(+), 67 deletions(-)
 delete mode 100644 app/gui2/src/components/SlideIn.vue

diff --git a/app/gui2/src/components/DockPanel.vue b/app/gui2/src/components/DockPanel.vue
index e476093491c1..52e4cf863dea 100644
--- a/app/gui2/src/components/DockPanel.vue
+++ b/app/gui2/src/components/DockPanel.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
 import { documentationEditorBindings } from '@/bindings'
 import ResizeHandles from '@/components/ResizeHandles.vue'
-import SlideIn from '@/components/SlideIn.vue'
+import SizeTransition from '@/components/SizeTransition.vue'
 import ToggleIcon from '@/components/ToggleIcon.vue'
 import { useResizeObserver } from '@/composables/events'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
-import { computed, ref, type ComponentInstance } from 'vue'
+import { computed, ref } from 'vue'
 
 const MIN_DOCK_SIZE_PX = 200
 
 const toolbarElement = ref<HTMLElement>()
-const slideInPanel = ref<ComponentInstance<typeof SlideIn>>()
-const slideInPanelRoot = computed(() => slideInPanel.value?.rootElement)
+const slideInPanel = ref<HTMLElement>()
 
 const show = defineModel<boolean>('show', { required: true })
 const size = defineModel<number | undefined>('size')
 
-const computedSize = useResizeObserver(slideInPanelRoot)
+const computedSize = useResizeObserver(slideInPanel)
 const computedBounds = computed(() => new Rect(Vec2.Zero, computedSize.value))
 
 function clampSize(size: number) {
@@ -25,7 +24,7 @@ function clampSize(size: number) {
 }
 
 const style = computed(() => ({
-  '--slide-in-panel-size': size.value != null ? `${clampSize(size.value)}px` : undefined,
+  width: size.value != null ? `${clampSize(size.value)}px` : 'var(--right-dock-default-width)',
 }))
 </script>
 
@@ -36,18 +35,19 @@ const style = computed(() => ({
     icon="right_panel"
     class="toggleDock"
   />
-  <SlideIn ref="slideInPanel" :show="show" :style="style" class="DockPanel" data-testid="rightDock">
-    <div ref="toolbarElement" class="toolbar"></div>
-    <div class="scrollArea">
-      <slot :toolbar="toolbarElement" />
+  <SizeTransition width :duration="100">
+    <div v-if="show" ref="slideInPanel" :style="style" class="DockPanel" data-testid="rightDock">
+      <div ref="toolbarElement" class="toolbar"></div>
+      <div class="scrollArea">
+        <slot :toolbar="toolbarElement" />
+      </div>
+      <ResizeHandles left :modelValue="computedBounds" @update:modelValue="size = $event.width" />
     </div>
-    <ResizeHandles left :modelValue="computedBounds" @update:modelValue="size = $event.width" />
-  </SlideIn>
+  </SizeTransition>
 </template>
 
 <style scoped>
 .DockPanel {
-  --slide-in-panel-size: var(--right-dock-default-width);
   background-color: rgb(255, 255, 255);
 }
 
diff --git a/app/gui2/src/components/SlideIn.vue b/app/gui2/src/components/SlideIn.vue
deleted file mode 100644
index ca2d6c3e926d..000000000000
--- a/app/gui2/src/components/SlideIn.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { computed, shallowRef } from 'vue'
-
-/* Animate the width of a panel, while holding the interior width constant.
- *
- * Rendering the content at the target width and clipping prevents distracting and expensive reflow.
- */
-
-// Target size is passed via CSS variable --slide-in-panel-size.
-const props = defineProps<{
-  show: boolean
-  // Default: from right.
-  from?: 'right' | 'left'
-}>()
-
-const contentStyle = computed(() => (props.from === 'left' ? { right: 0 } : { left: 0 }))
-
-const rootElement = shallowRef<HTMLElement>()
-
-defineExpose({ rootElement })
-</script>
-
-<template>
-  <Transition>
-    <div v-if="show" ref="rootElement" class="SlideIn">
-      <div class="content" :style="contentStyle">
-        <slot />
-      </div>
-    </div>
-  </Transition>
-</template>
-
-<style scoped>
-.SlideIn {
-  box-sizing: content-box;
-  width: var(--slide-in-panel-size);
-  position: relative;
-  overflow-x: clip;
-  &.v-enter-active,
-  &.v-leave-active {
-    transition: width 0.1s ease;
-  }
-  &.v-enter-from,
-  &.v-leave-to {
-    width: 0;
-  }
-}
-
-.content {
-  position: absolute;
-  width: var(--slide-in-panel-size);
-  height: 100%;
-}
-</style>