diff --git a/app/web/src/components/ApprovalFlowModal.vue b/app/web/src/components/ApprovalFlowModal.vue
index 47d203e30b..143f5a08f2 100644
--- a/app/web/src/components/ApprovalFlowModal.vue
+++ b/app/web/src/components/ApprovalFlowModal.vue
@@ -83,6 +83,15 @@ function applyButtonHandler() {
     }
   } else {
     changeSetsStore.REQUEST_CHANGE_SET_APPROVAL();
+
+    // TODO(nick): we should remove this in favor of only the WsEvent fetching. It appears that
+    // requesting the approval itself is insufficient for getting the latest approval status at
+    // the time of writing and the reason appears to be that the change set is "open" by the
+    // time the inset modal opens. Fortunately, this will work since we are the requester.
+    if (changeSet.value) {
+      changeSetsStore.FETCH_APPROVAL_STATUS(changeSet.value.id);
+    }
+
     closeModalHandler();
   }
 }
diff --git a/app/web/src/components/InsetApprovalModal.vue b/app/web/src/components/InsetApprovalModal.vue
index 2e92d26b4d..42a946e0b9 100644
--- a/app/web/src/components/InsetApprovalModal.vue
+++ b/app/web/src/components/InsetApprovalModal.vue
@@ -3,12 +3,12 @@
     v-if="mode !== 'error'"
     :class="
       clsx(
-        'w-1/2 flex flex-col gap-sm p-sm shadow-2xl',
+        'lg:w-1/2 flex flex-col gap-sm p-sm shadow-2xl max-h-full overflow-hidden',
         themeClasses('bg-shade-0 border', 'bg-neutral-900'),
       )
     "
   >
-    <div class="flex flex-row gap-md mb-sm items-center">
+    <div class="flex flex-row flex-none gap-md mb-sm items-center">
       <div class="flex flex-col gap-2xs">
         <TruncateWithTooltip class="font-bold italic pb-2xs">
           {{ changeSetName }}
@@ -75,7 +75,7 @@
     <div
       :class="
         clsx(
-          'flex flex-row',
+          'flex flex-row flex-1 overflow-hidden',
           featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL
             ? 'place-content-evenly'
             : 'justify-center',
@@ -83,7 +83,7 @@
       "
     >
       <template v-if="featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL">
-        <div class="flex flex-col text-sm gap-sm">
+        <div class="flex flex-col text-sm gap-sm overflow-y-auto">
           <div
             v-for="group in requirementGroups"
             :key="group.key"
@@ -99,12 +99,12 @@
                 :key="vote.user.id"
                 class="flex flex-row gap-xs place-content-between"
               >
-                <span>{{ vote.user.name }}</span>
-                <span class="italic">
-                  <template v-if="!vote.status">waiting...</template>
-                  <template v-else>{{ vote.status }}...</template>
-                </span>
+                <span>{{ vote.user.name }} ({{ vote.user.email }})</span>
                 <span class="flex flex-row">
+                  <span class="italic pr-xs">
+                    <template v-if="!vote.status">Waiting...</template>
+                    <template v-else>{{ vote.status }}...</template>
+                  </span>
                   <Icon
                     size="md"
                     name="thumbs-up"
@@ -127,7 +127,7 @@
           </div>
         </div>
       </template>
-      <div class="flex flex-col gap-xs">
+      <div class="flex flex-col gap-xs overflow-hidden">
         <div
           v-if="!featureFlagsStore.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL"
           class="text-sm"
@@ -141,7 +141,7 @@
         </div>
       </div>
     </div>
-    <div class="flex flex-row gap-sm justify-center mt-sm">
+    <div class="flex flex-row flex-none gap-sm justify-center mt-sm">
       <VButton
         label="Withdraw Request"
         tone="warning"
@@ -158,7 +158,7 @@
         "
       >
         <VButton
-          :disabled="mode !== 'requested' || iRejected"
+          :disabled="iRejected"
           label="Reject Request"
           tone="destructive"
           icon="thumbs-down"
@@ -211,6 +211,7 @@ import { useAuthStore, WorkspaceUser } from "@/store/auth.store";
 import { ChangeSetStatus, ChangeSet } from "@/api/sdf/dal/change_set";
 import { useFeatureFlagsStore } from "@/store/feature_flags.store";
 import { useViewsStore } from "@/store/views.store";
+import { useAssetStore } from "@/store/asset.store";
 import ActionsList from "./Actions/ActionsList.vue";
 
 export type InsetApprovalModalMode =
@@ -219,6 +220,7 @@ export type InsetApprovalModalMode =
   | "rejected"
   | "error";
 
+const assetStore = useAssetStore();
 const authStore = useAuthStore();
 const changeSetsStore = useChangeSetsStore();
 const featureFlagsStore = useFeatureFlagsStore();
@@ -232,10 +234,8 @@ const props = defineProps<{
   changeSet: ChangeSet;
 }>();
 
-type ReqType = "SchemaVariant" | "View";
 interface Requirement {
   key: string;
-  type: ReqType;
   label: string;
   votes: Vote[];
   satisfied: boolean;
@@ -249,8 +249,6 @@ interface Vote {
 const requirementGroups = computed(() => {
   const groups: Requirement[] = [];
   props.approvalData?.requirements.forEach((r) => {
-    if (!["CategorySchema", "View"].includes(r.entityKind)) return;
-
     const userIds = Object.values(r.approverGroups)
       .flat()
       .concat(r.approverIndividuals);
@@ -268,14 +266,30 @@ const requirementGroups = computed(() => {
       if (submitted) vote.status = submitted.status;
       votes.push(vote);
     });
-    const label =
-      r.entityKind === "CategorySchema"
-        ? "Asset Changes"
-        : viewStore.viewsById[r.entityId]?.name ?? "a View";
-    const key = r.entityKind === "CategorySchema" ? r.entityKind : r.entityId;
+
+    let label = r.entityKind;
+    if (r.entityKind === "ApprovalRequirementDefinition") {
+      label = "Approval Requirement change";
+    } else if (r.entityKind === "Schema") {
+      const variantForSchema = assetStore.schemaVariants.find(
+        (thing) => thing.schemaId === r.entityId,
+      );
+      label = variantForSchema?.schemaName
+        ? `Asset named ${variantForSchema?.schemaName}`
+        : "an Asset";
+    } else if (r.entityKind === "SchemaVariant") {
+      let name = assetStore.variantFromListById[r.entityId]?.displayName;
+      if (!name) {
+        name = assetStore.variantFromListById[r.entityId]?.schemaName;
+      }
+      label = name ? `Asset named ${name}` : "Asset (name not found)";
+    } else if (r.entityKind === "View") {
+      const name = viewStore.viewsById[r.entityId]?.name;
+      label = name ? `View named ${name}` : "View (name not found)";
+    }
+
     groups.push({
-      key,
-      type: r.entityId as ReqType,
+      key: r.entityId,
       label,
       votes,
       satisfied: r.isSatisfied,
diff --git a/app/web/src/store/feature_flags.store.ts b/app/web/src/store/feature_flags.store.ts
index d1cd327da0..31863f8d6e 100644
--- a/app/web/src/store/feature_flags.store.ts
+++ b/app/web/src/store/feature_flags.store.ts
@@ -88,6 +88,7 @@ export function useFeatureFlagsStore() {
         // You can override feature flags while working on a feature by setting them to true/false here
         // for example:
         // this.FEATURE_FLAG_NAME = false;
+        this.WORKSPACE_FINE_GRAINED_ACCESS_CONTROL = true;
       },
     }),
   )();