Fix: Copy Pull Button Overlap with Tag Immutable Label (#21720)

fix: copy button overlap with tag immutable

- fix copy button overlap with tag immutable label on artifact-tag
component
- update css to fix this issue

Signed-off-by: bupd <bupdprasanth@gmail.com>
Co-authored-by: Wang Yan <wangyan@vmware.com>

src/portal/src/app/base/preference-settings/preference-settings.component.scss

@@ -27,6 +27,6 @@
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    align-items: start;
+    align-items: flex-start;
     gap: 20px;
 }

src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.html

@@ -127,18 +127,20 @@
                     title="{{ tag.name }}"
                     >{{ tag.name }}</span
                 >
-                <span *ngIf="tag.immutable" class="label label-info ml-8">{{
-                    'REPOSITORY.IMMUTABLE' | translate
-                }}</span>
-                <app-pull-command
-                    class="pull-btn"
-                    [isTagMode]="true"
-                    [artifact]="artifactDetails"
-                    [accessoryType]="accessoryType"
-                    [registryUrl]="registryUrl"
-                    [projectName]="projectName"
-                    [repoName]="repositoryName"
-                    [selectedTag]="tag.name"></app-pull-command>
+                <div class="pull-label">
+                    <span *ngIf="tag.immutable" class="label label-info ml-8">{{
+                        'REPOSITORY.IMMUTABLE' | translate
+                    }}</span>
+                    <app-pull-command
+                        class="pull-btn"
+                        [isTagMode]="true"
+                        [artifact]="artifactDetails"
+                        [accessoryType]="accessoryType"
+                        [registryUrl]="registryUrl"
+                        [projectName]="projectName"
+                        [repoName]="repositoryName"
+                        [selectedTag]="tag.name"></app-pull-command>
+                </div>
             </div>
         </clr-dg-cell>
         <clr-dg-cell>{{

src/portal/src/app/base/project/repository/artifact/artifact-tag/artifact-tag.component.scss

@@ -19,7 +19,6 @@
     position: relative;
 
     .label {
-        position: absolute;
         right: 0;
         margin-right: 0;
     }
@@ -45,6 +44,15 @@
     align-items: center;
 }
 
+.pull-label {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 8px;
+    align-content: flex-end;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
 .refresh-btn {
     cursor: pointer;
 }