fix(styling): remove css variable on width causing UX problem

- for some reason a width can be set as `none` in SASS which is invalid and will be disregarded by CSS but doing the same thing with a CSS variable won't work, it will try to use it anyway without discarding it so let's comment it out and keep only SASS variable
ghiscoding · Jul 16, 2021 · df69f9c · df69f9c
1 parent 7edc3bf
commit df69f9c
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -83,7 +83,7 @@ $header-padding-bottom:                               4px !default;
 $header-padding-left:                                 4px !default;
 $header-padding:                                      $header-padding-top $header-padding-right $header-padding-bottom $header-padding-left !default;
 $header-input-height:                                 27px !default;                        // height of the filter form element (input, textarea, select)
-$header-input-width:                                  100% !default;                        // width of the filter form element (input, textarea, select)
+$header-input-width:                                  none !default;                        // width of the filter form element (input, textarea, select)
 $header-input-padding:                                0 6px !default;                       // padding of the filter form element (input, textarea, select)
 $header-row-background-color:                         #ffffff !default;
 $header-row-count:                                    2 !default;                           // how many rows to display on the header

diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
@@ -248,7 +248,8 @@
       .slick-headerrow-column textarea {
         margin-right: 0;
         padding: var(--slick-header-input-padding, $header-input-padding);
-        width: var(--slick-header-input-width, $header-input-width);
+        // this is the only CSS variable not working, so only use SASS for now and leave it commented out so we have traces of it
+        width: $header-input-width; // var(--slick-header-input-width, $header-input-width);
         height: var(--slick-header-input-height, $header-input-height);
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;