Migrate branch rule details cards to crud components

What does this MR do and why?

• Migrates GlCard to CrudComponent in rule details page and drawers
• Add page header component
• Tweak spacing

Screenshots or screen recordings

Before	After

How to set up and validate locally

• Enable :edit_branch_rules
• Project > Settings > Repository > Branch rules > View details (on a branch rule)

Links

• ✂️ UX Paper Cuts 17.3 → Dark mode - Design Support (#452231 - closed)
• Migration: GlCard (gl-new-card variant) to Crud (#476988)

app/assets/javascripts/projects/settings/branch_rules/components/view/index.vue

@@ -354,7 +354,11 @@ export default {
     <gl-loading-icon v-if="$apollo.loading" size="lg" />
     <div v-else-if="!branchRule && !isPredefinedRule">{{ $options.i18n.noData }}</div>
     <div v-else>
-      <crud-component :title="$options.i18n.ruleTarget" class="gl-mt-3">
+      <crud-component
+        :title="$options.i18n.ruleTarget"
+        class="gl-mt-3"
+        data-testid="rule-target-card"
+      >
         <template #actions>
           <gl-button
             v-if="glFeatures.editBranchRules && !isPredefinedRule"