Fix oppia#22705: Solved the "Classroom page overflow text" bug (oppia#23708)

* Fixed text overflow in classroom page

* fixed lint warnings

Author: theJudyEssam

core/templates/pages/classroom-page/classroom-page.component.css

@@ -63,7 +63,7 @@
   flex-direction: column;
   gap: 8px;
   height: 115px;
-  padding: 24px 36px;
+  padding: 12px 36px;
   width: 338px;
 }
 
@@ -92,7 +92,7 @@
 .diagnostic-test-container .diagnostic-test-box a {
   color: #00645c;
   font-family: 'Roboto', Arial, sans-serif;
-  font-size: 16px;
+  font-size: 12px;
   font-style: normal;
   font-weight: 700;
   letter-spacing: -0.02em;
@@ -191,6 +191,8 @@
   font-weight: 400;
   line-height: 28px;
   margin: 0;
+  padding-right: 10px;
+  white-space: nowrap;
 }
 
 .breadcrumbs-container .classroom-information-container .classroom-text-container h1 {
@@ -200,6 +202,8 @@
   font-style: normal;
   font-weight: 400;
   line-height: 68px;
+  padding-right: 10px;
+  white-space: nowrap;
 }
 
 .breadcrumbs-container .classroom-breadcrumbs .desktop-breadcrumbs {
@@ -342,12 +346,18 @@
     font-size: 18px;
     font-style: normal;
     line-height: 22px;
+    padding-right: 0;
+    white-space: pre-wrap;
+    
   }
   .breadcrumbs-container .classroom-information-container .classroom-text-container h1 {
-    font-size: 48px;
+    font-size: 28px;
     letter-spacing: -0.02em;
     line-height: 36px;
     margin-top: 10px;
+    padding-right: 0;
+    white-space: pre-wrap;
+
   }
 
   .breadcrumbs-container .classroom-information-container .classroom-thumbnail-container .classroom-thumbnail {