fix: fix styling

src/svelte/components/Picker/Picker.html

@@ -42,21 +42,26 @@
   <div class="lep-indicators"
        aria-hidden="true">
     {#each categories as category (category.group)}
-      <div class="lep-indicator {currentCategory.group === category.group ? '' : 'lep-hidden'}"></div>
+      <div class="lep-indicator {currentCategory.group === category.group ? '' : 'lep-hidden'}">
+      </div>
     {/each}
   </div>
-  <div role="tabpanel"
-       class="lep-tabpanel"
+  <div class="lep-tabpanel"
+       role="tabpanel"
        aria-label={i18n.categories[currentCategory.name]}
        id="lep-tab-{currentCategory.group}">
-    <div class="lep-emoji-menu" role="menu">
-      {#each currentEmojis as emoji (emoji.unicode)}
-        <button role="menuitem"
-                class="lep-tabpanel-emoji lep-emoji"
-                id="lep-emoji-{emoji.unicode}">
-          {emoji.unicode}
-        </button>
-      {/each}
+      <div class="lep-emoji-menu" role="menu">
+        {#each currentEmojis as emoji (emoji.unicode)}
+          <button role="menuitem"
+                  class="lep-tabpanel-emoji lep-emoji"
+                  id="lep-emoji-{emoji.unicode}">
+            {emoji.unicode}
+          </button>
+        {/each}
+        <!-- Render placeholders to make sure that the grid spacing looks correct. There may be a better way. -->
+        {#each placeholders as placeholder}
+          <div class="lep-emoji lep-hidden"></div>
+        {/each}
     </div>
   </div>
   <div aria-hidden="true" class="lep-hidden lep-abs-pos">

src/svelte/components/Picker/Picker.js

@@ -23,12 +23,12 @@ let rootElement
 let baselineEmoji
 let darkMode = 'auto'
 let resolvedDarkMode // eslint-disable-line no-unused-vars
+let placeholders = [] // eslint-disable-line no-unused-vars
 
 const getBaselineEmojiWidth = thunk(() => calculateTextWidth(baselineEmoji))
-
-$: resolvedDarkMode = darkMode === 'auto' ? matchMedia('(prefers-color-scheme: dark)').matches : !!darkMode
-
 $: database = new Database({ dataSource, locale })
+$: placeholders = new Array(numColumns - (currentEmojis.length % numColumns)).fill()
+$: resolvedDarkMode = darkMode === 'auto' ? matchMedia('(prefers-color-scheme: dark)').matches : !!darkMode
 $: {
   (async () => {
     if (searchText.length >= MIN_SEARCH_TEXT_LENGTH) {

src/svelte/components/Picker/Picker.scss

@@ -1,17 +1,30 @@
 @import '../../styles/global.scss';
 
-.lep-emoji-menu {
-  display: grid;
-  grid-template-columns: repeat(var(--lep-num-columns), auto);
-  justify-content: space-around;
-  align-items: center;
+//
+// tab panel
+//
+
+.lep-tabpanel {
   overflow-y: auto;
   -webkit-overflow-scrolling: touch; // fix iOS scrolling
   will-change: transform; // fix "repaints on scroll" warning in Chrome https://crbug.com/514303
   min-height: 0;
   flex: 1;
+  contain: content;
 }
 
+.lep-emoji-menu {
+  display: grid;
+  grid-template-columns: repeat(var(--lep-num-columns), auto);
+  justify-content: space-around;
+  align-items: flex-start;
+  width: 100%;
+}
+
+//
+// emoji
+//
+
 $emojiSize: 1.375rem;
 $emojiPadding: 0.5rem;
 
@@ -38,6 +51,10 @@ button.lep-emoji, .lep-emoji {
   }
 }
 
+//
+// nav
+//
+
 .lep-nav {
   display: grid;
   justify-content: space-between;
@@ -63,12 +80,9 @@ button.lep-emoji, .lep-emoji {
   background-color: var(--lep-indicator-color);
 }
 
-.lep-tabpanel {
-  min-height: 0;
-  flex: 1;
-  display: flex;
-  contain: content;
-}
+//
+// search
+//
 
 .lep-search-row {
   display: flex;
@@ -87,7 +101,10 @@ input.lep-search {
   border-radius: 0.5rem;
   border: 1px solid var(--lep-input-border-color);
   background-color: var(--lep-background-color);
+  color: var(--lep-input-font-color);
   width: 100%;
+  font-size: 1rem;
+  line-height: 1.5;
 
   &::placeholder {
     color: var(--lep-placeholder-color);

src/svelte/styles/global.scss

@@ -14,9 +14,10 @@
   contain: content;
   display: flex;
   flex-direction: column;
-  max-height: 100%;
   background: var(--lep-background-color);
   border: 1px solid var(--lep-border-color);
+  width: 100%;
+  height: 100%;
 }
 
 // via https://stackoverflow.com/a/19758620

src/svelte/styles/variables.scss

@@ -5,6 +5,7 @@
   $outline: #999;
   $input-border: #999;
   $indicator: #385ac1;
+  $input-color: #111;
 
   @if $dark {
     $border: #444;
@@ -12,7 +13,8 @@
     $placeholder: #ccc;
     $outline: #fff;
     $input-border: #ccc;
-    $indicator: #253a84;
+    $indicator: #5373ec;
+    $input-color: #efefef;
   }
 
   --lep-border-color: #{$border};
@@ -23,6 +25,7 @@
   --lep-indicator-color: #{$indicator};
   --lep-indicator-height: 3px;
   --lep-outline-size: 2px;
+  --lep-input-font-color: #{$input-color};
 
   @if $dark {
     --lep-hover-background-color: #{lighten($bg, 15%)};