From 4255ecd1918b79f24cfcee5473a4b443eb880f85 Mon Sep 17 00:00:00 2001
From: Anastasiia Moskvina <77681522+AnaMoskvina@users.noreply.github.com>
Date: Thu, 3 Mar 2022 16:30:32 +0300
Subject: [PATCH] #1292 Incorrect horizontal scrollbars in save structure modal
 window (#1296)

* fix styles

* apply formatting

* add fallback font for mac os, add height for thin scrollbar

* remove font settings for textarea

Co-authored-by: Anastasiia Moskvina <anastasiia_moskvina@epam.com>
---
 .../modal/components/document/Save/Save.module.less      | 9 ++++-----
 packages/ketcher-react/src/style/mixins.less             | 3 +++
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less
index d2919f5b6b..22053b25e2 100644
--- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less
+++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Save/Save.module.less
@@ -17,7 +17,7 @@
 @import '../../../../../../../style/variables.less';
 @import '../../../../../../../style/mixins.less';
 
-@save-container-width-large: 485px;
+@save-container-width-large: 482px;
 @save-container-height-large: 315px;
 @save-container-width-small: 380px;
 @save-container-height-small: 325px;
@@ -40,10 +40,10 @@
 
   .warnings {
     max-height: 50px;
-    height: fit-content;
+    flex-shrink: 0;
     border: none;
     border-radius: 4px;
-    margin: 2px;
+    margin: 2px 0;
     padding: 2px 5px;
     overflow: auto;
 
@@ -51,7 +51,7 @@
 
     .warningsContainer {
       display: flex;
-
+      
       .warningsArr {
         color: @error-color;
         margin: 2px;
@@ -81,7 +81,6 @@
 
       input {
         height: 25px !important;
-        width: 190px;
       }
 
       > span {
diff --git a/packages/ketcher-react/src/style/mixins.less b/packages/ketcher-react/src/style/mixins.less
index 851eb60914..cb3f180b69 100644
--- a/packages/ketcher-react/src/style/mixins.less
+++ b/packages/ketcher-react/src/style/mixins.less
@@ -443,6 +443,7 @@
 .scrollbar_thin {
   &::-webkit-scrollbar {
     width: 4px;
+    height: 4px;
     background-color: @color-scroll-inactive;
     border-radius: 2px;
     -webkit-border-radius: 2px;
@@ -457,4 +458,6 @@
   &::-webkit-scrollbar-thumb:active {
     background-color: @color-scroll;
   }
+
+  scrollbar-width: thin; // mozilla
 }