Merge pull request #735 from plotly/more-browser-fixes

More browser fixes

Author: dmt0

src/styles/components/fields/_field.scss

@@ -95,6 +95,14 @@
   }
 }
 
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .field {
+    &__widget {
+      flex-basis: auto;
+    }
+  }
+}
+
 .field .field {
   border-top: none;
   .field__no-title {

src/styles/components/widgets/_colorscalepicker.scss

@@ -24,6 +24,12 @@ $colorscalepicker-width: 215px;
 .colorscalePickerContainer input:focus {
   outline: none;
 }
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .colorscalePickerContainer {
+    display: inline;
+  }
+}
+
 .colorscalePickerBottomContainer {
   padding-right: 3px;
 }

src/styles/components/widgets/_numeric-input.scss

@@ -24,6 +24,12 @@
   color: var(--color-text-base);
 }
 
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .numeric-input__wrapper {
+    flex-basis: auto;
+  }
+}
+
 .numeric-input__number {
   display: inline-block;
   border: var(--border-default);
@@ -34,8 +40,8 @@
   white-space: nowrap;
   text-align: left;
   border-radius: var(--border-radius-small);
-  padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit)
-    var(--spacing-quarter-unit) var(--spacing-half-unit);
+  padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit) var(--spacing-quarter-unit)
+    var(--spacing-half-unit);
   width: 62px;
   vertical-align: middle;
   font-size: inherit;

src/styles/components/widgets/_trace-type-selector.scss

@@ -1,10 +1,13 @@
 $item-size: 90px;
 $image-size: 60px;
+$label-height: 34px;
+$row-height: $image-size + $label-height + $default-half-spacing-unit +
+  $default-quarter-spacing-unit;
 
 .trace-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  @media (max-width: 1000px) {
+  @media (max-width: 860px) {
     grid-template-columns: repeat(2, 1fr);
   }
   &__column {
@@ -141,6 +144,7 @@ $image-size: 60px;
       display: grid;
       grid-gap: 0;
       grid-template-columns: repeat(2, $item-size);
+      grid-template-rows: repeat(2, $row-height);
       flex-grow: 1;
       width: 100%;
       padding: 0 var(--spacing-half-unit) var(--spacing-half-unit);
@@ -267,7 +271,7 @@ $image-size: 60px;
   &__label {
     font-weight: var(--font-weight-semibold);
     width: $item-size * 0.8;
-    height: 34px;
+    height: $label-height;
     margin-top: var(--spacing-quarter-unit);
     color: var(--color-text-base);
     text-transform: capitalize;