Merge branch '230738-center-mobile-alignment' into 'master'

Fix Incident and Alert mobile

Closes #230738

See merge request gitlab-org/gitlab!38577

app/assets/javascripts/incidents/components/incidents_list.vue

@@ -282,7 +282,7 @@ export default {
       @sort-changed="fetchSortedData"
     >
       <template #cell(title)="{ item }">
-        <div class="incident-management-list-title gl-display-flex gl-align-items-center">
+        <div :class="{ 'gl-display-flex gl-align-items-center': item.state === 'closed' }">
           <div class="gl-max-w-full text-truncate" :title="item.title">{{ item.title }}</div>
           <gl-icon
             v-if="item.state === 'closed'"

app/assets/stylesheets/pages/incident_management_list.scss

@@ -19,10 +19,6 @@
         @include gl-relative;
       }
 
-      .sortable-cell {
-        padding-left: calc(0.75rem + 0.65em);
-      }
-
       th {
         @include gl-bg-transparent;
         @include gl-font-weight-bold;
@@ -42,6 +38,10 @@
           }
         }
       }
+
+      .sortable-cell {
+        padding-left: calc(0.75rem + 0.65em);
+      }
     }
   }
 
@@ -58,6 +58,11 @@
           @include gl-bg-white;
           @include gl-border-none;
         }
+
+        th,
+        td {
+          @include gl-pt-6;
+        }
       }
 
       &.alert-management-table {
@@ -77,8 +82,24 @@
         }
       }
 
-      .incident-management-list-title {
-        @include gl-flex-direction-row-reverse;
+      .b-table-empty-row {
+        td {
+          @include gl-border-b-0;
+
+          div {
+            text-align: unset !important;
+          }
+        }
+      }
+
+      .b-table-busy-slot {
+        td {
+          @include gl-border-b-0;
+
+          div {
+            text-align: center !important;
+          }
+        }
       }
     }
   }

changelogs/unreleased/230738-center-mobile-alignment.yml

+---
+title: Fix Incident and Alert mobile CSS and alignment
+merge_request: 38577
+author:
+type: fixed