diff --git a/frontend/src/metabase/collections/components/CollectionContent/CollectionContent.styled.tsx b/frontend/src/metabase/collections/components/CollectionContent/CollectionContent.styled.tsx index c805acfd9ef09b8cf6c31c838cd2afbf86b221b4..c8d22c20c13105d4d6d97c65b3ca708e3a4fa6ae 100644 --- a/frontend/src/metabase/collections/components/CollectionContent/CollectionContent.styled.tsx +++ b/frontend/src/metabase/collections/components/CollectionContent/CollectionContent.styled.tsx @@ -4,11 +4,6 @@ export const CollectionRoot = styled.div` height: 100%; overflow: hidden; position: relative; - container-name: ItemsTableContainer; - container-type: inline-size; - // NOTE: The BulkActionsToast is centered within this container. - // If this div ever ceases to be a container one day, let's restore the previously - // existing margin-left fix for the toast so it is still centered when the nav sidebar is open `; export const CollectionMain = styled.div` @@ -24,6 +19,9 @@ export interface CollectionTableProps { export const CollectionTable = styled.div<CollectionTableProps>` margin-top: ${props => (props.hasPinnedItems ? "2rem" : "")}; + + container-name: ItemsTableContainer; + container-type: inline-size; `; export const CollectionEmptyContent = styled.div` diff --git a/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx b/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx index 10d1b7bcc5d6d1ba6cc1a51c8a4698b7e7d7adf9..91aa3f7238caf04d1aa0be586bcfd0f0de798b2a 100644 --- a/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx +++ b/frontend/src/metabase/collections/components/CollectionContent/CollectionContentView.tsx @@ -350,41 +350,43 @@ export const CollectionContentView = ({ } return ( - <CollectionTable data-testid="collection-table"> - <ItemsTable - databases={databases} - bookmarks={bookmarks} - createBookmark={createBookmark} - deleteBookmark={deleteBookmark} - items={unpinnedItems} - collection={collection} - sortingOptions={unpinnedItemsSorting} - onSortingOptionsChange={ - handleUnpinnedItemsSortingChange - } - selectedItems={selected} - hasUnselected={hasUnselected} - getIsSelected={getIsSelected} - onToggleSelected={toggleItem} - onDrop={clear} - onMove={handleMove} - onCopy={handleCopy} - onSelectAll={handleSelectAll} - onSelectNone={clear} - /> - <div className={cx(CS.flex, CS.justifyEnd, CS.my3)}> - {hasPagination && ( - <PaginationControls - showTotal - page={page} - pageSize={PAGE_SIZE} - total={metadata.total} - itemsLength={unpinnedItems.length} - onNextPage={handleNextPage} - onPreviousPage={handlePreviousPage} - /> - )} - </div> + <> + <CollectionTable data-testid="collection-table"> + <ItemsTable + databases={databases} + bookmarks={bookmarks} + createBookmark={createBookmark} + deleteBookmark={deleteBookmark} + items={unpinnedItems} + collection={collection} + sortingOptions={unpinnedItemsSorting} + onSortingOptionsChange={ + handleUnpinnedItemsSortingChange + } + selectedItems={selected} + hasUnselected={hasUnselected} + getIsSelected={getIsSelected} + onToggleSelected={toggleItem} + onDrop={clear} + onMove={handleMove} + onCopy={handleCopy} + onSelectAll={handleSelectAll} + onSelectNone={clear} + /> + <div className={cx(CS.flex, CS.justifyEnd, CS.my3)}> + {hasPagination && ( + <PaginationControls + showTotal + page={page} + pageSize={PAGE_SIZE} + total={metadata.total} + itemsLength={unpinnedItems.length} + onNextPage={handleNextPage} + onPreviousPage={handlePreviousPage} + /> + )} + </div> + </CollectionTable> <CollectionBulkActions selected={selected} collection={collection} @@ -396,7 +398,7 @@ export const CollectionContentView = ({ selectedItems={selectedItems} selectedAction={selectedAction} /> - </CollectionTable> + </> ); }} </Search.ListLoader> diff --git a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx index 898096be8941e9b7991ada1938f27b36de7d9a34..1f13551c861f3e822a7bb2cdb9644feb6eee2c4c 100644 --- a/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx +++ b/frontend/src/metabase/components/BulkActionBar/BulkActionBar.styled.tsx @@ -2,6 +2,7 @@ import styled from "@emotion/styled"; import Card from "metabase/components/Card"; import { alpha, color } from "metabase/lib/colors"; +import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants"; import { space } from "metabase/styled-components/theme"; import { Button, DEFAULT_POPOVER_Z_INDEX } from "metabase/ui"; @@ -12,6 +13,8 @@ export const BulkActionsToast = styled.div<{ isNavbarOpen: boolean }>` position: fixed; bottom: 0; left: 50%; + margin-left: ${props => + props.isNavbarOpen ? `${parseInt(NAV_SIDEBAR_WIDTH) / 2}px` : "0"}; margin-bottom: ${space(2)}; z-index: ${BULK_ACTIONS_Z_INDEX}; `;