fix (edit content): dotCMS#31940 Activity Feed: error should not show (dotCMS#32162)

### Proposed Changes
* Adjust validation messages in the Activity feed.
* Styles adjustments in the binary field.

Author: hmoreras

core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-activities/dot-edit-content-sidebar-activities.component.html

@@ -69,7 +69,7 @@
                         <button
                             pButton
                             type="button"
-                            [disabled]="!form.dirty || $isSaving()"
+                            [disabled]="!form.dirty || !commentControl.value?.trim() || $isSaving()"
                             class="p-button-sm p-button-secondary activities__clear"
                             data-testid="activities-clear"
                             (click)="clearComment()">
@@ -79,6 +79,7 @@
                             pButton
                             type="submit"
                             [loading]="$isSaving()"
+                            [disabled]="$isSaving()"
                             class="p-button-sm p-button-primary activities__submit"
                             data-testid="activities-submit">
                             {{ 'edit.content.sidebar.activities.send' | dm }}

core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-activities/dot-edit-content-sidebar-activities.component.spec.ts

@@ -309,6 +309,27 @@ describe('DotEditContentSidebarActivitiesComponent', () => {
             expect(spectator.component.form.get('comment').untouched).toBe(true);
         });
 
+        it('should disable clear button when comment field is empty', () => {
+            // Initially check that it's disabled
+            let clearButton = spectator.query(byTestId('activities-clear'));
+            expect(clearButton).toBeDisabled();
+
+            // Type something to enable it
+            const commentInput = spectator.query(byTestId('activities-input'));
+            spectator.typeInElement('Test comment', commentInput);
+            spectator.detectChanges();
+
+            clearButton = spectator.query(byTestId('activities-clear'));
+            expect(clearButton).not.toBeDisabled();
+
+            // Delete the content to see if it gets disabled again
+            spectator.typeInElement('', commentInput);
+            spectator.detectChanges();
+
+            clearButton = spectator.query(byTestId('activities-clear'));
+            expect(clearButton).toBeDisabled();
+        });
+
         it('should reset form state when clearComment is called', () => {
             const commentInput = spectator.query(byTestId('activities-input'));
             spectator.typeInElement('Test comment', commentInput);
@@ -322,6 +343,65 @@ describe('DotEditContentSidebarActivitiesComponent', () => {
             expect(spectator.component.form.get('comment').untouched).toBe(true);
             expect(spectator.component.form.get('comment').value).toBe(null);
         });
+
+        // New test cases for custom validation behavior
+        it('should not show validation errors when input field is empty before submit', () => {
+            const commentInput = spectator.query(byTestId('activities-input'));
+
+            // Type something and then delete it
+            spectator.typeInElement('Test', commentInput);
+            spectator.detectChanges();
+
+            spectator.typeInElement('', commentInput);
+            spectator.detectChanges();
+
+            // Check that there are no errors shown before submission
+            const control = spectator.component.form.get('comment');
+            expect(control.valid).toBe(true);
+            expect(control.errors).toBeFalsy();
+            expect(commentInput).not.toHaveClass('ng-invalid');
+        });
+
+        it('should apply required validation only when form is submitted with empty value', () => {
+            const commentInput = spectator.query(byTestId('activities-input'));
+            const form = spectator.query(byTestId('activities-form'));
+
+            // Initially no errors
+            expect(spectator.component.form.get('comment').errors).toBeFalsy();
+
+            // Submit empty form
+            spectator.dispatchFakeEvent(form, 'submit');
+            spectator.detectChanges();
+
+            // Now should have required error
+            const control = spectator.component.form.get('comment');
+            expect(control.errors).toBeTruthy();
+            expect(control.errors['required']).toBeTruthy();
+            expect(commentInput).toHaveClass('ng-invalid');
+            expect(commentInput).toHaveClass('ng-touched');
+        });
+
+        it('should disable submit button while saving', () => {
+            // Set saving state
+            spectator.setInput('status', ComponentStatus.SAVING);
+            spectator.detectChanges();
+
+            const submitButton = spectator.query(byTestId('activities-submit'));
+
+            expect(submitButton).toBeDisabled();
+            expect(spectator.component['$isSaving']()).toBe(true);
+        });
+
+        it('should not disable submit button when not saving', () => {
+            // Set loaded state
+            spectator.setInput('status', ComponentStatus.LOADED);
+            spectator.detectChanges();
+
+            const submitButton = spectator.query(byTestId('activities-submit'));
+
+            expect(submitButton).not.toBeDisabled();
+            expect(spectator.component['$isSaving']()).toBe(false);
+        });
     });
 
     describe('Computed Properties', () => {

core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-activities/dot-edit-content-sidebar-activities.component.ts

@@ -10,13 +10,7 @@ import {
     output,
     viewChildren
 } from '@angular/core';
-import {
-    FormBuilder,
-    FormControl,
-    FormGroup,
-    ReactiveFormsModule,
-    Validators
-} from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
 import { AvatarModule } from 'primeng/avatar';
 import { ButtonModule } from 'primeng/button';
@@ -76,9 +70,36 @@ export class DotEditContentSidebarActivitiesComponent {
         comment: [
             '',
             [
-                Validators.required,
-                Validators.minLength(COMMENT_MIN_LENGTH),
-                Validators.maxLength(COMMENT_MAX_LENGTH)
+                // Custom validator: only validate when field has value
+                (control: FormControl) => {
+                    const value = control.value?.trim() || '';
+
+                    // If empty, no validation needed
+                    if (!value) {
+                        return null;
+                    }
+
+                    // Otherwise apply min/max length validators
+                    if (value.length < COMMENT_MIN_LENGTH) {
+                        return {
+                            minlength: {
+                                requiredLength: COMMENT_MIN_LENGTH,
+                                actualLength: value.length
+                            }
+                        };
+                    }
+
+                    if (value.length > COMMENT_MAX_LENGTH) {
+                        return {
+                            maxlength: {
+                                requiredLength: COMMENT_MAX_LENGTH,
+                                actualLength: value.length
+                            }
+                        };
+                    }
+
+                    return null;
+                }
             ]
         ]
     });
@@ -155,16 +176,23 @@ export class DotEditContentSidebarActivitiesComponent {
      * Validates the form and emits the comment if valid
      */
     onSubmit(): void {
-        if (this.form.invalid) {
+        const comment = this.commentControl.value?.trim();
+
+        // Check for empty comment and mark as touched to trigger validation
+        if (!comment) {
+            this.commentControl.setErrors({ required: true });
             this.commentControl.markAsDirty();
             this.commentControl.markAsTouched();
-            this.commentControl.updateValueAndValidity({ onlySelf: true });
 
             return;
         }
 
-        const comment = this.commentControl.value?.trim();
-        if (!comment) {
+        // Check for other validation errors
+        if (this.form.invalid) {
+            this.commentControl.markAsDirty();
+            this.commentControl.markAsTouched();
+            this.commentControl.updateValueAndValidity({ onlySelf: true });
+
             return;
         }
 

core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.scss

@@ -98,10 +98,10 @@ dot-contentlet-thumbnail {
 }
 
 .preview-resource-links__actions {
-    position: relative;
+    position: absolute;
     top: 0;
     right: 0;
-    display: flex;
+    display: none;
     flex-direction: column;
     gap: $spacing-0;
     padding-top: $spacing-1;
@@ -125,6 +125,7 @@ dot-contentlet-thumbnail {
     display: flex;
     flex-direction: column;
     gap: $spacing-1;
+    z-index: 100;
 }
 
 code {
@@ -182,7 +183,7 @@ code {
     gap: $spacing-0;
 }
 
-@container preview (min-width: 376px) {
+@container preview (min-width: 500px) {
     .preview-metadata__container,
     .preview-metadata__actions {
         display: flex;