Add maximized mode to markdown-textarea + CSS improvements (#2660)

* Add arrows-angle-contract/expand bootstrap icons

* Add grey textarea-background-color

* Add maximized support to markdown-textarea + improve column display

* Refactor CSS + add ResizeObservable

* Replace bootstrap icons with softies

* Add ResizeObserver typing definition

* Add focus on textarea + Fix Observables

* Propage component changes on markdown plugins

* Ignore ResizeObserver not implemented in typescript yet

* Move observers from constructor to click event

* Add scss and css variables

* Replace textareaWidth with textareaMaxWidth to fix others textareas

* Clean unused css rules

* Fix ResizeObserver unknown by TypeScript compiler

* Set max-width: 100% for small and mobile views

* Fix textarea/preview height on maximized mode

* Add common padding textarea/preview side-by-side

* Hide scrollbar sub-menu on small-views

* Add maximized mode for mobile views

* Fix sass calculate syntax

* Revert custom CSS variable for inputBorderRadius and inputBorderColor

* Remove unsued methods

* Fix missing implement method

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

2 files changed, 22 insertions, 0 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index cc6552705..ff6ce394f 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -38,6 +38,8 @@ body {
   --inputBackgroundColor: #{$input-background-color};
   --inputPlaceholderColor: #{$input-placeholder-color};
 
+  --textareaBackgroundColor: #{$textarea-background-color};
+
   --actionButtonColor: #{$grey-foreground-color};
   --supportButtonBackgroundColor: #{transparent};
   --supportButtonColor: #{var(--actionButtonColor)};
@@ -144,6 +146,16 @@ label {
       padding-right: $expanded-horizontal-margins;
     }
   }
+
+  &.lock-scroll .main-row > router-outlet + * {
+    // Lock and hide body scrollbars
+    position: fixed;
+
+    // Lock and hide sub-menu scrollbars
+    .sub-menu {
+      overflow-x: hidden;
+    }
+  }
 }
 
 .title-page {
@@ -304,6 +316,12 @@ table {
         margin-bottom: $sub-menu-margin-bottom-small-view;
       }
 
+      my-markdown-textarea {
+        .root {
+          max-width: 100% !important;
+        }
+      }
+
       input[type=text],
       input[type=password],
       input[type=email],
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index cf7657550..72eb7b61e 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -68,6 +68,8 @@ $theater-bottom-space: 115px;
 $input-background-color: $bg-color;
 $input-placeholder-color: #898989;
 
+$textarea-background-color: $grey-background-hover-color;
+
 $sub-menu-margin-bottom: 30px;
 $sub-menu-margin-bottom-small-view: 10px;
 
@@ -95,6 +97,8 @@ $variables: (
   --inputBackgroundColor: var(--inputBackgroundColor),
   --inputPlaceholderColor: var(--inputPlaceholderColor),
 
+  --textareaBackgroundColor: var(--textareaBackgroundColor),
+
   --actionButtonColor: var(--actionButtonColor),
   --supportButtonColor: var(--supportButtonColor),
   --supportButtonBackgroundColor: var(--supportButtonBackgroundColor),