diff --git a/api/components/panel.css b/api/components/panel.css
index 532926d..61acbd4 100644
--- a/api/components/panel.css
+++ b/api/components/panel.css
@@ -106,8 +106,7 @@
   cursor: pointer;
   user-select: none;
   padding: 0.75rem 0 0.75rem 1rem;
-  --scoped--bg: var(--theme--bg_secondary);
-  background: var(--scoped--bg);
+  background: var(--theme--bg_secondary);
 }
 #enhancer--panel-header-title {
   max-width: calc(100% - 4.25rem);
@@ -119,11 +118,6 @@
   max-width: calc(100% - 1.75em);
   position: relative;
 }
-.enhancer--panel-view-title-fade-edge {
-  display: inline-block;
-  width: 0.75rem;
-  height: 1em;
-}
 
 #enhancer--panel-switcher-overlay-container {
   position: fixed;
@@ -155,33 +149,18 @@
   cursor: pointer;
   overflow: hidden;
   position: relative;
-  --scoped--bg: var(--theme--bg_card);
-  background: var(--scoped--bg);
+  background: var(--theme--bg_card);
 }
 #enhancer--panel-header:hover,
 #enhancer--panel-header:focus-within,
 .enhancer--panel-switcher-item:hover,
 .enhancer--panel-switcher-item:focus {
-  --scoped--bg: var(--theme--ui_interactive-hover);
+  background: var(--theme--ui_interactive-hover);
 }
 #enhancer--panel-header:active,
 .enhancer--panel-switcher-item:active {
   background: var(--theme--ui_interactive-active);
 }
-.enhancer--panel-view-title-fade-edge:after {
-  content: '';
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 0.75rem;
-  background: linear-gradient(
-    to right,
-    transparent 0%,
-    var(--scoped--bg) 50%,
-    var(--scoped--bg) 100%
-  );
-}
 
 #enhancer--panel-content {
   margin: 0.75rem 1rem;
diff --git a/api/components/panel.mjs b/api/components/panel.mjs
index e3f27eb..5d44fc8 100644
--- a/api/components/panel.mjs
+++ b/api/components/panel.mjs
@@ -73,13 +73,13 @@ const $panel = web.html`<div id="enhancer--panel"></div>`,
     $panel.style.width = panelWidth + 'px';
     $hoverTrigger.style.width = panelWidth + 'px';
     $notionFrame.style.paddingRight = panelWidth + 'px';
-    $notionRightSidebar.style.right = panelWidth + 'px';
+    if ($notionRightSidebar) $notionRightSidebar.style.right = panelWidth + 'px';
   },
   resizeEnd = (event) => {
     $panel.style.width = '';
     $hoverTrigger.style.width = '';
     $notionFrame.style.paddingRight = '';
-    $notionRightSidebar.style.right = '';
+    if ($notionRightSidebar) $notionRightSidebar.style.right = '';
     updateWidth();
     $resizeHandle.style.cursor = '';
     document.body.removeEventListener('mousemove', resizeDrag);
@@ -264,11 +264,7 @@ export const addPanelView = async ({
       web.html`<span class="enhancer--panel-view-title-icon"></span>`,
       icon instanceof Element ? icon : web.html`${icon}`
     ),
-    $title: web.render(
-      web.html`<span class="enhancer--panel-view-title-text"></span>`,
-      title,
-      web.html`<span class="enhancer--panel-view-title-fade-edge"></span>`
-    ),
+    $title: web.render(web.html`<span class="enhancer--panel-view-title-text"></span>`, title),
     $content,
     onFocus,
     onBlur,
diff --git a/api/web.mjs b/api/web.mjs
index e5f6f5f..12d43d0 100644
--- a/api/web.mjs
+++ b/api/web.mjs
@@ -195,9 +195,10 @@ document.addEventListener('keyup', (event) => {
 
 /**
  * register a hotkey listener to the page
- * @param {array} keys - the combination of keys that will trigger the hotkey.
+ * @param {array|string} keys - the combination of keys that will trigger the hotkey.
  * key codes can be tested at http://keycode.info/ and are case-insensitive.
  * available modifiers are 'alt', 'ctrl', 'meta', and 'shift'.
+ * can be provided as a + separated string.
  * @param {function} callback - called whenever the keys are pressed
  */
 export const addHotkeyListener = (keys, callback) => {