Fix icon vertical alignment in alert component (#4823)

* Fix icon vertical alignment in alert component

Use `block` on the icon span to remove inline line-box descender space,
and derive flex alignment from whether a header is present: `items-center`
for single-line alerts, `items-start` for multi-line alerts with a header.

* update changelog

* Adds issue to changelog

* updates changelog

Author: lmac-1

CHANGELOG.md

@@ -27,6 +27,8 @@ and this project adheres to
 
 ### Fixed
 
+- Fix icon vertical alignment in sandbox alert banners
+  [#4730](https://github.com/OpenFn/lightning/issues/4730)
 - Fix issue where back button must be pressed 3 times to go back once from the
   Workflow canvas [#4812](https://github.com/OpenFn/lightning/issues/4812)
 - Reduce `run:log` channel timeouts under heavy log volume by moving `log_lines`

lib/lightning_web/live/components/common.ex

@@ -123,9 +123,9 @@ defmodule LightningWeb.Components.Common do
 
     ~H"""
     <div id={@id} class={"rounded-md bg-#{@color}-50 p-4 text-wrap #{@class}"}>
-      <div class="flex">
-        <div class="flex-shrink-0">
-          <.icon name={@icon} class={"align-top h-5 w-5 text-#{@color}-400"} />
+      <div class={["flex", if(@header, do: "items-start", else: "items-center")]}>
+        <div class="shrink-0">
+          <.icon name={@icon} class={"block h-5 w-5 text-#{@color}-400"} />
         </div>
         <div class={[
           "ml-3 min-w-0 flex-1",