Fix EmojiBoard styling

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/organisms/emoji-board/EmojiBoard.jsx

@@ -64,7 +64,7 @@ function EmojiGroup({ name, groupEmojis }) {
                     alt={emoji.shortcode}
                     unicode={`:${emoji.shortcode}:`}
                     shortcodes={emoji.shortcode}
-                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
+                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc, 38, 38, 'crop')}
                     data-mx-emoticon
                   />
                 )
@@ -279,6 +279,7 @@ function EmojiBoard({ onSelect }) {
               })
             }
           </div>
+          <div className="emoji-board__nav-twemoji">
             {
               [
                 [0, EmojiIC, 'Smilies'],
@@ -300,6 +301,7 @@ function EmojiBoard({ onSelect }) {
               ))
             }
           </div>
+        </div>
       </ScrollView>
     </div>
   );

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -3,44 +3,44 @@
 @use '../../partials/dir';
 
 .emoji-board {
+  --emoji-board-height: 390px;
+  --emoji-board-width: 286px;
   display: flex;
+  
   &__content {
     @extend .cp-fx__item-one;
     @extend .cp-fx__column;
-    height: 400px;
-    width: 286px;
+    height: var(--emoji-board-height);
+    width: var(--emoji-board-width);
   }
   & > .scrollbar {
     width: initial;
-    height: 400px;
+    height: var(--emoji-board-height);
   }
   &__nav {
     @extend .cp-fx__column;
     justify-content: center;
 
+    min-height: 100%;
     padding: 4px 6px;
     background-color: var(--bg-surface-low);
     @include dir.side(border, 1px solid var(--bg-surface-border), none);
 
+    position: relative;
+    
     & .ic-btn-surface {
-      margin: calc(var(--sp-ultra-tight) / 2) 0;
       opacity: 0.8;
     }
   }
-  &__nav-custom {
+  &__nav-custom,
+  &__nav-twemoji {
     @extend .cp-fx__column;
-    border-bottom: 1px solid var(--bg-surface-border);
-    
-    & .ic-btn-surface {
-      & .ic-raw {
-        filter: grayscale(1);
-      }
-      &:hover, &:active, &:focus {
-        & .ic-raw {
-          filter: grayscale(0);
-        }
-      }
   }
+  &__nav-twemoji {
+    background: inherit;
+    position: sticky;
+    bottom: -70%;
+    z-index: 999;
   }
 }