Implement a tooltip on the instructions panel to display the full raw text upon hover

Author: robertpiosik

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

@@ -20,13 +20,28 @@
 }
 
 .instructions {
+  position: relative;
   padding: var(--padding-5px) var(--padding-20px) var(--padding-5px)
     var(--padding-7px);
   color: var(--vscode-descriptionForeground);
   border: 1px solid var(--vscode-sideBarSectionHeader-border);
   margin: 0 var(--padding-12px) var(--padding-8px) var(--padding-12px);
   border-radius: var(--border-radius-5px);
   word-wrap: break-word;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+
+  &::after {
+    position: absolute;
+    content: '';
+    width: 100%;
+    height: 4px;
+    bottom: 0;
+    left: 0;
+    background: var(--vscode-sideBar-background);
+  }
 }
 
 .list {

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

@@ -72,7 +72,9 @@ export const Changes: FC<Props> = ({
   return (
     <div className={styles.container}>
       {raw_instructions && (
-        <div className={styles.instructions}>{raw_instructions}</div>
+        <div className={styles.instructions} title={raw_instructions}>
+          {raw_instructions}
+        </div>
       )}
       {fallback_count > 0 && (
         <div className={styles.info}>