try to fix the inline edit control

src/app/common/common.less

@@ -624,3 +624,45 @@
         fill: #cc0000;
     }
 }
+
+
+
+.inline-edit {
+    .icon {
+        display: inline;
+        width: 12px;
+        height: 12px;
+        margin-left: 1em;
+        vertical-align: middle;
+        font-size: 14px;
+    }
+
+    .button {
+        padding-top: 0;
+    }
+
+    &.edit-not-active {
+        cursor: pointer;
+        
+        i.fa-pen {
+            margin-left: 5px;
+        }
+        
+        &:hover {
+            text-decoration: underline;
+            text-decoration-style: dotted;
+        }
+    }
+
+    &.edit-active {
+        input.input {
+            padding: 0;
+            height: 20px;
+        }
+        
+        .button {
+            height: 20px;
+        }
+    }
+}
+

src/app/common/common.tsx

@@ -15,10 +15,8 @@ import { ReactComponent as CheckIcon } from "../assets/icons/line/check.svg";
 import { ReactComponent as CopyIcon } from "../assets/icons/history/copy.svg";
 import { ReactComponent as CircleIcon } from "../assets/icons/circle.svg";
 import { ReactComponent as KeyIcon } from "../assets/icons/key.svg";
-import { ReactComponent as XMarkIcon } from "../assets/icons/line/xmark.svg";
 import { ReactComponent as RotateIcon } from "../assets/icons/rotate_left.svg";
 import { ReactComponent as CircleInfoIcon } from "../assets/icons/circle_info.svg";
-import { ReactComponent as PenIcon } from "../assets/icons/favourites/pen.svg";
 
 import "./common.less";
 
@@ -243,7 +241,7 @@ class InlineSettingsTextEdit extends React.Component<
                                 title="Cancel (Esc)"
                                 className="button is-prompt-danger is-outlined is-small"
                             >
-                                <XMarkIcon className="icon" />
+                                <span className="icon is-small"><i className="fa-sharp fa-solid fa-xmark"/></span>
                             </div>
                         </div>
                         <div className="control">
@@ -252,7 +250,7 @@ class InlineSettingsTextEdit extends React.Component<
                                 title="Confirm (Enter)"
                                 className="button is-prompt-green is-outlined is-small"
                             >
-                                <CheckIcon className="icon" />
+                                <span className="icon is-small"><i className="fa-sharp fa-solid fa-check"/></span>
                             </div>
                         </div>
                     </div>
@@ -263,7 +261,7 @@ class InlineSettingsTextEdit extends React.Component<
                 <div onClick={this.clickEdit} className={cn("settings-input inline-edit", "edit-not-active")}>
                     {this.props.text}
                     <If condition={this.props.showIcon}>
-                        <PenIcon className="icon" />
+                        <i className="fa-sharp fa-solid fa-pen"/>
                     </If>
                 </div>
             );

src/app/common/modals/modals.less

@@ -555,29 +555,6 @@ section {
         flex-direction: row;
         align-items: center;
 
-        &.inline-edit {
-            .icon {
-                display: inline;
-                width: 1em;
-                height: 1em;
-                margin-left: 1em;
-                vertical-align: middle;
-            }
-        }
-
-        &.inline-edit.edit-not-active {
-            cursor: pointer;
-
-            i.fa-pen {
-                margin-left: 5px;
-            }
-
-            &:hover {
-                text-decoration: underline;
-                text-decoration-style: dotted;
-            }
-        }
-
         &.settings-clickable {
             cursor: pointer;
         }