Refactor security rule rows part I

* Move rows into seperate table

ee/app/assets/javascripts/approvals/components/project_settings/project_rules.vue

@@ -165,6 +165,7 @@ export default {
 </script>
 
 <template>
+  <div>
     <rules :rules="rules">
       <template #thead="{ name, members, approvalsRequired, branches }">
         <tr class="d-none d-sm-table-row">
@@ -204,9 +205,11 @@ export default {
             </td>
           </tr>
         </template>
-
+      </template>
+    </rules>
     <!-- TODO: Remove feature flag in https://gitlab.com/gitlab-org/gitlab/-/issues/235114 -->
-      <template v-if="glFeatures.approvalSuggestions">
+    <table class="table m-0" v-if="glFeatures.approvalSuggestions">
+      <tbody>
         <unconfigured-security-rule
           v-for="securityRule in securityRules"
           :key="securityRule.name"
@@ -216,7 +219,7 @@ export default {
           :match-rule="securityRule"
           @enable="openCreateModal({ defaultRuleName: securityRule.name })"
         />
-      </template>
-    </template>
-  </rules>
+      </tbody>
+    </table>
+  </div>
 </template>

ee/app/assets/javascripts/approvals/components/security_configuration/unconfigured_security_rule.vue

@@ -94,7 +94,7 @@ export default {
         </td>
       </template>
 
-      <td v-else class="js-name" colspan="3">
+      <td v-else class="js-name" colspan="5">
         <div>{{ matchRule.name }}</div>
         <div class="gl-text-gray-500">
           <gl-sprintf :message="matchRule.description">