feat(frontend): truncate long operator descriptions with ellipsis and tooltip

frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.html

@@ -84,7 +84,10 @@
 
 <div
   *ngIf="operatorDescription && !editingTitle"
-  class="operator-description">
+  class="operator-description"
+  nz-tooltip
+  [nzTooltipTitle]="operatorDescription"
+  nzTooltipPlacement="bottom">
   <p>{{ operatorDescription }}</p>
 </div>
 

frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.scss

@@ -71,5 +71,10 @@
 
   p {
     margin-bottom: 0;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
   }
 }

frontend/src/app/workspace/component/property-editor/operator-property-edit-frame/operator-property-edit-frame.component.spec.ts

@@ -291,4 +291,50 @@ describe("OperatorPropertyEditFrameComponent", () => {
     fixture.detectChanges();
     expect(component.operatorVersion).toEqual(mockScanPredicate.operatorVersion);
   });
+
+  describe("operator description truncation", () => {
+    beforeEach(async () => {
+      TestBed.resetTestingModule();
+      await TestBed.configureTestingModule({
+        providers: [
+          WorkflowActionService,
+          { provide: OperatorMetadataService, useClass: StubOperatorMetadataService },
+          { provide: ComputingUnitStatusService, useClass: MockComputingUnitStatusService },
+          DatePipe,
+          ...commonTestProviders,
+        ],
+        imports: [
+          OperatorPropertyEditFrameComponent,
+          BrowserAnimationsModule,
+          FormsModule,
+          FormlyModule.forRoot(TEXERA_FORMLY_CONFIG),
+          FormlyNgZorroAntdModule,
+          ReactiveFormsModule,
+          HttpClientTestingModule,
+        ],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(OperatorPropertyEditFrameComponent);
+      component = fixture.componentInstance;
+    });
+
+    it("should render .operator-description with tooltip when description is set", () => {
+      component.operatorDescription = "A long description that should be truncated after three lines.";
+      component.editingTitle = false;
+      fixture.detectChanges();
+
+      const descEl = fixture.debugElement.query(By.css(".operator-description"));
+      expect(descEl).toBeTruthy();
+      expect(descEl.attributes["nz-tooltip"]).toBeDefined();
+    });
+
+    it("should not render .operator-description when description is not set", () => {
+      component.operatorDescription = undefined;
+      component.editingTitle = false;
+      fixture.detectChanges();
+
+      const descEl = fixture.debugElement.query(By.css(".operator-description"));
+      expect(descEl).toBeNull();
+    });
+  });
 });