Fix/13062 title label misaligned, spacing issues

frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { DescriptionList, Flex, FlexItem, TextVariants, Title } from '@patternfly/react-core';
+import {
+  DescriptionList,
+  Divider,
+  Flex,
+  FlexItem,
+  TextVariants,
+  Title,
+} from '@patternfly/react-core';
 import { ModelVersion } from '~/concepts/modelRegistry/types';
 import DashboardDescriptionListGroup from '~/components/DashboardDescriptionListGroup';
 import EditableTextDescriptionListGroup from '~/components/EditableTextDescriptionListGroup';
@@ -93,10 +100,10 @@ const ModelVersionDetailsView: React.FC<ModelVersionDetailsViewProps> = ({
             <InlineTruncatedClipboardCopy testId="model-version-id" textToCopy={mv.id} />
           </DashboardDescriptionListGroup>
         </DescriptionList>
-        <Title style={{ marginTop: '1em' }} headingLevel={TextVariants.h3}>
+        <Title style={{ margin: '1em 0' }} headingLevel={TextVariants.h3}>
           Model location
         </Title>
-        <DescriptionList isFillColumns>
+        <DescriptionList>
           {storageFields && (
             <>
               <DashboardDescriptionListGroup
@@ -156,10 +163,11 @@ const ModelVersionDetailsView: React.FC<ModelVersionDetailsViewProps> = ({
             </>
           )}
         </DescriptionList>
-        <Title style={{ marginTop: '1em' }} headingLevel={TextVariants.h3}>
+        <Divider style={{ marginTop: '1em' }} />
+        <Title style={{ margin: '1em 0' }} headingLevel={TextVariants.h3}>
           Source model format
         </Title>
-        <DescriptionList isFillColumns>
+        <DescriptionList>
           <EditableTextDescriptionListGroup
             editableVariant="TextInput"
             baseTestId="source-model-format"
@@ -199,7 +207,8 @@ const ModelVersionDetailsView: React.FC<ModelVersionDetailsViewProps> = ({
             contentWhenEmpty="No source model format version"
           />
         </DescriptionList>
-        <DescriptionList isFillColumns style={{ marginTop: '2em' }}>
+        <Divider style={{ marginTop: '1em' }} />
+        <DescriptionList isFillColumns style={{ marginTop: '1em' }}>
           <DashboardDescriptionListGroup
             title="Author"
             popover="The author is the user who registered the model version."

frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router';
-import { Button, Flex, FlexItem, Label, Text, Tooltip, Truncate } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Label, Tooltip, Truncate } from '@patternfly/react-core';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import useModelVersionById from '~/concepts/modelRegistry/apiHooks/useModelVersionById';
 import { ModelRegistrySelectorContext } from '~/concepts/modelRegistry/context/ModelRegistrySelectorContext';
@@ -53,13 +53,9 @@ const ArchiveModelVersionDetails: React.FC<ArchiveModelVersionDetailsProps> = ({
       }
       title={
         mv && (
-          <Flex>
-            <FlexItem>
-              <Text>{mv.name}</Text>
-            </FlexItem>
-            <FlexItem>
-              <Label>Archived</Label>
-            </FlexItem>
+          <Flex alignItems={{ default: 'alignItemsCenter' }}>
+            <FlexItem>{mv.name}</FlexItem>
+            <Label>Archived</Label>
           </Flex>
         )
       }

frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router';
-import { Button, Flex, FlexItem, Label, Text, Truncate } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Label, Truncate } from '@patternfly/react-core';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import useModelVersionById from '~/concepts/modelRegistry/apiHooks/useModelVersionById';
 import { ModelRegistrySelectorContext } from '~/concepts/modelRegistry/context/ModelRegistrySelectorContext';
@@ -78,13 +78,9 @@ const ModelVersionsArchiveDetails: React.FC<ModelVersionsArchiveDetailsProps> =
         }
         title={
           mv && (
-            <Flex>
-              <FlexItem>
-                <Text>{mv.name}</Text>
-              </FlexItem>
-              <FlexItem>
-                <Label>Archived</Label>
-              </FlexItem>
+            <Flex alignItems={{ default: 'alignItemsCenter' }}>
+              <FlexItem>{mv.name}</FlexItem>
+              <Label>Archived</Label>
             </Flex>
           )
         }

frontend/src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router';
-import { Button, Flex, FlexItem, Label, Text, Truncate } from '@patternfly/react-core';
+import { Button, Flex, FlexItem, Label, Truncate } from '@patternfly/react-core';
 import ApplicationsPage from '~/pages/ApplicationsPage';
 import { ModelRegistrySelectorContext } from '~/concepts/modelRegistry/context/ModelRegistrySelectorContext';
 import { registeredModelUrl } from '~/pages/modelRegistry/screens/routeUtils';
@@ -52,13 +52,9 @@ const RegisteredModelsArchiveDetails: React.FC<RegisteredModelsArchiveDetailsPro
         }
         title={
           rm && (
-            <Flex>
-              <FlexItem>
-                <Text>{rm.name}</Text>
-              </FlexItem>
-              <FlexItem>
-                <Label>Archived</Label>
-              </FlexItem>
+            <Flex alignItems={{ default: 'alignItemsCenter' }}>
+              <FlexItem>{rm.name}</FlexItem>
+              <Label>Archived</Label>
             </Flex>
           )
         }