fix: padding fixes for cell wrapper

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptions.tsx

@@ -18,7 +18,11 @@ export const CellOptions = ({
   };
 
   return (
-    <div ref={ref} onClick={() => onClick()} className={'flex flex-wrap items-center gap-2 text-xs text-black'}>
+    <div
+      ref={ref}
+      onClick={() => onClick()}
+      className={'flex flex-wrap items-center gap-2 px-4 py-2 text-xs text-black'}
+    >
       {data?.select_options.map((option, index) => (
         <div className={`${getBgColor(option.color)} rounded px-2 py-0.5`} key={index}>
           {option?.name || ''}

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx

@@ -9,6 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { Details2Svg } from '$app/components/_shared/svg/Details2Svg';
 import { CheckmarkSvg } from '$app/components/_shared/svg/CheckmarkSvg';
 import { CloseSvg } from '$app/components/_shared/svg/CloseSvg';
+import useOutsideClick from '$app/components/_shared/useOutsideClick';
 
 export const CellOptionsPopup = ({
   top,
@@ -16,12 +17,14 @@ export const CellOptionsPopup = ({
   cellIdentifier,
   cellCache,
   fieldController,
+  onOutsideClick,
 }: {
   top: number;
   left: number;
   cellIdentifier: CellIdentifier;
   cellCache: CellCache;
   fieldController: FieldController;
+  onOutsideClick: () => void;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
   const { t } = useTranslation('');
@@ -39,6 +42,10 @@ export const CellOptionsPopup = ({
     }
   }, [ref, window, top, left]);
 
+  useOutsideClick(ref, async () => {
+    onOutsideClick();
+  });
+
   return (
     <div
       ref={ref}

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellDate.tsx

@@ -20,5 +20,9 @@ export const EditCellDate = ({
     console.log(v);
   };
 
-  return <Picker value={value} onChange={onChange} useRange={false} asSingle={true}></Picker>;
+  return (
+    <div className={'px-4 py-2'}>
+      <Picker value={value} onChange={onChange} useRange={false} asSingle={true}></Picker>;
+    </div>
+  );
 };

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellText.tsx

@@ -21,12 +21,14 @@ export const EditCellText = ({ data, cellController }: { data: string; cellContr
   };
 
   return (
-    <textarea
-      className={'h-full w-full resize-none'}
-      rows={contentRows}
-      value={value}
-      onChange={(e) => onTextFieldChange(e.target.value)}
-      onBlur={() => save()}
-    />
+    <div className={'px-4 py-2'}>
+      <textarea
+        className={'h-full w-full resize-none'}
+        rows={contentRows}
+        value={value}
+        onChange={(e) => onTextFieldChange(e.target.value)}
+        onBlur={() => save()}
+      />
+    </div>
   );
 };

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditCellWrapper.tsx

@@ -50,7 +50,7 @@ export const EditCellWrapper = ({
           {databaseStore.fields[cellIdentifier.fieldId].title}
         </span>
       </div>
-      <div className={'flex-1 cursor-pointer rounded-lg px-4 py-2 hover:bg-shade-6'}>
+      <div className={'flex-1 cursor-pointer rounded-lg hover:bg-shade-6'}>
         {(cellIdentifier.fieldType === FieldType.SingleSelect ||
           cellIdentifier.fieldType === FieldType.MultiSelect ||
           cellIdentifier.fieldType === FieldType.Checklist) &&
@@ -62,7 +62,7 @@ export const EditCellWrapper = ({
           )}
 
         {cellIdentifier.fieldType === FieldType.Checkbox && (
-          <div className={'h-8 w-8'}>
+          <div className={'h-8 w-8 px-4 py-2'}>
             {(data as boolean | undefined) ? <EditorCheckSvg></EditorCheckSvg> : <EditorUncheckSvg></EditorUncheckSvg>}
           </div>
         )}

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx

@@ -118,6 +118,7 @@ export const EditRow = ({
             ></EditCellWrapper>
           ))}
         </div>
+
         <div className={'border-t border-shade-6 pt-2'}>
           <button
             onClick={() => onNewColumnClick()}
@@ -156,6 +157,7 @@ export const EditRow = ({
             cellIdentifier={editingCell}
             cellCache={controller.databaseViewCache.getRowCache().getCellCache()}
             fieldController={controller.fieldController}
+            onOutsideClick={() => setShowChangeOptionsPopup(false)}
           ></CellOptionsPopup>
         )}
       </div>