From f5d7444028d7fa3e15934844e571093f39e02e0f Mon Sep 17 00:00:00 2001
From: Newton Chung <newtonchung99@gmail.com>
Date: Tue, 4 Aug 2026 14:34:36 -0700
Subject: [PATCH 1/2] Added Certification List tooltip to Classes page Teachers
 can now hover over it to easily see which certifications are part of their
 class on the Classes page. Previously, they needed to press the Edit Class
 button and scroll through the certifications list.

---
 .../classInviteTable.test.jsx.snap            | 40 ++++++++++++++++++-
 components/ClassInviteTable.js                | 38 +++++++++++++++++-
 2 files changed, 74 insertions(+), 4 deletions(-)

diff --git a/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap b/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap
index 3763d8aa7..fc8506352 100644
--- a/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap
+++ b/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap
@@ -12,11 +12,46 @@ exports[`ClassInviteTable displays invites in a table 1`] = `
       className="group flex items-center"
     >
       <h2
-        className="text-slate-900 group-hover:text-white text-l font-semibold"
+        className="text-slate-900 group-hover:text-white text-l font-semibold break-words min-w-0"
       >
         Classroom: 
         how to build a website
       </h2>
+      <div
+        className="relative inline-block ml-2 shrink-0 group/certs"
+      >
+        <svg
+          className="h-5 w-5 text-slate-900 group-hover:text-white cursor-help"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="12"
+            cy="12"
+            r="10"
+          />
+          <path
+            d="M12 16v-4m0-4h.01"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        <div
+          className="hidden group-hover/certs:block absolute left-full top-0 w-64 max-h-64 overflow-y-auto z-50 rounded-md bg-white text-gray-900 text-sm shadow-lg p-3 ring-1 ring-black ring-opacity-5"
+        >
+          <p
+            className="font-semibold mb-1"
+          >
+            Certifications
+          </p>
+          <p>
+            No certifications assigned
+          </p>
+        </div>
+      </div>
       <div
         className="wrapper group ml-auto flex items-center"
       >
@@ -53,7 +88,8 @@ exports[`ClassInviteTable displays invites in a table 1`] = `
     </div>
     <div>
       <h1
-        className="text-slate-900 group-hover:text-white text-l"
+        className="text-slate-900 group-hover:text-white text-l break-words line-clamp-4"
+        title="learn how to build a website in a jiffy "
       >
         learn how to build a website in a jiffy 
       </h1>
