[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

apps/web/src/app/organizations/manage/events.component.html

@@ -69,15 +69,15 @@
   <bit-table *ngIf="events && events.length">
     <ng-container header>
       <tr>
-        <th bitCell style="width: 210px">{{ "timestamp" | i18n }}</th>
+        <th bitCell>{{ "timestamp" | i18n }}</th>
-        <th bitCell style="width: 100px">{{ "client" | i18n }}</th>
+        <th bitCell>{{ "client" | i18n }}</th>
-        <th bitCell style="width: 150px">{{ "member" | i18n }}</th>
+        <th bitCell>{{ "member" | i18n }}</th>
         <th bitCell>{{ "event" | i18n }}</th>
       </tr>
     </ng-container>
     <ng-container body>
-      <tr bitRow *ngFor="let e of events">
+      <tr bitRow *ngFor="let e of events" alignContent="top">
-        <td bitCell>{{ e.date | date: "medium" }}</td>
+        <td bitCell class="tw-whitespace-nowrap">{{ e.date | date: "medium" }}</td>
         <td bitCell>
           <span title="{{ e.appName }}, {{ e.ip }}">{{ e.appName }}</span>
         </td>

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>
+        <tr bitRow [alignContent]="alignRowContent">
-          <td bitCell>Cell 7</td>
+          <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",
+};