Truncate long context keyword text using ellipses to prevent prompt field overflow

Author: robertpiosik

packages/ui/src/components/editor/panel/PromptField/PromptField.module.scss

@@ -156,6 +156,7 @@
   align-items: center;
   line-height: 1.2;
   transform: translateY(1.5px);
+  max-width: 100%;
 
   &__icon {
     display: flex;
@@ -182,6 +183,9 @@
   }
 
   &__text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     border-radius: 4px;
     padding-right: 4px;
     padding-left: 4px;

packages/ui/src/components/editor/panel/PromptField/PromptField.tsx

@@ -435,23 +435,23 @@ export const PromptField: React.FC<PromptFieldProps> = (props) => {
               }}
               onMouseLeave={() => set_show_at_sign_tooltip(false)}
               className={cn(styles['footer__left__button'])}
-              title="Reference file"
+              title="Reference File"
             >
               <Icon variant="AT_SIGN" />
             </button>
             {!props.is_in_code_completions_mode && (
               <button
                 onClick={props.on_hash_sign_click}
                 className={cn(styles['footer__left__button'])}
-                title="Insert symbol"
+                title="Insert Symbol"
               >
                 <Icon variant="HASH_SIGN" />
               </button>
             )}
             <button
               onClick={props.on_curly_braces_click}
               className={cn(styles['footer__left__button'])}
-              title="Prompt templates"
+              title="Prompt Templates"
             >
               <Icon variant="CURLY_BRACES" />
             </button>