Smaller object details (#1877)

* Smaller object details

* Increased version, updated changelog

CHANGELOG.md

@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -
 
 ### Changed
--
+- Smaller object details (<https://github.com/opencv/cvat/pull/1877>)
 
 ### Deprecated
 -

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-attribute.tsx

@@ -46,6 +46,8 @@ function ItemAttributeComponent(props: Props): JSX.Element {
         changeAttribute,
     } = props;
 
+    const attrNameStyle: React.CSSProperties = { wordBreak: 'break-word', lineHeight: '1em' };
+
     if (attrInputType === 'checkbox') {
         return (
             <Col span={24}>
@@ -57,7 +59,7 @@ function ItemAttributeComponent(props: Props): JSX.Element {
                         changeAttribute(attrID, value);
                     }}
                 >
-                    <Text strong className='cvat-text'>
+                    <Text style={attrNameStyle} className='cvat-text'>
                         {attrName}
                     </Text>
                 </Checkbox>
@@ -70,7 +72,7 @@ function ItemAttributeComponent(props: Props): JSX.Element {
             <Col span={24}>
                 <fieldset className='cvat-object-item-radio-attribute'>
                     <legend>
-                        <Text strong className='cvat-text'>{attrName}</Text>
+                        <Text style={attrNameStyle} className='cvat-text'>{attrName}</Text>
                     </legend>
                     <Radio.Group
                         size='small'
@@ -94,12 +96,12 @@ function ItemAttributeComponent(props: Props): JSX.Element {
     if (attrInputType === 'select') {
         return (
             <>
-                <Col span={24}>
-                    <Text strong className='cvat-text'>
+                <Col span={8} style={attrNameStyle}>
+                    <Text className='cvat-text'>
                         {attrName}
                     </Text>
                 </Col>
-                <Col span={24}>
+                <Col span={16}>
                     <Select
                         size='small'
                         onChange={(value: string): void => {
@@ -125,12 +127,12 @@ function ItemAttributeComponent(props: Props): JSX.Element {
 
         return (
             <>
-                <Col span={24}>
-                    <Text strong className='cvat-text'>
+                <Col span={8} style={attrNameStyle}>
+                    <Text className='cvat-text'>
                         {attrName}
                     </Text>
                 </Col>
-                <Col span={24}>
+                <Col span={16}>
                     <InputNumber
                         size='small'
                         onChange={(value: number | undefined): void => {
@@ -153,12 +155,12 @@ function ItemAttributeComponent(props: Props): JSX.Element {
 
     return (
         <>
-            <Col span={24}>
-                <Text strong className='cvat-text'>
+            <Col span={8} style={attrNameStyle}>
+                <Text className='cvat-text'>
                     {attrName}
                 </Text>
             </Col>
-            <Col span={24}>
+            <Col span={16}>
                 <Input
                     size='small'
                     onChange={(event: React.ChangeEvent<HTMLInputElement>): void => {

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss

@@ -170,6 +170,10 @@
         }
 
         > .ant-collapse-content {
+            > .ant-collapse-content-box {
+                padding: 3px;
+            }
+
             background: inherit;
         }
     }
@@ -203,6 +207,7 @@
         overflow: hidden;
         max-height: 1.2em;
         font-size: 1em;
+        margin: 0;
 
         > span {
             padding: 0 10px;
@@ -211,7 +216,7 @@
 
     > .ant-radio-group {
         display: grid;
-        padding: 5px;
+        padding: 1px 5px 1px 5px;
     }
 }