diff options
author | Maksim Sukharev <antreesy.web@gmail.com> | 2024-06-14 10:36:58 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2024-06-14 10:36:58 +0200 |
commit | c65070126a071df796749f06decf7ffdadb717b1 (patch) | |
tree | 43ca0ad5cbdb8454e9d146f397bab793195201b8 /src | |
parent | 7b53bdda9398b290e8d775a01ac5cbd31053b21b (diff) | |
parent | 4a5ec42baae2eb88d76c3a55ec08e6114857b03c (diff) |
Merge pull request #12505 from sanskar-soni-9/fix/typing-indicator-alignment
fix(NewMessage): typing indicator alignment for wide screens
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; |