diff --git a/packages/sanity-studio/src/plugins/navigator/components/List.tsx b/packages/sanity-studio/src/plugins/navigator/components/List.tsx index 64267015..97103a46 100644 --- a/packages/sanity-studio/src/plugins/navigator/components/List.tsx +++ b/packages/sanity-studio/src/plugins/navigator/components/List.tsx @@ -30,11 +30,11 @@ const ListWrapper = styled(Box)` border: 2px solid transparent; padding: 2px; border-radius: 8px; - width: 100%; height: 88vh; overflow-y: auto; margin: 0; display: flex; + gap: 0.25rem; flex-direction: column; `; @@ -174,39 +174,25 @@ const List = ({ loading }: { loading: boolean }) => { aria-label="Pages and folders" aria-activedescendant={`item-${activeDescendant}`} > -
- {virtualizer.getVirtualItems().map((virtualChild) => { - const item = items[virtualChild.index]; - return ( - - ); - })} -
+ {virtualizer.getVirtualItems().map((virtualChild) => { + const item = items[virtualChild.index]; + return ( + + ); + })} ); }; -const ListItem = ({ - item, - active, - setActive, - idx, - virtualChild, -}: ListItemProps) => { +const ListItem = ({ item, active, setActive, idx }: ListItemProps) => { const { defaultLocaleId, setCurrentDir, currentDir } = useNavigator(); const innerRef = useRef(null); const listItemId = `item-${idx}`; @@ -278,14 +264,6 @@ const ListItem = ({ aria-selected={listItemId === active} currentScheme={scheme} isPreviewed={previewed} - style={{ - position: "absolute", - top: 0, - left: 0, - width: "100%", - height: `${virtualChild?.size}px`, - transform: `translateY(${virtualChild?.start}px)`, - }} > ) : ( <>{!isLoading ? fallback : null}