diff options
| author | eugenijm <eugenijm@protonmail.com> | 2020-06-21 17:13:29 +0300 |
|---|---|---|
| committer | eugenijm <eugenijm@protonmail.com> | 2020-07-08 15:21:31 +0300 |
| commit | f05f832bff58034d78de9478ae2dbb06284dea75 (patch) | |
| tree | e41f122ada5957618ea96e2b3206977ba8438fd8 /src/App.scss | |
| parent | aa2cf51c05ebdf411d74af5debbbc8fa4d3cf457 (diff) | |
Address feedback
Use more specific css rules for the emoji dimensions in the chat list status preview.
Use more round em value for chat list item height.
Add global html overflow and height for smoother chat navigation in
the desktop Safari.
Use offsetHeight instad of a computed style when setting the window height on resize.
Remove margin-bottom from the last message to avoid occasional layout shift in the desktop Safari
Use break-word to prevent chat message text overflow
Resize and scroll the textarea when inserting a new line on ctrl+enter
Remove fade transition on route change
Ensure proper border radius at the bottom of the chat, remove unused border-radius
Prevent the chat header "jumping" on the avatar load.
Diffstat (limited to 'src/App.scss')
| -rw-r--r-- | src/App.scss | 39 |
1 files changed, 37 insertions, 2 deletions
diff --git a/src/App.scss b/src/App.scss index 29ce73a8..e2e2d079 100644 --- a/src/App.scss +++ b/src/App.scss @@ -47,6 +47,7 @@ html { } body { + overscroll-behavior-y: none; font-family: sans-serif; font-family: var(--interfaceFont, sans-serif); margin: 0; @@ -56,7 +57,6 @@ body { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - overscroll-behavior: none; &.hidden { display: none; @@ -320,7 +320,7 @@ option { i[class*=icon-] { color: $fallback--icon; - color: var(--icon, $fallback--icon) + color: var(--icon, $fallback--icon); } .btn-block { @@ -942,3 +942,38 @@ nav { max-height: 1.3rem; line-height: 1.3rem; } + +.chat-layout { + // Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens). + overflow: hidden; + height: 100%; + + // Ensures the fixed position of the mobile browser bars on scroll up / down events. + // Prevents the mobile browser bars from overlapping or hiding the message posting form. + @media all and (max-width: 800px) { + body { + height: 100%; + } + + #app { + height: 100%; + overflow: hidden; + min-height: auto; + } + + #app_bg_wrapper { + overflow: hidden; + } + + .main { + overflow: hidden; + height: 100%; + } + + #content { + padding-top: 0; + height: 100%; + overflow: visible; + } + } +} |