From 608b8d42d4b93ac355ea792bf9100a4719ad83e1 Mon Sep 17 00:00:00 2001
From: dragonwocky <thedragonring.bod@gmail.com>
Date: Fri, 11 Aug 2023 00:15:48 +1000
Subject: [PATCH] fix: set min widths on panel content to prevent layout shift
 on toggle

---
 src/core/islands/Panel.mjs       | 16 ++++++++++------
 src/core/menu/islands/Select.mjs |  8 +++++---
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/core/islands/Panel.mjs b/src/core/islands/Panel.mjs
index 9e1c29f..fc00eb3 100644
--- a/src/core/islands/Panel.mjs
+++ b/src/core/islands/Panel.mjs
@@ -25,8 +25,8 @@ function Panel({
   const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
     { addMutationListener, removeMutationListener } = globalThis.__enhancerApi;
   extendProps(props, {
-    class: `notion-enhancer--side-panel order-2 shrink-0
-    transition-[width] open:w-[var(--side\\_panel--width)]
+    class: `notion-enhancer--panel order-2 shrink-0
+    transition-[width] open:w-[var(--panel--width)]
     border-l-1 border-[color:var(--theme--fg-border)]
     relative bg-[color:var(--theme--bg-primary)] w-0
     duration-[${transitionDuration}ms] group/panel`,
@@ -78,12 +78,16 @@ function Panel({
     >
       <${Select}
         popupMode="dropdown"
-        maxWidth="${maxWidth}"
         class="w-full text-left"
-        ...${{ _get, _set, values, maxWidth: maxWidth - 56 }}
+        maxWidth=${maxWidth - 56}
+        minWidth=${minWidth - 56}
+        ...${{ _get, _set, values }}
       />
     </div>`,
-    $view = html`<div class="h-full overflow-y-auto"></div>`,
+    $view = html`<div
+      class="overflow-(y-auto x-hidden)
+      h-full min-w-[var(--panel--width)]"
+    ></div>`,
     $panel = html`<aside ...${props}>
       ${$resize}
       <div
@@ -166,7 +170,7 @@ function Panel({
       _setWidth?.(width);
     } else width = await _getWidth?.();
     if (isNaN(width)) width = minWidth;
-    $panel.style.setProperty("--side_panel--width", `${width}px`);
+    $panel.style.setProperty("--panel--width", `${width}px`);
     repositionHelp();
   };
   $panel.open = () => {
diff --git a/src/core/menu/islands/Select.mjs b/src/core/menu/islands/Select.mjs
index a50423a..d0eab92 100644
--- a/src/core/menu/islands/Select.mjs
+++ b/src/core/menu/islands/Select.mjs
@@ -43,6 +43,7 @@ function Select({
   _requireReload = true,
   popupMode = "left",
   maxWidth = 256,
+  minWidth = 48,
   ...props
 }) {
   const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
@@ -52,9 +53,10 @@ function Select({
       role="button"
       tabindex="0"
       class="appearance-none bg-transparent rounded-[4px]
-      cursor-pointer text-[14px] leading-[28px] h-[28px]
-      max-w-[${maxWidth}px] pl-[8px] pr-[28px] transition
-      duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]"
+      h-[28px] max-w-[${maxWidth}px] min-w-[${minWidth}px]
+      cursor-pointer text-[14px] overflow-hidden pr-[28px]
+      transition duration-[20ms] leading-[28px] pl-[8px]
+      hover:bg-[color:var(--theme--bg-hover)]"
     ></div>`;
 
   const options = values.map((opt) => {