[AAE-19621] Fix icon cut off in attach file button (#9249)

Alfresco · Jan 17, 2024 · d95e46e · d95e46e
1 parent 9c57070
commit d95e46e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git a/...cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html b/...cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
@@ -6,10 +6,16 @@
         </label>
         <div class="adf-attach-widget-container" (focusout)="markAsTouched()">
             <div class="adf-attach-widget__menu-upload" *ngIf="isUploadButtonVisible()">
-                <button (click)="openSelectDialog()" mat-raised-button color="primary" [id]="field.id"
-                    [matTooltip]="field.tooltip" matTooltipPosition="above" matTooltipShowDelay="1000">
-                    {{ 'FORM.FIELD.ATTACH' | translate }}
-                    <mat-icon>{{getWidgetIcon()}}</mat-icon>
+                <button
+                    (click)="openSelectDialog()"
+                    mat-raised-button
+                    color="primary"
+                    [id]="field.id"
+                    [matTooltip]="field.tooltip"
+                    matTooltipPosition="above"
+                    matTooltipShowDelay="1000">
+                        {{ 'FORM.FIELD.ATTACH' | translate }}
+                        <mat-icon class="adf-attach-widget__icon">{{getWidgetIcon()}}</mat-icon>
                 </button>
             </div>
         </div>

diff --git a/...cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss b/...cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
@@ -27,16 +27,6 @@
 
         button span {
             font-size: var(--theme-caption-font-size);
-
-            mat-icon {
-                line-height: 12px;
-                height: 12px;
-                width: 12px;
-            }
-
-            .material-icons {
-                font-size: var(--theme-adf-picture-1-font-size);
-            }
         }
     }
 
@@ -86,9 +76,10 @@
     }
 
     &-attach-widget__icon {
-        padding: 6px;
-        float: left;
-        cursor: pointer;
+        font-size: var(--theme-adf-picture-1-font-size);
+        height: var(--theme-adf-picture-1-font-size);
+        width: var(--theme-adf-picture-1-font-size);
+        line-height: calc(var(--theme-adf-picture-1-font-size) - 2px);
     }
 
     &-attach-widget__reset {