Fix icon alignment in the growl component (#13074)

rancher · Jan 13, 2025 · fea429e · fea429e
1 parent 938b866
commit fea429e
Showing 1 changed file with 14 additions and 4 deletions.
diff --git a/shell/components/GrowlManager.vue b/shell/components/GrowlManager.vue
@@ -106,7 +106,10 @@ export default {
             <div class="growl-text-title">
               {{ growl.title }}
             </div>
-            <p v-if="growl.message">
+            <p
+              v-if="growl.message"
+              :class="{ 'has-title': !!growl.title }"
+            >
               {{ growl.message }}
             </p>
           </div>
@@ -153,12 +156,16 @@ export default {
     word-break: break-all;
     box-shadow: 0 3px 5px 0px var(--shadow);
 
+    $growl-icon-size: 20px;
+
     .icon-container {
       align-self: center;
       flex-basis: 10%;
       padding: 10px 20px 10px 10px;
       i {
-        font-size: 24px;
+        font-size: $growl-icon-size;
+        width: $growl-icon-size;
+        height: $growl-icon-size;
       }
     }
 
@@ -183,11 +190,14 @@ export default {
         }
         .growl-text-title {
           font-size: 16px;
-          margin-bottom: 20px;
         }
 
         > P {
-          margin-top: 5px;
+          padding-top: 2px;
+
+          &.has-title {
+            margin-top: 5px;
+          }
         }
       }
     }