VUU-47 fix layoutList styling

ScottLogic · Oct 3, 2023 · 2eac507 · 2eac507
1 parent 731b03d
commit 2eac507
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
@@ -1,5 +1,7 @@
 .vuuLayoutList {
     align-self: stretch;
+    height: 100%;
+    overflow: hidden;
 }
 
 .vuuLayoutList-header {

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.tsx b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.tsx
@@ -41,25 +41,21 @@ export const LayoutsList = (props: HTMLAttributes<HTMLDivElement>) => {
                 source={Object.entries(layoutsByGroup)}
                 ListItem={({ item }) => <>
                     <div className={`${classBase}-groupName`}>{item?.[0]}</div>
-                    <List<LayoutMetadata>
-                        height='fit-content'
-                        source={item?.[1]}
-                        ListItem={({ item: layout }) =>
-                            <div
-                                className={`${classBase}-layoutContainer`}
-                                key={layout?.id}
-                                onClick={() => handleLoadLayout(layout?.id)}
-                            >
-                                <img className={`${classBase}-screenshot`} src={layout?.screenshot} />
-                                <div>
-                                    <div className={`${classBase}-layoutName`}>{layout?.name}</div>
-                                    <div className={`${classBase}-layoutDetails`}>
-                                        <div>{`${layout?.user}, ${layout?.date}`}</div>
-                                    </div>
+                    {item?.[1].map(layout =>
+                        <div
+                            className={`${classBase}-layoutContainer`}
+                            key={layout?.id}
+                            onClick={() => handleLoadLayout(layout?.id)}
+                        >
+                            <img className={`${classBase}-screenshot`} src={layout?.screenshot} />
+                            <div>
+                                <div className={`${classBase}-layoutName`}>{layout?.name}</div>
+                                <div className={`${classBase}-layoutDetails`}>
+                                    <div>{`${layout?.user}, ${layout?.date}`}</div>
                                 </div>
                             </div>
-                        }
-                    />
+                        </div>
+                    )}
                 </>
                 }
             />