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 => ({