From f6d5e930201723079eb70dba9ed8a8145cadc390 Mon Sep 17 00:00:00 2001
From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com>
Date: Thu, 20 Jul 2023 14:16:32 +1200
Subject: [PATCH] fix: Model List not scrolling through checkpoints (#3849)

---
 .../subpanels/ModelManagerPanel/ModelList.tsx | 81 ++++++++++---------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx
index c9f8384b9a..722bd83b6e 100644
--- a/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/tabs/ModelManager/subpanels/ModelManagerPanel/ModelList.tsx
@@ -75,42 +75,49 @@ const ModelList = (props: ModelListProps) => {
           labelPos="side"
         />
 
-        {['images', 'diffusers'].includes(modelFormatFilter) &&
-          filteredDiffusersModels.length > 0 && (
-            <StyledModelContainer>
-              <Flex sx={{ gap: 2, flexDir: 'column' }}>
-                <Text variant="subtext" fontSize="sm">
-                  Diffusers
-                </Text>
-                {filteredDiffusersModels.map((model) => (
-                  <ModelListItem
-                    key={model.id}
-                    model={model}
-                    isSelected={selectedModelId === model.id}
-                    setSelectedModelId={setSelectedModelId}
-                  />
-                ))}
-              </Flex>
-            </StyledModelContainer>
-          )}
-        {['images', 'checkpoint'].includes(modelFormatFilter) &&
-          filteredCheckpointModels.length > 0 && (
-            <StyledModelContainer>
-              <Flex sx={{ gap: 2, flexDir: 'column' }}>
-                <Text variant="subtext" fontSize="sm">
-                  Checkpoint
-                </Text>
-                {filteredCheckpointModels.map((model) => (
-                  <ModelListItem
-                    key={model.id}
-                    model={model}
-                    isSelected={selectedModelId === model.id}
-                    setSelectedModelId={setSelectedModelId}
-                  />
-                ))}
-              </Flex>
-            </StyledModelContainer>
-          )}
+        <Flex
+          flexDirection="column"
+          gap={4}
+          maxHeight={window.innerHeight - 280}
+          overflow="scroll"
+        >
+          {['images', 'diffusers'].includes(modelFormatFilter) &&
+            filteredDiffusersModels.length > 0 && (
+              <StyledModelContainer>
+                <Flex sx={{ gap: 2, flexDir: 'column' }}>
+                  <Text variant="subtext" fontSize="sm">
+                    Diffusers
+                  </Text>
+                  {filteredDiffusersModels.map((model) => (
+                    <ModelListItem
+                      key={model.id}
+                      model={model}
+                      isSelected={selectedModelId === model.id}
+                      setSelectedModelId={setSelectedModelId}
+                    />
+                  ))}
+                </Flex>
+              </StyledModelContainer>
+            )}
+          {['images', 'checkpoint'].includes(modelFormatFilter) &&
+            filteredCheckpointModels.length > 0 && (
+              <StyledModelContainer>
+                <Flex sx={{ gap: 2, flexDir: 'column' }}>
+                  <Text variant="subtext" fontSize="sm">
+                    Checkpoints
+                  </Text>
+                  {filteredCheckpointModels.map((model) => (
+                    <ModelListItem
+                      key={model.id}
+                      model={model}
+                      isSelected={selectedModelId === model.id}
+                      setSelectedModelId={setSelectedModelId}
+                    />
+                  ))}
+                </Flex>
+              </StyledModelContainer>
+            )}
+        </Flex>
       </Flex>
     </Flex>
   );
@@ -146,8 +153,6 @@ const StyledModelContainer = (props: PropsWithChildren) => {
   return (
     <Flex
       flexDirection="column"
-      maxHeight={window.innerHeight - 280}
-      overflow="scroll"
       gap={4}
       borderRadius={4}
       p={4}