diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
index 30df51ce60..ec09e5e8dc 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryList.tsx
@@ -136,14 +136,6 @@ const WorkflowLibraryList = () => {
     setPage(0);
   }, []);
 
-  if (isLoading) {
-    return <IAINoContentFallbackWithSpinner label={t('workflows.loading')} />;
-  }
-
-  if (!data || isError) {
-    return <IAINoContentFallback label={t('workflows.problemLoading')} />;
-  }
-
   return (
     <>
       <Flex gap={4} alignItems="center" h={10} flexShrink={0} flexGrow={0}>
@@ -172,7 +164,7 @@ const WorkflowLibraryList = () => {
               data={ORDER_BY_DATA}
               onChange={handleChangeOrderBy}
               formControlProps={{
-                w: '12rem',
+                w: 48,
                 display: 'flex',
                 alignItems: 'center',
                 gap: 2,
@@ -185,7 +177,7 @@ const WorkflowLibraryList = () => {
               data={DIRECTION_DATA}
               onChange={handleChangeDirection}
               formControlProps={{
-                w: '12rem',
+                w: 48,
                 display: 'flex',
                 alignItems: 'center',
                 gap: 2,
@@ -217,7 +209,11 @@ const WorkflowLibraryList = () => {
         </InputGroup>
       </Flex>
       <Divider />
-      {data.items.length ? (
+      {isLoading ? (
+        <IAINoContentFallbackWithSpinner label={t('workflows.loading')} />
+      ) : !data || isError ? (
+        <IAINoContentFallback label={t('workflows.problemLoading')} />
+      ) : data.items.length ? (
         <ScrollableContent>
           <Flex w="full" h="full" gap={2} px={1} flexDir="column">
             {data.items.map((w) => (
@@ -229,9 +225,15 @@ const WorkflowLibraryList = () => {
         <IAINoContentFallback label={t('workflows.noUserWorkflows')} />
       )}
       <Divider />
-      <Flex w="full" justifyContent="space-around">
-        <WorkflowLibraryPagination data={data} page={page} setPage={setPage} />
-      </Flex>
+      {data && (
+        <Flex w="full" justifyContent="space-around">
+          <WorkflowLibraryPagination
+            data={data}
+            page={page}
+            setPage={setPage}
+          />
+        </Flex>
+      )}
     </>
   );
 };
diff --git a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
index e842f4aa1f..f8481ded83 100644
--- a/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
+++ b/invokeai/frontend/web/src/features/workflowLibrary/components/WorkflowLibraryListItem.tsx
@@ -29,9 +29,9 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
 
   return (
     <Flex key={workflowDTO.workflow_id} w="full">
-      <Flex w="full" alignItems="center" gap={2}>
-        <Flex flexDir="column" flexGrow={1}>
-          <Flex alignItems="center" w="full">
+      <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">
               {workflowDTO.name || t('workflows.unnamedWorkflow')}
             </Heading>
@@ -44,7 +44,7 @@ const WorkflowLibraryListItem = ({ workflowDTO }: Props) => {
               </Text>
             )}
           </Flex>
-          <Flex alignItems="center" w="full">
+          <Flex alignItems="center" w="full" h="50%">
             {workflowDTO.description ? (
               <Text fontSize="sm" noOfLines={1}>
                 {workflowDTO.description}