fix(apps): CSS issues #27445 (#27462)

* Solved scroll apps card and avatar on Apps. WIP on scroll issue with textarea * Fixed css rules
dotCMS · Feb 9, 2024 · 279602a · 279602a
1 parent a9ac128
commit 279602a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 20 deletions.
diff --git a/...cms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.html b/...cms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-card/dot-apps-card.component.html
@@ -4,24 +4,11 @@
     }"
     (click)="actionFired.emit(app.key)">
     <p-header>
-        <p-avatar
-            *ngIf="app.configurationsCount"
-            [image]="app.iconUrl"
-            [text]="app.name"
-            size="large"
-            dotAvatar></p-avatar>
-        <p-avatar
-            *ngIf="!app.configurationsCount"
-            [image]="app.iconUrl"
-            [text]="app.name"
-            size="large"
-            dotAvatar></p-avatar>
+        <p-avatar [image]="app.iconUrl" [text]="app.name" size="large" dotAvatar></p-avatar>
         <div class="dot-apps-card__label-container">
-            <span class="dot-apps-card__name">
-                {{ app.name }}
-            </span>
-            <span class="dot-apps-card__configurations"
-                >{{
+            <span class="dot-apps-card__name">{{ app.name }}</span>
+            <span class="dot-apps-card__configurations">
+                {{
                     app.configurationsCount
                         ? app.configurationsCount + ' ' + ('apps.configurations' | dm)
                         : ('apps.no.configurations' | dm)

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-apps/dot-apps-list/dot-apps-list.component.scss
@@ -5,6 +5,10 @@
     height: 100%;
 }
 
+:host ::ng-deep dot-portlet-box {
+    height: 100%;
+}
+
 .dot-apps__header {
     border-bottom: 1px solid $color-palette-gray-200;
     display: flex;
@@ -44,13 +48,15 @@
     grid-gap: $spacing-4;
     grid-template-columns: repeat(auto-fill, minmax(23.42rem, 1fr));
     padding: $spacing-4;
+    overflow: auto;
 }
 
 .dot-apps__container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow-y: hidden;
     background-color: $white;
     box-shadow: $shadow-m;
-    overflow-y: auto;
     padding-top: $spacing-4;
-    width: 100%;
-    height: 100%;
 }