[EC-593] Top align event logs row content (#3813)

* [EC-593] Top align event log row contents

* [EC-593] Prevent event log timestamp from wrapping

* [EC-593] Add alignContent input to bitRow directive

* [EC-593] Remove ineffective inline styles (CSP)

* [EC-593] Remove templated tailwind classes

Tailwind minimizes the bundled stylesheet by removing classes that aren't used in code. Using a string template for the classes causes those classes to be ignored.

* [EC-593] Introduce alignContent input to table story

libs/components/src/table/row.directive.ts

@@ -1,9 +1,24 @@
-import { HostBinding, Directive } from "@angular/core";
+import { Directive, HostBinding, Input } from "@angular/core";
 
 @Directive({
   selector: "tr[bitRow]",
 })
 export class RowDirective {
+  @Input() alignContent: "top" | "middle" | "bottom" | "baseline" = "baseline";
+
+  get alignmentClass(): string {
+    switch (this.alignContent) {
+      case "top":
+        return "tw-align-top";
+      case "middle":
+        return "tw-align-middle";
+      case "bottom":
+        return "tw-align-bottom";
+      default:
+        return "tw-align-baseline";
+    }
+  }
+
   @HostBinding("class") get classList() {
     return [
       "tw-border-0",
@@ -12,6 +27,7 @@ export class RowDirective {
       "tw-border-solid",
       "hover:tw-bg-background-alt",
       "last:tw-border-0",
+      this.alignmentClass,
     ];
   }
 }

libs/components/src/table/table.stories.ts

@@ -9,6 +9,12 @@ export default {
       imports: [TableModule],
     }),
   ],
+  argTypes: {
+    alignRowContent: {
+      options: ["top", "middle", "bottom", "baseline"],
+      control: { type: "select" },
+    },
+  },
   parameters: {
     design: {
       type: "figma",
@@ -29,18 +35,18 @@ const Template: Story = (args) => ({
         </tr>
       </ng-container>
       <ng-container body>
-        <tr bitRow>
+        <tr bitRow [alignContent]="alignRowContent">
           <td bitCell>Cell 1</td>
-          <td bitCell>Cell 2</td>
+          <td bitCell>Cell 2 <br> Multiline Cell</td>
           <td bitCell>Cell 3</td>
         </tr>
-        <tr bitRow>
+        <tr bitRow [alignContent]="alignRowContent">
           <td bitCell>Cell 4</td>
           <td bitCell>Cell 5</td>
           <td bitCell>Cell 6</td>
         </tr>
-        <tr bitRow>
-          <td bitCell>Cell 7</td>
+        <tr bitRow [alignContent]="alignRowContent">
+          <td bitCell>Cell 7 <br> Multiline Cell</td>
           <td bitCell>Cell 8</td>
           <td bitCell>Cell 9</td>
         </tr>
@@ -51,3 +57,6 @@ const Template: Story = (args) => ({
 });
 
 export const Default = Template.bind({});
+Default.args = {
+  alignRowContent: "baseline",
+};