fix thread emoji layout

open-chat-labs · Dec 5, 2023 · 576c591 · 576c591
1 parent c609094
commit 576c591
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/frontend/app/src/components/Panel.svelte b/frontend/app/src/components/Panel.svelte
@@ -130,6 +130,7 @@
             padding: 0px;
             border-left: var(--bw) solid var(--bd);
             background: var(--panel-right-bg);
+            position: relative;
 
             &.modal.right {
                 background: var(--panel-right-modal);

diff --git a/frontend/app/src/components/home/EmojiPicker.svelte b/frontend/app/src/components/home/EmojiPicker.svelte
@@ -45,5 +45,9 @@
         @include size-below(xxs) {
             --num-columns: 7 !important;
         }
+
+        &.thread {
+            --num-columns: 10 !important;
+        }
     }
 </style>
diff --git a/frontend/app/src/components/home/Footer.svelte b/frontend/app/src/components/home/Footer.svelte
@@ -100,7 +100,7 @@
 </script>
 
 {#if messageAction === "emoji"}
-    <div class="emoji-overlay">
+    <div class={`emoji-overlay ${mode}`}>
         <ModalContent hideFooter hideHeader fill>
             <span slot="body">
                 <div class="emoji-header">
@@ -173,6 +173,11 @@
         border: var(--bw) solid var(--bd);
     }
 
+    :global(.emoji-overlay.thread .modal-content) {
+        width: 100%;
+        border-radius: var(--modal-rd) var(--modal-rd) 0 0;
+    }
+
     .footer {
         position: relative;
         flex: 0 0 toRem(60);
@@ -212,6 +217,11 @@
                 flex: 0 0 20px;
             }
         }
+
+        &.thread {
+            bottom: toRem(60);
+            left: 0;
+        }
     }
 
     .draft-container {