diff --git a/components/ClassInviteTable.js b/components/ClassInviteTable.js
index 8809f47b0..d85a9d5db 100644
--- a/components/ClassInviteTable.js
+++ b/components/ClassInviteTable.js
@@ -134,9 +134,40 @@ export default function ClassInviteTable({
           className='group block max-w-xl mx-auto p-6 bg-fcc-gray-15 border-2 border-fcc-gray-90 ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-fcc-gray-90 hover:ring-sky-500'
         >
           <div ref={ref} className='group flex items-center'>
-            <h2 className='text-slate-900 group-hover:text-white text-l font-semibold'>
+            <h2 className='text-slate-900 group-hover:text-white text-l font-semibold break-words min-w-0'>
               Classroom: {currentClass.classroomName}
             </h2>
+            <div className='relative inline-block ml-2 shrink-0 group/certs'>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                className='h-5 w-5 text-slate-900 group-hover:text-white cursor-help'
+                fill='none'
+                viewBox='0 0 24 24'
+                stroke='currentColor'
+                strokeWidth='2'
+              >
+                <circle cx='12' cy='12' r='10' />
+                <path
+                  strokeLinecap='round'
+                  strokeLinejoin='round'
+                  d='M12 16v-4m0-4h.01'
+                />
+              </svg>
+              <div className='hidden group-hover/certs:block absolute left-full top-0 w-64 max-h-64 overflow-y-auto z-50 rounded-md bg-white text-gray-900 text-sm shadow-lg p-3 ring-1 ring-black ring-opacity-5'>
+                <p className='font-semibold mb-1'>Certifications</p>
+                {getSelectedCerts().length > 0 ? (
+                  <ul className='list-disc list-inside space-y-1'>
+                    {getSelectedCerts().map(cert => (
+                      <li key={cert.value} className='break-words'>
+                        {cert.displayName}
+                      </li>
+                    ))}
+                  </ul>
+                ) : (
+                  <p>No certifications assigned</p>
+                )}
+              </div>
+            </div>
             {/* <-------Menu Item Selection -----> */}
             <div className='wrapper group ml-auto flex items-center'>
               <div className='relative inline-block text-right'>
@@ -356,7 +387,10 @@ export default function ClassInviteTable({
           )}
 
           <div>
-            <h1 className='text-slate-900 group-hover:text-white text-l'>
+            <h1
+              className='text-slate-900 group-hover:text-white text-l break-words line-clamp-4'
+              title={currentClass.description}
+            >
               {currentClass.description}
             </h1>
           </div>

From 3fb1372a5d8c77eccf2dc90f83ce594da619b9b8 Mon Sep 17 00:00:00 2001
From: Newton Chung <newtonchung99@gmail.com>
Date: Tue, 4 Aug 2026 15:11:53 -0700
Subject: [PATCH 2/2] Add Client-side CSS Text-Wrapping and Character Count
 Caps Users can only write class titles of up to 100 characters and
 descriptions of up to 500 characters. The Class card truncates after 2 lines
 of the class title and 4 lines of the description.

---
 .../__snapshots__/classInviteTable.test.jsx.snap   |  2 +-
 .../components/__snapshots__/modal.test.jsx.snap   | 14 ++++++++++++++
 components/ClassInviteTable.js                     | 10 +++++++++-
 components/modal.js                                |  8 ++++++++
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap b/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap
index fc8506352..bbe11f051 100644
--- a/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap
+++ b/__tests__/components/__snapshots__/classInviteTable.test.jsx.snap
@@ -12,7 +12,7 @@ exports[`ClassInviteTable displays invites in a table 1`] = `
       className="group flex items-center"
     >
       <h2
-        className="text-slate-900 group-hover:text-white text-l font-semibold break-words min-w-0"
+        className="text-slate-900 group-hover:text-white text-l font-semibold break-words line-clamp-2 min-w-0"
       >
         Classroom: 
         how to build a website
diff --git a/__tests__/components/__snapshots__/modal.test.jsx.snap b/__tests__/components/__snapshots__/modal.test.jsx.snap
index 43a6cdab4..ced4b5e4c 100644
--- a/__tests__/components/__snapshots__/modal.test.jsx.snap
+++ b/__tests__/components/__snapshots__/modal.test.jsx.snap
@@ -78,11 +78,18 @@ exports[`Modal Component renders whole form after header clicked 1`] = `
               <input
                 className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                 id="class-name"
+                maxLength={100}
                 name="classname"
                 onChange={[Function]}
                 placeholder="Class Name"
                 required={true}
               />
+              <p
+                className="text-xs text-gray-300 text-right mt-1"
+              >
+                0
+                /100
+              </p>
             </div>
           </div>
           <div
@@ -103,11 +110,18 @@ exports[`Modal Component renders whole form after header clicked 1`] = `
               <textarea
                 className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
                 id="description-text"
+                maxLength={500}
                 name="description"
                 onChange={[Function]}
                 placeholder="Description"
                 required={true}
               />
+              <p
+                className="text-xs text-gray-300 text-right mt-1"
+              >
+                0
+                /500
+              </p>
             </div>
           </div>
           <div
diff --git a/components/ClassInviteTable.js b/components/ClassInviteTable.js
index d85a9d5db..98671b0a0 100644
--- a/components/ClassInviteTable.js
+++ b/components/ClassInviteTable.js
@@ -134,7 +134,7 @@ export default function ClassInviteTable({
           className='group block max-w-xl mx-auto p-6 bg-fcc-gray-15 border-2 border-fcc-gray-90 ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-fcc-gray-90 hover:ring-sky-500'
         >
           <div ref={ref} className='group flex items-center'>
-            <h2 className='text-slate-900 group-hover:text-white text-l font-semibold break-words min-w-0'>
+            <h2 className='text-slate-900 group-hover:text-white text-l font-semibold break-words line-clamp-2 min-w-0'>
               Classroom: {currentClass.classroomName}
             </h2>
             <div className='relative inline-block ml-2 shrink-0 group/certs'>
@@ -322,9 +322,13 @@ export default function ClassInviteTable({
                             }
                             id='class-name'
                             name='classname'
+                            maxLength={100}
                             className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
                             placeholder={currentClass.classroomName}
                           ></input>
+                          <p className='text-xs text-gray-300 text-right mt-1'>
+                            {formData.className?.length ?? 0}/100
+                          </p>
                         </div>
                       </div>
                       <div className='rounded-md shadow-sm -space-y-px'>
@@ -342,9 +346,13 @@ export default function ClassInviteTable({
                             }
                             id='description-text'
                             name='description'
+                            maxLength={500}
                             className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
                             placeholder={currentClass.description}
                           ></textarea>
+                          <p className='text-xs text-gray-300 text-right mt-1'>
+                            {formData.description?.length ?? 0}/500
+                          </p>
                         </div>
                       </div>
                       <div className='rounded-md shadow-sm -space-y-px w-60 lg:w-72 2xl:w-96'>
diff --git a/components/modal.js b/components/modal.js
index 97238a3af..97d7266a4 100644
--- a/components/modal.js
+++ b/components/modal.js
@@ -105,9 +105,13 @@ export default function Modal({
                           id='class-name'
                           name='classname'
                           required
+                          maxLength={100}
                           className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
                           placeholder='Class Name'
                         ></input>
+                        <p className='text-xs text-gray-300 text-right mt-1'>
+                          {formData.classroomName?.length ?? 0}/100
+                        </p>
                       </div>
                     </div>
                     <div className='rounded-md shadow-sm -space-y-px'>
@@ -126,9 +130,13 @@ export default function Modal({
                           id='description-text'
                           name='description'
                           required
+                          maxLength={500}
                           className='appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm'
                           placeholder='Description'
                         ></textarea>
+                        <p className='text-xs text-gray-300 text-right mt-1'>
+                          {formData.description?.length ?? 0}/500
+                        </p>
                       </div>
                     </div>
                     <div className='rounded-md shadow-sm -space-y-px w-60 lg:w-72 2xl:w-96'>