## [Observability RAC] Alerts table post-EuiDataGrid style updates

This PR updates styles in the Observability `Alerts` table, as a follow-up to the [TGrid migrating to use `EuiDataGrid` for rendering](elastic#106199), and [this PR](elastic#105446), which improved the alerts table columns.

- The `Reason` column uses up the remaining width, a follow-up task from <elastic#105446>
  - This task was originally tracked by <elastic#105227>
- Increased the font weight and vertically aligned the `Actions` header with the other columns
- Removed the `Status` column
- Increased the width of the `Triggered` column
- Renamed the `Duration` column to `Alert duration`
- Eliminated the gap between actions

### Before

![before](https://user-images.githubusercontent.com/4459398/126430458-89440150-c10b-43b1-b0b4-2044ddfc22a8.png)

### After

![after](https://user-images.githubusercontent.com/4459398/126430476-3a8109de-629c-4d35-b6b0-09e4f0d9590c.png)

### Desk testing

- To desk test the `Observability > Alerts` page, add the following settings to `config/kibana.dev.yml`:

```
xpack.observability.unsafe.cases.enabled: true
xpack.observability.unsafe.alertingExperience.enabled: true
xpack.ruleRegistry.write.enabled: true
```

x-pack/plugins/observability/public/pages/alerts/alerts_table_t_grid.tsx

@@ -41,11 +41,9 @@ const EventsThContent = styled.div.attrs(({ className = '' }) => ({
   className: `siemEventsTable__thContent ${className}`,
 }))<{ textAlign?: string; width?: number }>`
   font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
-  font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold};
+  font-weight: ${({ theme }) => theme.eui.euiFontWeightBold};
   line-height: ${({ theme }) => theme.eui.euiLineHeight};
   min-width: 0;
-  position: relative;
-  top: 3px;
   padding: ${({ theme }) => theme.eui.paddingSizes.xs};
   text-align: ${({ textAlign }) => textAlign};
   width: ${({ width }) =>
@@ -65,26 +63,18 @@ const EventsThContent = styled.div.attrs(({ className = '' }) => ({
 export const columns: Array<
   Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions
 > = [
-  {
-    columnHeaderType: 'not-filtered',
-    displayAsText: i18n.translate('xpack.observability.alertsTGrid.statusColumnDescription', {
-      defaultMessage: 'Status',
-    }),
-    id: ALERT_STATUS,
-    initialWidth: 79,
-  },
   {
     columnHeaderType: 'not-filtered',
     displayAsText: i18n.translate('xpack.observability.alertsTGrid.triggeredColumnDescription', {
       defaultMessage: 'Triggered',
     }),
     id: ALERT_START,
-    initialWidth: 116,
+    initialWidth: 176,
   },
   {
     columnHeaderType: 'not-filtered',
     displayAsText: i18n.translate('xpack.observability.alertsTGrid.durationColumnDescription', {
-      defaultMessage: 'Duration',
+      defaultMessage: 'Alert duration',
     }),
     id: ALERT_DURATION,
     initialWidth: 116,
@@ -104,7 +94,6 @@ export const columns: Array<
     }),
     linkField: '*',
     id: RULE_NAME,
-    initialWidth: 400,
   },
 ];
 
@@ -123,7 +112,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
   const leadingControlColumns = [
     {
       id: 'expand',
-      width: 40,
+      width: 20,
       headerCellRender: () => {
         return (
           <EventsThContent>
@@ -152,7 +141,7 @@ export function AlertsTableTGrid(props: AlertsTableTGridProps) {
     },
     {
       id: 'view_in_app',
-      width: 40,
+      width: 20,
       headerCellRender: () => null,
       rowCellRender: ({ data }: ActionProps) => {
         const dataFieldEs = data.reduce((acc, d) => ({ ...acc, [d.field]: d.value }), {});