feat(ui): workflow library styling

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx

@@ -180,6 +180,7 @@ const WorkflowLibraryList = () => {
               label={t('common.orderBy')}
               isDisabled={isFetching}
               w={64}
+              minW={56}
             >
               <InvSelect
                 value={valueOrderBy}
@@ -191,6 +192,7 @@ const WorkflowLibraryList = () => {
               label={t('common.direction')}
               isDisabled={isFetching}
               w={64}
+              minW={56}
             >
               <InvSelect
                 value={valueDirection}
@@ -207,6 +209,7 @@ const WorkflowLibraryList = () => {
             onKeyDown={handleKeydownFilterText}
             onChange={handleChangeFilterText}
             data-testid="workflow-search-input"
+            minW={64}
           />
           {query.trim().length && (
             <InputRightElement>
@@ -229,7 +232,7 @@ const WorkflowLibraryList = () => {
         <IAINoContentFallback label={t('workflows.problemLoading')} />
       ) : data.items.length ? (
         <ScrollableContent>
-          <Flex w="full" h="full" gap={2} px={1} flexDir="column">
+          <Flex w="full" h="full" flexDir="column">
             {data.items.map((w) => (
               <WorkflowLibraryListItem key={w.workflow_id} workflowDTO={w} />
             ))}

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx

@@ -36,16 +36,31 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
   );
 
   return (
-    <Flex key={workflowDTO.workflow_id} w="full">
+    <Flex
+      key={workflowDTO.workflow_id}
+      w="full"
+      p={2}
+      borderRadius="base"
+      _hover={{ bg: 'base.750' }}
+    >
       <Flex w="full" alignItems="center" gap={2} h={12}>
         <Flex flexDir="column" flexGrow={1} h="full">
           <Flex alignItems="center" w="full" h="50%">
-            <Heading size="sm" variant={isOpen ? 'invokeBlue' : undefined}>
+            <Heading
+              size="sm"
+              noOfLines={1}
+              variant={isOpen ? 'invokeBlue' : undefined}
+            >
               {workflowDTO.name || t('workflows.unnamedWorkflow')}
             </Heading>
             <Spacer />
             {workflowDTO.category === 'user' && (
-              <InvText fontSize="sm" variant="subtext">
+              <InvText
+                fontSize="sm"
+                variant="subtext"
+                flexShrink={0}
+                noOfLines={1}
+              >
                 {t('common.updated')}:{' '}
                 {dateFormat(workflowDTO.updated_at, masks.shortDate)}{' '}
                 {dateFormat(workflowDTO.updated_at, masks.shortTime)}
@@ -54,7 +69,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
           </Flex>
           <Flex alignItems="center" w="full" h="50%">
             {workflowDTO.description ? (
-              <InvText fontSize="sm" noOfLines={1} w="70%">
+              <InvText fontSize="sm" noOfLines={1}>
                 {workflowDTO.description}
               </InvText>
             ) : (
@@ -69,7 +84,12 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
             )}
             <Spacer />
             {workflowDTO.category === 'user' && (
-              <InvText fontSize="sm" variant="subtext">
+              <InvText
+                fontSize="sm"
+                variant="subtext"
+                flexShrink={0}
+                noOfLines={1}
+              >
                 {t('common.created')}:{' '}
                 {dateFormat(workflowDTO.created_at, masks.shortDate)}{' '}
                 {dateFormat(workflowDTO.created_at, masks.shortTime)}
@@ -78,6 +98,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
           </Flex>
         </Flex>
         <InvButton
+          flexShrink={0}
           isDisabled={isOpen}
           onClick={handleGetAndLoadWorkflow}
           isLoading={getAndLoadWorkflowResult.isLoading}
@@ -87,6 +108,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
         </InvButton>
         {workflowDTO.category === 'user' && (
           <InvButton
+            flexShrink={0}
             colorScheme="error"
             isDisabled={isOpen}
             onClick={handleDeleteWorkflow}

invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryModal.tsx

@@ -24,7 +24,7 @@ const WorkflowLibraryModal = () => {
         minW="unset"
         minH="unset"
         maxW="1200px"
-        maxH= "600px"
+        maxH="664px"
       >
         <InvModalHeader>{t('workflows.workflowLibrary')}</InvModalHeader>
         <InvModalCloseButton />