diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss index 3ca30b05b..008315415 100644 --- a/src/styles/components/fields/_field.scss +++ b/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 { diff --git a/src/styles/components/widgets/_colorscalepicker.scss b/src/styles/components/widgets/_colorscalepicker.scss index c74837487..c4e470cdc 100644 --- a/src/styles/components/widgets/_colorscalepicker.scss +++ b/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; } diff --git a/src/styles/components/widgets/_numeric-input.scss b/src/styles/components/widgets/_numeric-input.scss index 0b2a707f2..bb17b2a6c 100644 --- a/src/styles/components/widgets/_numeric-input.scss +++ b/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; diff --git a/src/styles/components/widgets/_trace-type-selector.scss b/src/styles/components/widgets/_trace-type-selector.scss index b70764c3c..ab2de3427 100644 --- a/src/styles/components/widgets/_trace-type-selector.scss +++ b/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;