Merge pull request #259 from aws/jurredr/context-description-truncate

Jurredr/context description truncate

Author: dogusata

src/components/chat-item/prompt-input/prompt-input-quick-pick-item.ts

@@ -12,6 +12,7 @@ export interface PromptInputQuickPickItemProps {
 export class PromptInputQuickPickItem {
   render: ExtendedHTMLElement;
   private readonly props: PromptInputQuickPickItemProps;
+
   constructor (props: PromptInputQuickPickItemProps) {
     this.props = props;
     this.render = DomBuilder.getInstance().build({
@@ -52,7 +53,13 @@ export class PromptInputQuickPickItem {
           ? [ {
               type: 'div',
               classNames: [ 'mynah-chat-command-selector-command-description' ],
-              children: [ this.props.quickPickItem.description ]
+              children: [ {
+                type: 'span',
+                children: [ this.props.quickPickItem.description.slice(0, Math.ceil(this.props.quickPickItem.description.length / 2)) ]
+              }, {
+                type: 'span',
+                children: [ this.props.quickPickItem.description.slice(Math.ceil(this.props.quickPickItem.description.length / 2)) ]
+              } ]
             } ]
           : []),
         ...((this.props.quickPickItem.children != null) && this.props.quickPickItem.children.length > 0

src/styles/components/chat/_chat-command-selector.scss

@@ -123,6 +123,27 @@
                 grid-row: 2;
                 grid-column: 2;
                 color: var(--mynah-color-text-weak);
+                display: flex;
+                width: 100%;
+                overflow: hidden;
+                justify-content: flex-start;
+
+                > span:first-child {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: pre;
+                    flex: 0 1 auto;
+                    text-align: left;
+                }
+
+                > span:last-child {
+                    flex: 0 1 auto;
+                    white-space: pre;
+                    overflow: hidden;
+                    display: inline-flex;
+                    flex-flow: row nowrap;
+                    justify-content: flex-end;
+                }
             }
         }
     }