From 08c0953eb73741d1754fd9cc8169793e553a00d2 Mon Sep 17 00:00:00 2001
From: Oliver <oliver.henry.walters@gmail.com>
Date: Wed, 20 Mar 2024 21:01:38 +1100
Subject: [PATCH] Details CSS tweaks (again) (#6743)

* Details CSS tweaks (again)

* Fix vertical alignment
---
 src/frontend/src/components/details/Details.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx
index a9d96565d7..c2587b9ecd 100644
--- a/src/frontend/src/components/details/Details.tsx
+++ b/src/frontend/src/components/details/Details.tsx
@@ -202,7 +202,8 @@ function TableStringValue(props: FieldProps) {
       style={{
         display: 'flex',
         justifyContent: 'space-between',
-        wordBreak: 'break-word'
+        wordBreak: 'break-word',
+        alignItems: 'flex-start'
       }}
     >
       <Suspense fallback={<Skeleton width={200} height={20} radius="xl" />}>
@@ -366,22 +367,19 @@ export function DetailsTableField({
   const FieldType: any = getFieldType(field.type);
 
   return (
-    <tr>
+    <tr style={{ verticalAlign: 'top' }}>
       <td
         style={{
-          display: 'flex',
-          alignItems: 'center',
           gap: '20px',
-          width: '50',
-          justifyContent: 'flex-start'
+          width: '50'
         }}
       >
         <InvenTreeIcon icon={(field.icon ?? field.name) as InvenTreeIconType} />
       </td>
-      <td>
+      <td style={{ minWidth: '25%', maxWidth: '65%' }}>
         <Text>{field.label}</Text>
       </td>
-      <td style={{ minWidth: '40%' }}>
+      <td style={{ width: '100%' }}>
         <FieldType field_data={field} field_value={item[field.name]} />
       </td>
       <td style={{ width: '50' }}>