From 15c9e93e8aa8a621c7094c5932b7f426160feaa2 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Mon, 22 Mar 2021 19:01:57 +0100
Subject: [PATCH] css for command palette

---
 .../web/src/commands/CommandPalette.svelte    | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/commands/CommandPalette.svelte b/packages/web/src/commands/CommandPalette.svelte
index 72bbcb42e..c3e8c1997 100644
--- a/packages/web/src/commands/CommandPalette.svelte
+++ b/packages/web/src/commands/CommandPalette.svelte
@@ -72,23 +72,29 @@
   <div class="search">
     <input type="text" bind:this={domInput} bind:value={filter} on:keydown={handleKeyDown} />
   </div>
-  {#each filteredItems as command, index}
-    <div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}>
-      <div>{command.text}</div>
-      {#if command.keyText}
-        <div class="shortcut">{command.keyText}</div>
-      {/if}
-    </div>
-  {/each}
+  <div class="content">
+    {#each filteredItems as command, index}
+      <div class="command" class:selected={index == selectedIndex} on:click={() => handleCommand(command)}>
+        <div>{command.text}</div>
+        {#if command.keyText}
+          <div class="shortcut">{command.keyText}</div>
+        {/if}
+      </div>
+    {/each}
+  </div>
 </div>
 
 <style>
   .main {
     width: 500px;
-    max-height: 500px;
     background: var(--theme-bg-2);
     padding: 5px;
   }
+
+  .content {
+    max-height: 400px;
+    overflow-y: scroll;
+  }
   .search {
     display: flex;
   }