diff options
| author | Sanskar Soni <sanskarsoni300@gmail.com> | 2024-06-13 09:37:03 +0530 |
|---|---|---|
| committer | Sanskar Soni <sanskarsoni300@gmail.com> | 2024-06-13 09:37:03 +0530 |
| commit | 4a5ec42baae2eb88d76c3a55ec08e6114857b03c (patch) | |
| tree | 7c19404644eb338b01f9e4a7905d58565b974f8a /src | |
| parent | 7874470b97549686790e6de89ad085a8570658e2 (diff) | |
fix(NewMessage): typing indicator alignment for wide screens
Signed-off-by: Sanskar Soni <sanskarsoni300@gmail.com>
Diffstat (limited to 'src')
| -rw-r--r-- | src/assets/variables.scss | 1 | ||||
| -rw-r--r-- | src/components/NewMessage/NewMessage.vue | 2 | ||||
| -rw-r--r-- | src/components/NewMessage/NewMessageTypingIndicator.vue | 4 |
3 files changed, 5 insertions, 2 deletions
diff --git a/src/assets/variables.scss b/src/assets/variables.scss index 945148eb3..f4d6d7812 100644 --- a/src/assets/variables.scss +++ b/src/assets/variables.scss @@ -11,6 +11,7 @@ $messages-text-max-width: calc(70 * var(--default-font-size)); $message-utils-width: calc(52px + 4 * var(--default-grid-baseline) + 120px); $messages-list-max-width: calc($messages-text-max-width + $message-utils-width + 3 * var(--default-grid-baseline)); +$message-input-max-width: calc($messages-list-max-width - 100px); // background color of call container $color-call-background: rgba(34, 34, 34, 0.8); diff --git a/src/components/NewMessage/NewMessage.vue b/src/components/NewMessage/NewMessage.vue index 4c28a66e8..ce87b127c 100644 --- a/src/components/NewMessage/NewMessage.vue +++ b/src/components/NewMessage/NewMessage.vue @@ -1032,7 +1032,7 @@ export default { display: flex; gap: 4px; position: relative; - max-width: calc($messages-list-max-width - 100px); + max-width: $message-input-max-width; margin: 0 auto; &__emoji-picker { diff --git a/src/components/NewMessage/NewMessageTypingIndicator.vue b/src/components/NewMessage/NewMessageTypingIndicator.vue index 6529b6245..6ddd3431c 100644 --- a/src/components/NewMessage/NewMessageTypingIndicator.vue +++ b/src/components/NewMessage/NewMessageTypingIndicator.vue @@ -131,13 +131,15 @@ export default { </script> <style lang="scss" scoped> +@import '../../assets/variables'; + .indicator { width: 100%; padding-right: 12px; margin-bottom: 4px; &__wrapper { - max-width: 800px; + max-width: $message-input-max-width; display: flex; align-items: center; margin: auto; |