From 3ab6c2c8c89d9f6d33dcc0b0837c652233a6406d Mon Sep 17 00:00:00 2001
From: JORDAN MANLEY <jordanmanley@JORDANs-MacBook-Pro.local>
Date: Sat, 1 Apr 2023 19:16:23 -0400
Subject: [PATCH] set title width to fill available area and truncate any
 additional text

---
 src/components/Preview.jsx | 2 +-
 src/css/application.css    | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Preview.jsx b/src/components/Preview.jsx
index ce0d3ec025..85c7b41572 100644
--- a/src/components/Preview.jsx
+++ b/src/components/Preview.jsx
@@ -54,7 +54,7 @@ export default function Preview({
         <span className="preview__button preview__button_pop-out">
           <FontAwesomeIcon icon={faExternalLinkAlt} onClick={onPopOutProject} />
         </span>
-        {title}
+        <span className="preview__title-text">{title}</span>
         <span className="preview__button preview__button_toggle-visibility">
           <FontAwesomeIcon
             icon={faChevronDown}
diff --git a/src/css/application.css b/src/css/application.css
index c5b9dd8b32..2793c81a3b 100644
--- a/src/css/application.css
+++ b/src/css/application.css
@@ -867,8 +867,12 @@ body {
   z-index: 2;
 }
 
-.preview__title {
-  text-align: center;
+.preview__title-text {
+  display: inline-block;
+  max-width: calc(100% - 75px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .preview__button {