From d6bbae46a623b0b62352232e79c4cb7f0aec7b54 Mon Sep 17 00:00:00 2001 From: Bastian Hofmann Date: Fri, 13 Jan 2023 00:01:07 +0100 Subject: [PATCH] Fix multi select styling (#7843) * Fix multi select styling so that the form field expands if not all items fit into a single line anymore. Fixes https://github.com/rancher/dashboard/issues/7842 Signed-off-by: Bastian Hofmann * Remove duplication in _select.scss * Fix select heights in ContainerLogs, ContainerShell, ApplicationLogs and ApplicationShell components Signed-off-by: Bastian Hofmann Signed-off-by: Bastian Hofmann --- pkg/epinio/windowComponents/ApplicationLogs.vue | 1 + pkg/epinio/windowComponents/ApplicationShell.vue | 1 + shell/assets/styles/global/_select.scss | 5 +---- shell/components/nav/WindowManager/ContainerLogs.vue | 1 + shell/components/nav/WindowManager/ContainerShell.vue | 1 + 5 files changed, 5 insertions(+), 4 deletions(-) diff --git a/pkg/epinio/windowComponents/ApplicationLogs.vue b/pkg/epinio/windowComponents/ApplicationLogs.vue index bd58216b9e..c59c7fffeb 100644 --- a/pkg/epinio/windowComponents/ApplicationLogs.vue +++ b/pkg/epinio/windowComponents/ApplicationLogs.vue @@ -460,6 +460,7 @@ export default { display: inline-block; min-width: 200px; height: 30px; + min-height: 30px; width: initial; } } diff --git a/pkg/epinio/windowComponents/ApplicationShell.vue b/pkg/epinio/windowComponents/ApplicationShell.vue index 49021475f1..7b6686c815 100644 --- a/pkg/epinio/windowComponents/ApplicationShell.vue +++ b/pkg/epinio/windowComponents/ApplicationShell.vue @@ -355,6 +355,7 @@ export default { display: inline-block; min-width: 200px; height: 30px; + min-height: 30px; width: initial; } } diff --git a/shell/assets/styles/global/_select.scss b/shell/assets/styles/global/_select.scss index df8a370c95..846ad0b1d0 100644 --- a/shell/assets/styles/global/_select.scss +++ b/shell/assets/styles/global/_select.scss @@ -9,16 +9,13 @@ } .unlabeled-select:not(.in-input) { - height: $unlabeled-input-height; + min-height: $unlabeled-input-height; } .col { > .unlabeled-select:not(.taggable) { padding-top: 5px; } } -.unlabeled-select:not(.in-input) { - height: $unlabeled-input-height; -} .labeled-select, .unlabeled-select { diff --git a/shell/components/nav/WindowManager/ContainerLogs.vue b/shell/components/nav/WindowManager/ContainerLogs.vue index fc67299d0d..6bb32b2566 100644 --- a/shell/components/nav/WindowManager/ContainerLogs.vue +++ b/shell/components/nav/WindowManager/ContainerLogs.vue @@ -631,6 +631,7 @@ export default { display: inline-block; min-width: 200px; height: 30px; + min-height: 30px; width: initial; } } diff --git a/shell/components/nav/WindowManager/ContainerShell.vue b/shell/components/nav/WindowManager/ContainerShell.vue index 488619e733..5e0717aed5 100644 --- a/shell/components/nav/WindowManager/ContainerShell.vue +++ b/shell/components/nav/WindowManager/ContainerShell.vue @@ -441,6 +441,7 @@ export default { display: inline-block; min-width: 200px; height: 30px; + min-height: 30px; width: initial; } }