style: editable cell input width

src/components/seal-table/components/seal-column.tsx

@@ -40,7 +40,7 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
     if (isEditing && editable) {
       return valueType === 'number' ? (
         <InputNumber
-          style={{ width: '100%' }}
+          style={{ minWidth: '100px', width: '100%' }}
           min={0}
           value={current}
           onChange={(val) => {
@@ -69,60 +69,62 @@ const SealColumn: React.FC<SealColumnProps> = (props) => {
         'cell-right': align === 'right'
       })}
     >
-      <span className="cell-content">{renderContent()}</span>
-      {editable && (
-        <>
-          {isEditing ? (
-            <>
-              <Tooltip
-                key="confirm"
-                title={intl.formatMessage({ id: 'common.button.confirm' })}
-              >
-                <Button
-                  type="text"
-                  size="small"
-                  className="m-l-10"
-                  onClick={handleSubmit}
+      <span className="cell-content flex-center">
+        {renderContent()}
+        {editable && (
+          <span>
+            {isEditing ? (
+              <>
+                <Tooltip
+                  key="confirm"
+                  title={intl.formatMessage({ id: 'common.button.confirm' })}
                 >
-                  <CheckOutlined />
-                </Button>
-              </Tooltip>
+                  <Button
+                    type="text"
+                    size="small"
+                    className="m-l-10"
+                    onClick={handleSubmit}
+                  >
+                    <CheckOutlined />
+                  </Button>
+                </Tooltip>
+                <Tooltip
+                  title={intl.formatMessage({ id: 'common.button.cancel' })}
+                  key="undo"
+                >
+                  <Button
+                    type="text"
+                    size="small"
+                    className="m-l-10"
+                    onClick={handleUndo}
+                  >
+                    <UndoOutlined />
+                  </Button>
+                </Tooltip>
+              </>
+            ) : (
               <Tooltip
-                title={intl.formatMessage({ id: 'common.button.undo' })}
-                key="undo"
+                key="edit"
+                title={
+                  <span>
+                    {intl.formatMessage({ id: 'common.button.edit' })}
+                    <span className="m-l-5">{title}</span>
+                  </span>
+                }
               >
                 <Button
                   type="text"
                   size="small"
                   className="m-l-10"
-                  onClick={handleUndo}
+                  onClick={handleEdit}
                 >
-                  <UndoOutlined />
+                  <FormOutlined />
                 </Button>
               </Tooltip>
-            </>
-          ) : (
-            <Tooltip
-              key="edit"
-              title={
-                <span>
-                  {intl.formatMessage({ id: 'common.button.edit' })}
-                  <span className="m-l-5">{title}</span>
-                </span>
-              }
-            >
-              <Button
-                type="text"
-                size="small"
-                className="m-l-10"
-                onClick={handleEdit}
-              >
-                <FormOutlined />
-              </Button>
-            </Tooltip>
-          )}
-        </>
-      )}
+            )}
+          </span>
+        )}
+      </span>
     </div>
   );
 };