diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css index 748fba70685f..b2f749bb6581 100644 --- a/packages/main/src/themes/MultiComboBox.css +++ b/packages/main/src/themes/MultiComboBox.css @@ -8,7 +8,7 @@ } :host([tokenizer-available]) { - min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width)); + min-width: calc(var(--_ui5_input_min_width_tokenizer_available) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width)); } :host(:not([hidden])) { diff --git a/packages/main/src/themes/MultiInput.css b/packages/main/src/themes/MultiInput.css index ab82555c4f85..19c1c39963a8 100644 --- a/packages/main/src/themes/MultiInput.css +++ b/packages/main/src/themes/MultiInput.css @@ -5,7 +5,7 @@ } :host([tokenizer-available]) { - min-width: calc(var(--_ui5_input_min_width) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width)); + min-width: calc(var(--_ui5_input_min_width_tokenizer_available) + (var(--_ui5-input-icons-count)*var(--_ui5_input_icon_width)) + var(--_ui5_input_tokenizer_min_width)); } .ui5-multi-input-tokenizer { diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index fa5471b6d5a3..3dd88aea2e05 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -1,6 +1,7 @@ :host { --_ui5_input_width: 13.125rem; --_ui5_input_min_width: 2.75rem; + --_ui5_input_min_width_tokenizer_available: 3rem; --_ui5_input_height: var(--sapElement_Height); --_ui5_input_margin_top_bottom: 0.25rem; --_ui5_input_hover_border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_Hover_BorderColor); @@ -69,12 +70,13 @@ --_ui5_input_icon_wrapper_state_height: 100%; --_ui5_input_icon_wrapper_success_state_height: 100%; --_ui5-input-icons-count: 0; - --_ui5_input_tokenizer_min_width: 3.25rem; + --_ui5_input_tokenizer_min_width: 3.5rem; } @container style(--ui5_content_density: compact) { :host { --_ui5_input_min_width: 2rem; + --_ui5_input_min_width_tokenizer_available: 2rem; --_ui5_input_icon_width: 2rem; --_ui5_input_error_warning_icon_padding: .1875rem .375rem .1875rem .4375rem; --_ui5_input_error_warning_focused_icon_padding: .1875rem .375rem .1875rem .4375rem; diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 05ab49800e29..0eb80229019f 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -269,6 +269,7 @@ --_ui5_input_inner_space_to_tokenizer: 0.125rem; --_ui5_input_inner_space_to_n_more_text: 0.125rem; --_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width); + --_ui5_input_min_width_tokenizer_available: 2rem; /* Menu */ --_ui5_menu_item_padding: 0 0.75rem 0 0.5rem;