diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss index a06719e9..2a1c7d9f 100644 --- a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss +++ b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss @@ -23,7 +23,7 @@ } &__item-prefix { - width: 42px; + max-width: 50px; margin-right: 3px; padding-top: 5px; height: 20px; @@ -36,11 +36,12 @@ &__item-prefix-text { display: block; + color: var(--g-color-text-secondary); &_long-value { white-space: nowrap; overflow: hidden; - width: 42px; + max-width: 50px; } } } diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx index f8e55771..495522f8 100644 --- a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx +++ b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.tsx @@ -158,10 +158,10 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { ); } - const itemPrefixWidth = - document.getElementById(`${key}-item-prefix`)?.offsetWidth || 0; + const itemPrefixWidth = document.getElementById(`1-item-prefix`)?.offsetWidth || 0; + const itemPrefixDisabledPopover = itemPrefixWidth < 50; const itemPrefix = idx === 0 ? null : spec.viewSpec.itemPrefix; - const itemPrefixShowPopover = itemPrefixWidth < 42; + const style = idx === 0 ? {width: itemPrefixWidth} : undefined; return (
`} className={b('item-wrapper')}> @@ -171,13 +171,14 @@ export const ArrayBase: ArrayInput = ({spec, name, arrayInput, input}) => { content={itemPrefix} className={b('item-prefix')} contentClassName={b('item-prefix-tooltip')} - disabled={itemPrefixShowPopover} + disabled={idx === 0 ? true : itemPrefixDisabledPopover} > {itemPrefix} diff --git a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss index 51d46e64..b2bfee0d 100644 --- a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss +++ b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss @@ -6,7 +6,7 @@ } &__item-prefix { - width: 42px; + max-width: 50px; margin-right: 3px; height: 20px; overflow: hidden; @@ -18,11 +18,12 @@ &__item-prefix-text { display: block; + color: var(--g-color-text-secondary); &_long-value { white-space: nowrap; overflow: hidden; - width: 42px; + max-width: 50px; } } } diff --git a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.tsx b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.tsx index d7669db3..dd9176fa 100644 --- a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.tsx +++ b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.tsx @@ -43,10 +43,10 @@ export const ArrayBaseView: ArrayView = ({spec, name, value = []}) => { return null; } - const itemPrefixWidth = - document.getElementById(`${idx}-item-prefix`)?.offsetWidth || 0; + const itemPrefixWidth = document.getElementById(`1-item-prefix`)?.offsetWidth || 0; + const itemPrefixDisabledPopover = itemPrefixWidth < 50; const itemPrefix = idx === 0 ? null : spec.viewSpec.itemPrefix; - const itemPrefixShowPopover = itemPrefixWidth < 42; + const style = idx === 0 ? {width: itemPrefixWidth} : undefined; if (spec.viewSpec.itemPrefix) { return ( @@ -56,13 +56,14 @@ export const ArrayBaseView: ArrayView = ({spec, name, value = []}) => { content={itemPrefix} className={b('item-prefix')} contentClassName={b('item-prefix-tooltip')} - disabled={itemPrefixShowPopover} + disabled={idx === 0 ? true : itemPrefixDisabledPopover} > {itemPrefix} diff --git a/src/stories/components/InputPreview/constants.ts b/src/stories/components/InputPreview/constants.ts index 85b55db4..b79526c1 100644 --- a/src/stories/components/InputPreview/constants.ts +++ b/src/stories/components/InputPreview/constants.ts @@ -142,7 +142,7 @@ const disabled: BooleanSpec = { const getViewType = (map: Record): StringSpec => ({ type: SpecTypes.String, enum: ['―', ...Object.keys(map)], - viewSpec: {type: 'select', layout: 'row', layoutTitle: 'View type'}, + viewSpec: {type: 'select', layout: 'row', layoutTitle: 'Type'}, }); const getLayoutSpec = (map: Record): StringSpec => ({