From c008704bc84be0c2ac2eee0c579efd4a7943eb42 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 7 Mar 2024 16:28:17 +1100
Subject: [PATCH] feat(ui): model header styling

---
 .../subpanels/ModelPanel/Fields/ModelImageUpload.tsx  | 10 +++++-----
 .../modelManagerV2/subpanels/ModelPanel/Model.tsx     | 11 +++++------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx
index b2b6cbfa8f..0d7920ef77 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx
@@ -100,9 +100,9 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => {
           src={image}
           objectFit="cover"
           objectPosition="50% 50%"
-          height="100px"
-          width="100px"
-          minWidth="100px"
+          height={108}
+          width={108}
+          minWidth={108}
           borderRadius="base"
         />
         <IconButton
@@ -125,8 +125,8 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => {
       <Tooltip label={t('modelManager.uploadImage')}>
         <Flex
           as={Button}
-          w={100}
-          h={100}
+          w={108}
+          h={108}
           opacity={0.3}
           borderRadius="base"
           alignItems="center"
diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx
index 6e88da0aa1..2e5695f34d 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx
@@ -1,4 +1,4 @@
-import { Flex, Heading, Text } from '@invoke-ai/ui-library';
+import { Flex, Heading, Spacer, Text } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from 'app/store/storeHooks';
 import { ModelConvertButton } from 'features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton';
@@ -29,14 +29,13 @@ export const Model = () => {
       <Flex alignItems="flex-start" gap={4}>
         <ModelImageUpload model_key={selectedModelKey} model_image={data.cover_image} />
         <Flex flexDir="column" gap={1} flexGrow={1}>
-          <Flex gap={2} position="relative">
+          <Flex gap={2}>
             <Heading as="h2" fontSize="lg" w="full">
               {data.name}
             </Heading>
-            <Flex position="absolute" gap={2} right={0} top={0}>
-              <ModelEditButton />
-              <ModelConvertButton modelKey={selectedModelKey} />
-            </Flex>
+            <Spacer />
+            <ModelEditButton />
+            <ModelConvertButton modelKey={selectedModelKey} />
           </Flex>
           {data.source && (
             <Text variant="subtext">