Fix according to peer review

front/src/modules/pipeline-progress/states/boardColumnTotalsFamilySelector.ts

@@ -6,7 +6,7 @@ import { BoardPipelineStageColumn } from '@/ui/board/components/Board';
 import { boardState } from './boardState';
 
 export const boardColumnTotalsFamilySelector = selectorFamily({
-  key: 'BoardColumnTotalsFamily',
+  key: 'boardColumnTotalsFamilySelector',
   get:
     (pipelineStageId: string) =>
     ({ get }) => {

front/src/modules/ui/board/components/BoardColumn.tsx

@@ -14,6 +14,7 @@ export const StyledColumn = styled.div`
 `;
 
 const StyledHeader = styled.div`
+  cursor: pointer;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -21,13 +22,17 @@ const StyledHeader = styled.div`
 `;
 
 export const StyledColumnTitle = styled.h3`
+  align-items: center;
   color: ${({ color }) => color};
+  display: flex;
+  flex-direction: row;
   font-size: ${({ theme }) => theme.font.size.md};
   font-style: normal;
   font-weight: ${({ theme }) => theme.font.weight.medium};
-  line-height: ${({ theme }) => theme.text.lineHeight};
+  gap: ${({ theme }) => theme.spacing(2)};
+  height: 24px;
   margin: 0;
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;
 
 const StyledAmount = styled.div`
@@ -53,10 +58,6 @@ export function BoardColumn({
   const [isEditing, setIsEditing] = React.useState(false);
   const [internalValue, setInternalValue] = React.useState(title);
 
-  function toggleEditMode() {
-    setIsEditing(!isEditing);
-  }
-
   const debouncedOnUpdate = debounce(onTitleEdit, 200);
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setInternalValue(event.target.value);
@@ -65,17 +66,20 @@ export function BoardColumn({
 
   return (
     <StyledColumn>
-      <StyledHeader onClick={toggleEditMode}>
-        {isEditing ? (
-          <EditColumnTitleInput
-            color={colorCode}
-            toggleEditMode={toggleEditMode}
-            value={internalValue}
-            onChange={handleChange}
-          />
-        ) : (
-          <StyledColumnTitle color={colorCode}>• {title}</StyledColumnTitle>
-        )}
+      <StyledHeader onClick={() => setIsEditing(true)}>
+        <StyledColumnTitle color={colorCode}>
+          •
+          {isEditing ? (
+            <EditColumnTitleInput
+              color={colorCode}
+              onFocusLeave={() => setIsEditing(false)}
+              value={internalValue}
+              onChange={handleChange}
+            />
+          ) : (
+            <div>{title}</div>
+          )}
+        </StyledColumnTitle>
         {!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
       </StyledHeader>
       {children}

front/src/modules/ui/board/components/EditColumnTitleInput.tsx

@@ -1,48 +1,56 @@
+import React from 'react';
 import styled from '@emotion/styled';
 
 import { useScopedHotkeys } from '@/lib/hotkeys/hooks/useScopedHotkeys';
 import { useSetHotkeyScope } from '@/lib/hotkeys/hooks/useSetHotkeyScope';
+import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
 
 import { ColumnHotkeyScope } from './ColumnHotkeyScope';
 
 const StyledEditTitleInput = styled.input`
   background-color: transparent;
   border: none;
-  &::placeholder,
-  &::-webkit-input-placeholder {
+  color: ${({ color }) => color};
+  font-family: ${({ theme }) => theme.font.family};
+  font-size: ${({ theme }) => theme.font.size.md};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+
+  &::placeholder {
     color: ${({ theme }) => theme.font.color.light};
     font-family: ${({ theme }) => theme.font.family};
     font-weight: ${({ theme }) => theme.font.weight.medium};
   }
-  color: ${({ color }) => color};
-  &:focus {
-    color: ${({ color }) => color};
-    font-weight: ${({ theme }) => theme.font.weight.medium};
-    line-height: ${({ theme }) => theme.text.lineHeight};
-  }
+  font-weight: ${({ theme }) => theme.font.weight.medium};
+
   margin: 0;
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
   outline: none;
+  padding: 0;
 `;
 
 export function EditColumnTitleInput({
   color,
   value,
   onChange,
-  toggleEditMode,
+  onFocusLeave,
 }: {
   color?: string;
   value: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  toggleEditMode: () => void;
+  onFocusLeave: () => void;
 }) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  useListenClickOutsideArrayOfRef([inputRef], () => {
+    onFocusLeave();
+  });
   const setHotkeyScope = useSetHotkeyScope();
   setHotkeyScope(ColumnHotkeyScope.EditColumnName, { goto: false });
 
-  useScopedHotkeys('enter', toggleEditMode, ColumnHotkeyScope.EditColumnName);
-  useScopedHotkeys('esc', toggleEditMode, ColumnHotkeyScope.EditColumnName);
+  useScopedHotkeys('enter', onFocusLeave, ColumnHotkeyScope.EditColumnName);
+  useScopedHotkeys('esc', onFocusLeave, ColumnHotkeyScope.EditColumnName);
   return (
     <StyledEditTitleInput
+      ref={inputRef}
       placeholder={'Enter column name'}
       color={color}
       autoFocus