Merge pull request #220 from bible-technology/fix/description-ui-break

fixed long description is breaking project listing ui
bible-technology · Nov 9, 2023 · 395db28 · 395db28
2 parents 138de7a + 36e08a8
commit 395db28
Showing 1 changed file with 13 additions and 5 deletions.
diff --git a/renderer/src/components/Projects/ProjectRow.js b/renderer/src/components/Projects/ProjectRow.js
@@ -124,12 +124,20 @@ const ProjectRow = ({
                 leaveTo="transform scale-95 opacity-0"
               >
                 <Disclosure.Panel as="tr" key={project.name}>
-                  <td className="px-6 py-4">
-                    <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">description</div>
-                    <div aria-label="project-description-display" className="text-sm tracking-wide p-1">{project.description}</div>
+                  <td aria-label="empty column" />
+                  <td colSpan={2} className="px-6 py-4">
+                    <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">{t('label-description')}</div>
+                    <div
+                      title={project.description}
+                      aria-label="project-description-display"
+                      className="text-sm tracking-wide md:max-w-[200px] lg:max-w-[400px] xl:max-w-[550px] p-1 overflow-hidden truncate"
+                    >
+                      {project.description}
+
+                    </div>
                   </td>
-                  <td colSpan="3" className="px-5">
-                    <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">Project ID</div>
+                  <td colSpan="2" className="px-5">
+                    <div className="text-xxs uppercase font-regular text-gray-500 tracking-wider p-1">{t('label-project-id')}</div>
                     <div className="text-sm tracking-wide p-1">{project.id[0]}</div>
                   </td>
                   <td className="pl-5">