fix(styles): dropdown icons in a table are misaligned (#2500)

imagoiq · gfellerph · web-flow · commit 05d27478a1d7 · 2024-01-22T11:30:41.000+01:00
Co-authored-by: Philipp Gfeller &lt;1659006+gfellerph@users.noreply.github.com&gt;
diff --git a/.changeset/clean-olives-stare.md b/.changeset/clean-olives-stare.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed the alignment of icons on datatable buttons.
diff --git a/packages/styles/src/components/datatable.scss b/packages/styles/src/components/datatable.scss
@@ -94,6 +94,8 @@
   }
 
   .datatable-button {
+    display: flex;
+    align-items: center;
     @include button-mixins.reset-button;
     width: datatable.$datatable-button-width;
     height: datatable.$datatable-button-height;

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@swisspost/design-system-styles': patch
 +---
++
 +Fixed the alignment of icons on datatable buttons.
Original file line number	Diff line number	Diff line change
`@@ -94,6 +94,8 @@`
`94`	`94`	`}`
`95`	`95`
`96`	`96`	`.datatable-button {`
	`97`	`+ display: flex;`
	`98`	`+ align-items: center;`
`97`	`99`	`@include button-mixins.reset-button;`
`98`	`100`	`width: datatable.$datatable-button-width;`
`99`	`101`	`height: datatable.$datatable-button-height;`