DEV: Untangle award badge admin CSS (#29614)

I was skimming through existing pages to get a feel for the admin UI guidelines. I noticed that this part was missing its margin. On some further investigation, it seems that a single CSS selector, .award-badge was being used both for the section and for the button in the header, so I decided to 1) separate the two and 2) add in the missing margin.

app/assets/javascripts/admin/addon/templates/admin-badges/award.hbs

@@ -1,4 +1,4 @@
-<section class="award-badge">
+<section class="current-badge content-body">
   <h2>{{i18n "admin.badges.mass_award.title"}}</h2>
   <p>{{i18n "admin.badges.mass_award.description"}}</p>
 

app/assets/stylesheets/common/admin/badges.scss

@@ -87,6 +87,30 @@
     .readonly-field {
       color: var(--primary-high);
     }
+
+    .badge-preview {
+      min-height: 110px;
+      max-width: 300px;
+      display: flex;
+      align-items: center;
+      background-color: var(--primary-very-low);
+      border: 1px solid var(--primary-low);
+      padding: 0 10px 0 10px;
+
+      img,
+      svg {
+        width: 60px;
+        height: 60px;
+      }
+
+      .badge-display-name {
+        margin-left: 5px;
+      }
+    }
+
+    .badge-required {
+      font-weight: bold;
+    }
   }
 
   .current-badge-actions {
@@ -118,29 +142,6 @@
       color: var(--danger);
     }
   }
-
-  .badge-preview {
-    min-height: 110px;
-    max-width: 300px;
-    display: flex;
-    align-items: center;
-    background-color: var(--primary-very-low);
-    border: 1px solid var(--primary-low);
-    padding: 0 10px 0 10px;
-
-    img,
-    svg {
-      width: 60px;
-      height: 60px;
-    }
-
-    .badge-display-name {
-      margin-left: 5px;
-    }
-  }
-  .badge-required {
-    font-weight: bold;
-  }
 }
 
 // badge-grouping modal