Add correct class for cancel buttons in spot modals and take care that the cancel button is hidden at the same point as the mobile version of it is displayed. Otherwise we would have a state where no cancel button was visible. Further the padding was removed from the action bar itself to avoid it being shown when there is no button inside shown any more (see #47994)

app/views/onboarding/_configuration_modal.html.erb

@@ -47,7 +47,7 @@ See COPYRIGHT and LICENSE files for more details.
     <div class="onboarding--footer spot-action-bar">
       <div class="spot-action-bar--right">
         <button
-          class="button button_no-margin spot-action-bar--action"
+          class="button button_no-margin spot-action-bar--action spot-modal--cancel-button"
           dynamic-content-modal-close-button
           title=<%= t(:button_close) %>
         ><%= t(:button_close) %></button>
@@ -56,4 +56,3 @@ See COPYRIGHT and LICENSE files for more details.
     </div>
   <% end %>
 </div>
-

app/views/onboarding/_onboarding_video_modal.html.erb

@@ -46,7 +46,7 @@ See COPYRIGHT and LICENSE files for more details.
   <div class="onboarding--footer spot-action-bar">
     <div class="spot-action-bar--right">
       <button
-        class="button button_no-margin spot-action-bar--action"
+        class="button button_no-margin spot-action-bar--action spot-modal--cancel-button"
         dynamic-content-modal-close-button
         title=<%= t(:button_close) %>
       ><%= t(:button_close) %></button>

frontend/src/app/features/enterprise/enterprise-modal/enterprise-trial.modal.html

@@ -38,7 +38,7 @@
       <div *ngIf="!context.status || context.cancelled; else mailSubmitted"
            class="spot-action-bar--right">
         <button
-          class="button button_no-margin spot-action-bar--action"
+          class="button button_no-margin spot-action-bar--action spot-modal--cancel-button"
           data-qa-selector="confirmation-modal--cancel"
           (click)="closeModal($event)"
           [textContent]="text.button_cancel"

frontend/src/app/spot/styles/sass/components/action-bar.sass

@@ -1,7 +1,6 @@
 .spot-action-bar
   display: grid
   grid-template-columns: 1fr
-  padding: 0 $spot-spacing-1 $spot-spacing-0_75 0
   background-color: $spot-color-basic-gray-6
 
   a.button
@@ -20,7 +19,7 @@
     margin-top: -$spot-spacing-0_25
 
     > .spot-action-bar--action
-      margin: $spot-spacing-1 0 0 $spot-spacing-1
+      margin: $spot-spacing-1 $spot-spacing-1 $spot-spacing-0-75 $spot-spacing-1
 
   @media #{$spot-mq-action-bar-change}
     grid-template-columns: 1fr auto

frontend/src/app/spot/styles/sass/components/modal-overlay.sass

@@ -31,7 +31,7 @@
     display: block
     margin: 1rem
 
-    @media (min-width: 680px)
+    @media #{$spot-mq-drop-modal-in-context}
       display: none
 
     @media (max-height: 480px)

lookbook/previews/modal_preview/danger_zone.html.erb

@@ -12,7 +12,7 @@
     </div>
     <div class="spot-action-bar">
       <div class="spot-action-bar--right">
-        <button name="button" type="button" class="button button_no-margin spot-action-bar--action">Cancel</button>
+        <button name="button" type="button" class="button button_no-margin spot-action-bar--action spot-modal--cancel-button">Cancel</button>
         <button name="button" type="submit" class="button button_no-margin -danger spot-action-bar--action">Continue</button>
       </div>
     </div>