#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>

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,18 +40,18 @@
 
   .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;
 
     .scrollbar_thin();
 
     .warningsContainer {
       display: flex;
-
+      
       .warningsArr {
         color: @error-color;
         margin: 2px;
@@ -81,7 +81,6 @@
 
       input {
         height: 25px !important;
-        width: 190px;
       }
 
       > span {

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
 }