From 5a3a1e8650e4f68a93075e7cf3ba69762e7a8ee4 Mon Sep 17 00:00:00 2001
From: chintankavathia <chintankumar.kavathia@siemens.com>
Date: Mon, 13 Apr 2026 14:59:10 +0530
Subject: [PATCH] fix(dashboards-ng): align catalog list styles with UX
 guidelines

removed external border around catalog list to align with UX guidelines.
also move scroll inside list instead of having it on outer container.
---
 ...shboard--edit-dashboards-demo-chromium-dark-linux.png | 4 ++--
 ...hboard--edit-dashboards-demo-chromium-light-linux.png | 4 ++--
 ...hboard--empty-dashboards-demo-chromium-dark-linux.png | 4 ++--
 ...board--empty-dashboards-demo-chromium-light-linux.png | 4 ++--
 ...rd--empty-dashboards-demo-esm-chromium-dark-linux.png | 4 ++--
 ...d--empty-dashboards-demo-esm-chromium-light-linux.png | 4 ++--
 ...-esm-edit-dashboards-demo-esm-chromium-dark-linux.png | 4 ++--
 ...esm-edit-dashboards-demo-esm-chromium-light-linux.png | 4 ++--
 .../widget-catalog/si-widget-catalog.component.html      | 8 +++-----
 .../widget-catalog/si-widget-catalog.component.scss      | 9 ---------
 10 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--edit-dashboards-demo-chromium-dark-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--edit-dashboards-demo-chromium-dark-linux.png
index bded28f19e..dd8dca3769 100644
--- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--edit-dashboards-demo-chromium-dark-linux.png
+++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--edit-dashboards-demo-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:34c5dae615f5091ebf4f83791171b987f92b8be51ad50d2627fc2015bbee926d
-size 57525
+oid sha256:1a15ce3b8eb3d8226f6f390472a601d5037e7d4b4dc765c178a766ca3c8986d1
+size 57838
diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--edit-dashboards-demo-chromium-light-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--edit-dashboards-demo-chromium-light-linux.png
index 096ad4d1cd..ec8f61fb32 100644
--- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--edit-dashboards-demo-chromium-light-linux.png
+++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--edit-dashboards-demo-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d61975a757e14304eb12efcaa3adcfd7598457963d66edd02e119ea2e25f6206
-size 54340
+oid sha256:a002dc299fc7d096b4b0d7872f82ecb7d5995abb8bd8cc1a158b20d7ae9b97f9
+size 54191
diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-chromium-dark-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-chromium-dark-linux.png
index 902cd5cc89..a0e976ddeb 100644
--- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-chromium-dark-linux.png
+++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7b6e32ef1c0622061b6b6ed1d0734dd75e08f40929293616c8f3d7b66590ae89
-size 19432
+oid sha256:fc9eca01a11ea050d402fb1e23213465dae5e659a394b53a43f89d9a93f850a5
+size 19373
diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-chromium-light-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-chromium-light-linux.png
index b003d09a48..a10ea230f0 100644
--- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-chromium-light-linux.png
+++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4556040c960d52f1d2a83feaeed8ea7f9cc7a0f2e2c459c1732bcb8a2c09096e
-size 19336
+oid sha256:14f8fe4571c166aafa67fa4471fd92330805995f6bcd098b14757a2fe6402707
+size 19214
diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-esm-chromium-dark-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-esm-chromium-dark-linux.png
index 902cd5cc89..a0e976ddeb 100644
--- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-esm-chromium-dark-linux.png
+++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-esm-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7b6e32ef1c0622061b6b6ed1d0734dd75e08f40929293616c8f3d7b66590ae89
-size 19432
+oid sha256:fc9eca01a11ea050d402fb1e23213465dae5e659a394b53a43f89d9a93f850a5
+size 19373
diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-esm-chromium-light-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-esm-chromium-light-linux.png
index b003d09a48..a10ea230f0 100644
--- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-esm-chromium-light-linux.png
+++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--empty-dashboards-demo-esm-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4556040c960d52f1d2a83feaeed8ea7f9cc7a0f2e2c459c1732bcb8a2c09096e
-size 19336
+oid sha256:14f8fe4571c166aafa67fa4471fd92330805995f6bcd098b14757a2fe6402707
+size 19214
diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--esm-edit-dashboards-demo-esm-chromium-dark-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--esm-edit-dashboards-demo-esm-chromium-dark-linux.png
index bded28f19e..dd8dca3769 100644
--- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--esm-edit-dashboards-demo-esm-chromium-dark-linux.png
+++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--esm-edit-dashboards-demo-esm-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:34c5dae615f5091ebf4f83791171b987f92b8be51ad50d2627fc2015bbee926d
-size 57525
+oid sha256:1a15ce3b8eb3d8226f6f390472a601d5037e7d4b4dc765c178a766ca3c8986d1
+size 57838
diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--esm-edit-dashboards-demo-esm-chromium-light-linux.png b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--esm-edit-dashboards-demo-esm-chromium-light-linux.png
index 096ad4d1cd..ec8f61fb32 100644
--- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--esm-edit-dashboards-demo-esm-chromium-light-linux.png
+++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--esm-edit-dashboards-demo-esm-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d61975a757e14304eb12efcaa3adcfd7598457963d66edd02e119ea2e25f6206
-size 54340
+oid sha256:a002dc299fc7d096b4b0d7872f82ecb7d5995abb8bd8cc1a158b20d7ae9b97f9
+size 54191
diff --git a/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.html b/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.html
index 7d9cc6c679..93efe9a910 100644
--- a/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.html
+++ b/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.html
@@ -11,15 +11,13 @@
           (searchChange)="onSearch($event)"
         />
       </div>
-      <div
-        class="si-layout-fixed-height text-pre-wrap text-break overflow-y-auto widget-list mt-6 bg-base-1"
-      >
+      <div class="si-layout-fixed-height text-pre-wrap text-break mt-6 bg-base-1 rounded-2">
         @if (filteredWidgetCatalog.length > 0) {
           <span id="widget-catalog-list-description" class="visually-hidden">
             {{ labelWidgetCatalogList | translate }}
           </span>
           <ul
-            class="si-layout-fixed-height list-group"
+            class="si-layout-fixed-height list-group overflow-auto mb-0"
             aria-labelledby="widget-catalog-list-description"
             cdkListbox
             [cdkListboxValue]="[]"
@@ -32,7 +30,7 @@
                 [class.active]="selected() === widget"
               >
                 <si-circle-status class="my-n4 me-5" [icon]="widget.iconClass" />
-                <div class="d-flex flex-column align-items-start">
+                <div class="d-flex flex-column align-items-start align-self-center">
                   <span class="si-h5">{{ widget.name }}</span>
                   <span class="si-body">{{ widget.description?.trim() }}</span>
                 </div>
diff --git a/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.scss b/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.scss
index 5675369f0e..275c75869f 100644
--- a/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.scss
+++ b/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.scss
@@ -9,16 +9,7 @@
   margin-block-start: -1 * map.get(variables.$spacers, 2);
 }
 
-.widget-list {
-  background-color: variables.$element-base-1;
-  border: 1px solid variables.$element-ui-4;
-  border-radius: variables.$element-radius-2;
-  overflow-x: auto;
-}
-
 .list-group-item {
-  border-inline-color: transparent;
-  border-radius: 0;
   cursor: pointer;
 }