test: fixed batch overlay test

cypress/e2e/batch_creation.cy.js

@@ -138,24 +138,21 @@ describe("Batch Creation", () => {
 			.contains("Test Batch Short Description to test the UI")
 			.should("be.visible");
 		cy.get("a").contains("Evaluator").should("be.visible");
-		cy.get("span")
+		cy.get("span:visible")
 			.contains("01 Oct 2030 - 31 Oct 2030")
 			.should("be.visible");
-		cy.get("span").contains("10:00 AM - 11:00 AM").should("be.visible");
-		cy.get("span").contains("IST").should("be.visible");
-		cy.get("div")
-			.contains("10")
-			.should("be.visible")
-			.get("span")
-			.contains("Seats Left")
+		cy.get("span:visible")
+			.contains("10:00 AM - 11:00 AM")
 			.should("be.visible");
+		cy.get("span:visible").contains("IST").should("be.visible");
+		cy.contains("div:visible", "10 Seats Left").should("be.visible");
 
 		cy.get("p")
 			.contains(
 				"Test Batch Description. I need a very big description to test the UI. This is a very big description. It contains more than once sentence. Its meant to be this long as this is a UI test. Its unbearably long and I'm not sure why I'm typing this much. I'm just going to keep typing until I feel like its long enough. I think its long enough now. I'm going to stop typing now."
 			)
 			.should("be.visible");
-		cy.get("button").contains("Manage Batch").click();
+		cy.get("button:visible").contains("Manage Batch").click();
 
 		/* Add student to batch */
 		cy.get("button").contains("Add").click();
@@ -170,11 +167,6 @@ describe("Batch Creation", () => {
 
 		// Verify Seat Count
 		cy.get("span").contains("Details").click();
-		cy.get("div")
-			.contains("9")
-			.should("be.visible")
-			.get("span")
-			.contains("Seats Left")
-			.should("be.visible");
+		cy.contains("div:visible", "9 Seats Left").should("be.visible");
 	});
 });

frontend/src/pages/BatchDetail.vue

@@ -44,7 +44,7 @@
 						{{ __('Courses') }}
 					</div>
 				</div>
-				<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-5">
+				<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-5">
 					<div
 						v-if="batch.data.courses"
 						v-for="course in courses.data"