Merge branch '334391-geo-fix-flex-spacing' into 'master'

Geo Nodes - Fix flex alignment

See merge request gitlab-org/gitlab!70319

ee/app/assets/javascripts/geo_nodes/components/details/secondary_node/geo_node_replication_counts.vue

@@ -53,9 +53,9 @@ export default {
 <template>
   <div>
     <div class="gl-display-flex gl-align-items-center gl-mb-3">
-      <span class="gl-flex-grow-1">{{ $options.i18n.dataType }}</span>
-      <span class="gl-flex-grow-1">{{ $options.i18n.synchronization }}</span>
-      <span class="gl-flex-grow-1">{{ $options.i18n.verification }}</span>
+      <span class="gl-flex-grow-1 gl-flex-basis-0">{{ $options.i18n.dataType }}</span>
+      <span class="gl-flex-grow-1 gl-flex-basis-0">{{ $options.i18n.synchronization }}</span>
+      <span class="gl-flex-grow-1 gl-flex-basis-0">{{ $options.i18n.verification }}</span>
     </div>
     <div
       v-for="type in replicationOverview"
@@ -63,7 +63,9 @@ export default {
       class="gl-display-flex gl-align-items-center gl-mb-3"
       data-testid="replication-type"
     >
-      <span class="gl-flex-grow-1" data-testid="replicable-title">{{ type.title }}</span>
+      <span class="gl-flex-grow-1 gl-flex-basis-0" data-testid="replicable-title">{{
+        type.title
+      }}</span>
       <geo-node-replication-sync-percentage :values="type.sync" />
       <geo-node-replication-sync-percentage :values="type.verification" />
     </div>

ee/app/assets/javascripts/geo_nodes/components/details/secondary_node/geo_node_replication_sync_percentage.vue

@@ -44,7 +44,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-align-items-center gl-flex-grow-1">
+  <div class="gl-display-flex gl-align-items-center gl-flex-grow-1 gl-flex-basis-0">
     <div :class="percentColor" class="gl-rounded-full gl-w-3 gl-h-3 gl-mr-2"></div>
     <span class="gl-font-weight-bold">
       {{ percent === null ? $options.i18n.nA : `${percent}%` }}

ee/app/assets/javascripts/geo_nodes/components/header/geo_node_header.vue

@@ -62,13 +62,13 @@ export default {
       <div
         class="gl-display-flex gl-flex-direction-column gl-md-flex-direction-row gl-md-align-items-center gl-flex-grow-1"
       >
-        <div class="gl-display-flex gl-align-items-center gl-flex-grow-1">
+        <div class="gl-display-flex gl-align-items-center gl-flex-grow-1 gl-flex-basis-0">
           <gl-badge v-if="node.current" variant="info" class="gl-mr-2">{{
             $options.i18n.currentNodeLabel
           }}</gl-badge>
           <h4 class="gl-font-lg">{{ node.name }}</h4>
         </div>
-        <div class="gl-display-flex gl-align-items-center gl-flex-grow-2">
+        <div class="gl-display-flex gl-align-items-center gl-flex-grow-2 gl-flex-basis-0">
           <geo-node-health-status :status="node.healthStatus" />
           <geo-node-last-updated
             v-if="statusCheckTimestamp"