IO-3624 Extract shared title-row UI and polish config forms

client/src/components/layout-form-row/inline-form-row-title.utils.js

@@ -0,0 +1,66 @@
+export const inlineFormRowTitleStyles = Object.freeze({
+  input: Object.freeze({
+    background: "var(--imex-form-title-input-bg)",
+    border: "1px solid var(--imex-form-title-input-border)",
+    borderRadius: 6,
+    paddingInline: 10,
+    paddingBlock: 4,
+    lineHeight: 1.3
+  }),
+  row: Object.freeze({
+    display: "flex",
+    gap: 4,
+    flexWrap: "wrap",
+    alignItems: "center",
+    width: "100%",
+    paddingInline: 4
+  }),
+  group: Object.freeze({
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    minWidth: 0
+  }),
+  label: Object.freeze({
+    color: "var(--ant-color-text)",
+    fontSize: "var(--ant-font-size)",
+    fontWeight: 500,
+    whiteSpace: "nowrap"
+  }),
+  handle: Object.freeze({
+    color: "var(--ant-color-text-tertiary)",
+    fontSize: 14,
+    flex: "0 0 auto",
+    marginRight: 4
+  }),
+  separator: Object.freeze({
+    width: 1,
+    height: 18,
+    background: "color-mix(in srgb, var(--imex-form-surface-border) 78%, transparent)",
+    borderRadius: 999,
+    flex: "0 0 auto",
+    marginInline: 2
+  }),
+  text: Object.freeze({
+    whiteSpace: "nowrap",
+    fontWeight: 500,
+    fontSize: "var(--ant-font-size-lg)",
+    lineHeight: 1.2
+  })
+});
+
+export const INLINE_TITLE_INPUT_STYLE = inlineFormRowTitleStyles.input;
+export const INLINE_TITLE_ROW_STYLE = inlineFormRowTitleStyles.row;
+export const INLINE_TITLE_GROUP_STYLE = inlineFormRowTitleStyles.group;
+export const INLINE_TITLE_LABEL_STYLE = inlineFormRowTitleStyles.label;
+export const INLINE_TITLE_HANDLE_STYLE = inlineFormRowTitleStyles.handle;
+export const INLINE_TITLE_SEPARATOR_STYLE = inlineFormRowTitleStyles.separator;
+export const INLINE_TITLE_TEXT_STYLE = inlineFormRowTitleStyles.text;
+
+export const INLINE_FORM_ROW_WRAP_TITLE_STYLES = Object.freeze({
+  title: Object.freeze({
+    whiteSpace: "normal",
+    overflow: "visible",
+    textOverflow: "unset"
+  })
+});