From 227f3469f31214a625938fbb4a4dd8c7894a464e Mon Sep 17 00:00:00 2001
From: gitdallas <5322142+gitdallas@users.noreply.github.com>
Date: Wed, 13 Nov 2024 17:46:10 -0600
Subject: [PATCH 1/3] fix(13062): title and label misalignment

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>
---
 .../ArchiveModelVersionDetails.tsx                   | 12 ++++--------
 .../ModelVersionArchiveDetails.tsx                   | 12 ++++--------
 .../RegisteredModelArchiveDetails.tsx                | 12 ++++--------
 3 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx
index 2e138abf25..261b2bfaba 100644
--- a/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ArchiveModelVersionDetails.tsx
+++ b/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>
         )
       }
diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx
index d27868a17f..a886c0f7c3 100644
--- a/frontend/src/pages/modelRegistry/screens/ModelVersionsArchive/ModelVersionArchiveDetails.tsx
+++ b/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>
           )
         }
diff --git a/frontend/src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx b/frontend/src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx
index c201d42da4..21097d438c 100644
--- a/frontend/src/pages/modelRegistry/screens/RegisteredModelsArchive/RegisteredModelArchiveDetails.tsx
+++ b/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>
           )
         }

From 10f82d1af23adb66fb2d40d14f6bf70f5abade28 Mon Sep 17 00:00:00 2001
From: gitdallas <5322142+gitdallas@users.noreply.github.com>
Date: Thu, 14 Nov 2024 11:32:41 -0600
Subject: [PATCH 2/3] spacing issues on mr version detail page

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>
---
 .../ModelVersionDetails/ModelVersionDetailsView.tsx       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx
index 5982f215e0..27dfb0cb4e 100644
--- a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx
+++ b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx
@@ -93,10 +93,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 +156,10 @@ const ModelVersionDetailsView: React.FC<ModelVersionDetailsViewProps> = ({
             </>
           )}
         </DescriptionList>
-        <Title style={{ marginTop: '1em' }} headingLevel={TextVariants.h3}>
+        <Title style={{ margin: '1em 0' }} headingLevel={TextVariants.h3}>
           Source model format
         </Title>
-        <DescriptionList isFillColumns>
+        <DescriptionList>
           <EditableTextDescriptionListGroup
             editableVariant="TextInput"
             baseTestId="source-model-format"

From 43a2547d11395f2c1f157f3dc7738bd3b35a3234 Mon Sep 17 00:00:00 2001
From: gitdallas <5322142+gitdallas@users.noreply.github.com>
Date: Mon, 18 Nov 2024 14:44:32 -0600
Subject: [PATCH 3/3] add dividers to the descriptionlists

Signed-off-by: gitdallas <5322142+gitdallas@users.noreply.github.com>
---
 .../ModelVersionDetails/ModelVersionDetailsView.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx b/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx
index 27dfb0cb4e..6b32db9a87 100644
--- a/frontend/src/pages/modelRegistry/screens/ModelVersionDetails/ModelVersionDetailsView.tsx
+++ b/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';
@@ -156,6 +163,7 @@ const ModelVersionDetailsView: React.FC<ModelVersionDetailsViewProps> = ({
             </>
           )}
         </DescriptionList>
+        <Divider style={{ marginTop: '1em' }} />
         <Title style={{ margin: '1em 0' }} headingLevel={TextVariants.h3}>
           Source model format
         </Title>
@@ -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."