Revert changes

src/components/Form/Checkbox.tsx

@@ -11,7 +11,8 @@ type CheckboxFieldProps = {
   label: string;
   checked: boolean;
   className?: string;
-  onChange: () => void;
+  onChange?: () => void;
+  disabled?: boolean;
   'data-testid'?: string;
 };
 
@@ -22,8 +23,11 @@ type CheckboxFieldProps = {
 export const CheckboxField: React.FC<CheckboxFieldProps> = ({
   label,
   checked = false,
-  onChange,
+  onChange = () => {
+    /*empty*/
+  },
   className,
+  disabled = false,
   ...rest
 }) => {
   const [id] = useState(uuid());
@@ -34,6 +38,7 @@ export const CheckboxField: React.FC<CheckboxFieldProps> = ({
       data-testid={testid}
       className={className}
       onClick={() => onChange !== undefined && onChange()}
+      disabled={disabled}
     >
       <span className={`checkbox ${id}`}>{checked && <Icon name="check" />}</span>
       <label htmlFor={id}>{label}</label>
@@ -45,12 +50,12 @@ export const CheckboxField: React.FC<CheckboxFieldProps> = ({
 // Style
 //
 
-const CheckboxWrapper = styled.div<{ checked: boolean }>`
+const CheckboxWrapper = styled.div<{ checked: boolean; disabled: boolean }>`
   display: flex;
   align-items: center;
   width: auto;
   position: relative;
-  cursor: pointer;
+  cursor: ${(p) => (p.disabled ? 'not-allowed' : 'pointer')};
 
   label {
     display: inline-block;

src/components/Timeline/TaskListLabel.tsx

@@ -89,7 +89,7 @@ const TaskListLabel: React.FC<Props> = (props) => {
                 tasksTotal === tasksVisible ? tasksTotal : `${tasksVisible}/${tasksTotal}`
               }`}
             >
-              {props.item.step_name}
+              <StepNameWithCount>{props.item.step_name}</StepNameWithCount>
               {!!tasksTotal && (
                 <>
                   {' '}
@@ -129,6 +129,7 @@ const RowLabel = styled.div<{ type: 'step' | 'task'; isOpen?: boolean; group?: b
   font-weight: ${(p) => (p.type === 'step' ? '600' : 'normal')};
   line-height: 1.6875rem;
   border-left: ${(p) => p.theme.border.thinLight};
+  padding-left: ${(p) => (p.type === 'task' ? '0.5rem' : undefined)};
 
   a {
     display: flex;
@@ -158,6 +159,7 @@ const RowStepName = styled.span<{ bigName: boolean }>`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: flex;
 `;
 
 const RowDuration = styled.span`
@@ -210,10 +212,16 @@ const StepLabel = styled.div<{ isLoading: boolean }>`
   }
 
   svg path {
-    fill: ${(p) => (p.isLoading ? '#717171' : '#fff')};
+    fill: ${(p) => (p.isLoading ? '#717171' : undefined)};
   }
 `;
 
 const Padding = styled.div`
   width: 1.875rem;
 `;
+
+const StepNameWithCount = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100px;
+`;