[Issue #8499] Show opportunity count above single-agency label on Opportunities page

Author: desaiamit

frontend/src/app/[locale]/(base)/opportunities/page.test.tsx

@@ -205,7 +205,7 @@ describe("Opportunities", () => {
       expect(await screen.findByText("Test Opportunity")).toBeVisible();
     });
 
-    it("renders agency name label instead of opportunity count", async () => {
+    it("renders both opportunity count and agency label", async () => {
       mockSearchForOpportunities.mockResolvedValue({
         data: [basicOpportunity],
       });
@@ -215,6 +215,7 @@ describe("Opportunities", () => {
       });
       render(component);
 
+      expect(await screen.findByText("numOpportunities")).toBeVisible();
       expect(await screen.findByText("showingOpportunitiesFor")).toBeVisible();
     });
 

frontend/src/app/[locale]/(base)/opportunities/page.tsx

@@ -132,11 +132,20 @@ const OpportunitiesTable = ({
 
   return (
     <div>
-      <span className="font-sans-lg text-bold">
-        {isSingleAgency
-          ? t("showingOpportunitiesFor", { agencyName })
-          : t("numOpportunities", { num: userOpportunities.length })}
-      </span>
+      {isSingleAgency ? (
+        <div className="margin-bottom-2">
+          <div className="font-sans-lg text-bold margin-bottom-2">
+            {t("numOpportunities", { num: userOpportunities.length })}
+          </div>
+          <div className="font-sans-lg text-bold">
+            {t("showingOpportunitiesFor", { agencyName })}
+          </div>
+        </div>
+      ) : (
+        <span className="font-sans-lg text-bold">
+          {t("numOpportunities", { num: userOpportunities.length })}
+        </span>
+      )}
 
       <TableWithResponsiveHeader
         headerContent={headerTitles}