Separating 'Save' and 'Cancel' using CSS in edit mode to prevent misclicks

[bandtank]

While editing a record, the save and cancel buttons appear at the top left corner. The buttons are directly touching each other, which means an imprecise click can cause data loss. My users do this regularly (weekly, and sometimes daily). This has been a problem for years, at least with my users, but I'm not sure what to do about it.

Here is how the buttons look by default:


Using the developer console in Edge, I added padding between the buttons as a prototype:


The buttons are ugly, but the separation makes a huge difference for my users. I've found the number of misclicks has dropped from a few per week to one or two per month. It doesn't sound like much, but it really is significant.

How can I implement this change for the whole application? I know custom CSS can be added, but I can't figure out which elements to target. Here is what Google AI said to do, which did not work for me:

# Steps to Fix EspoCRM Button Spacing

### 1. Open or Create the Custom CSS File
Navigate to your EspoCRM server installation and locate or create this file: `client/custom/css/custom.css`

### 2. Paste the CSS Code
Copy and paste the following snippet into the file to add 15px of space after the Cancel button:

/* Add spacing between EspoCRM action buttons */
.btn[data-name="cancel"],
.button-container button[data-name="cancel"],
.detail-action-container button[data-name="cancel"] {
  margin-right: 15px !important;
}

[ArctenicGmbH]

Hi,
a clean way is to load your own stylesheet via metadata, so it survives upgrades:

1. Create custom/Espo/Custom/Resources/metadata/app/client.json with:
{ "cssList": ["__APPEND__", "client/custom/css/custom.css"] }
2. Create client/custom/css/custom.css and add a gap before the Cancel button, e.g.
.detail-button-container .btn[data-action="cancel"] { margin-left: 16px; }
(you can also give Save a stronger look, e.g. .btn[data-action="save"] { min-width: 90px; })
3. Clear cache / Rebuild in Administration and hard-refresh the browser.

Please double-check the selector in the dev tools on your version, since the button markup can differ slightly between Espo versions and layouts (detail vs. modal edit). Happy to help if it doesn't pick up.

Best regards,
Nic / Arctenic

[bandtank]

Thanks. That worked, but it's probably not the best solution now that I look at the layout with the updated CSS. I will likely try to override the view/handler to ask for confirmation if cancel is clicked when changes have been made.


Here are the files in case anyone else wants to experiment:

custom/Espo/Custom/Resources/metadata/app/client.json

{
  "cssList": [
    "__APPEND__",
    "client/custom/css/custom.css"
  ]
}

client/custom/css/custom.css

/* Move the cancel button away from the save button */
.detail-button-container .btn[data-action="cancelEdit"] {
  margin-left: 20px;
}

/* Restore fully rounded corners for the standalone Save button */
.detail-button-container .btn[data-action="save"] {
  border-radius: 4px !important;
}

/* Only round the left corners of the Cancel button because a dropdown menu is attached to its right */
.detail-button-container .btn[data-action="cancelEdit"] {
  border-top-left-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

Result: