@databiosphere/findable-ui 40.0.0 → 41.0.0

package/lib/components/Filter/components/views/select/components/ListItemText/listItemText.styles.js

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { ListItemText } from "@mui/material";
+export const StyledListItemText = styled(ListItemText) `
+  align-items: center;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: 1fr auto;
+
+  > span {
+    min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
+  }
+`;

package/lib/components/Table/components/TableFeatures/ColumnFilter/columnFilter.js

@@ -1,12 +1,12 @@
-import { Checkbox, Grid, ListItemButton, ListItemText, Typography, } from "@mui/material";
-import React, { Fragment } from "react";
+import { Grid, Typography } from "@mui/material";
+import React, { Fragment, useCallback } from "react";
 import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
 import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
-import { CheckedIcon } from "../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
-import { UncheckedIcon } from "../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
 import { useMenu } from "../../../../common/Menu/hooks/useMenu";
 import { FilterCountChip } from "../../../../Filter/components/FilterCountChip/filterCountChip";
+import { ListItemButton } from "../../../../Filter/components/views/select/components/ListItemButton/listItemButton";
+import { SelectListItem } from "../../../../Filter/components/views/select/SelectListItem/selectListItem";
 import { getColumnHeader } from "../../../common/utils";
 import { getSortedFacetedValues } from "../../../featureOptions/facetedColumn/utils";
 import { StyledButton, StyledMenu } from "./columnFilter.styles";
@@ -18,18 +18,33 @@ import { updater } from "./utils";
  */
 export const ColumnFilter = ({ Button = StyledButton, className, column, ...props /* MuiMenuProps */ }) => {
     const { anchorEl, onClose, onOpen, open } = useMenu();
+    // Grab the unique values for the column.
     const facetedUniqueValues = column.getFacetedUniqueValues();
+    // Sort the values.
     const sortedValues = getSortedFacetedValues(facetedUniqueValues);
+    // Get the filter values.
     const filterValue = (column.getFilterValue() || []);
+    const onFilter = useCallback((value) => {
+        column.setFilterValue(updater(value));
+    }, [column]);
     return (React.createElement(Fragment, null,
-        React.createElement(Button, { key: column.id, disabled: sortedValues.length === 0, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen, open: open },
+        React.createElement(Button, { disabled: sortedValues.length === 0, endIcon: React.createElement(DropDownIcon, { color: SVG_ICON_PROPS.COLOR.INK_LIGHT }), onClick: onOpen, open: open },
             React.createElement(Grid, { ...GRID_PROPS },
                 getColumnHeader(column),
                 React.createElement(FilterCountChip, { count: filterValue.length }))),
         React.createElement(StyledMenu, { ...MENU_PROPS, ...props, className: className, anchorEl: anchorEl, onClose: onClose, open: open },
-            sortedValues.map(([value, occurrence]) => (React.createElement(ListItemButton, { key: String(value), selected: filterValue.includes(value), onClick: () => column.setFilterValue(updater(value)) },
-                React.createElement(Checkbox, { checked: filterValue.includes(value), checkedIcon: React.createElement(CheckedIcon, null), icon: React.createElement(UncheckedIcon, null) }),
-                React.createElement(ListItemText, { disableTypography: true, primary: React.createElement("span", null, String(value)), secondary: React.createElement(Typography, { color: TYPOGRAPHY_PROPS.COLOR.INK_LIGHT, variant: TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400 }, occurrence) })))),
+            sortedValues.map(([value, occurrence]) => {
+                const checked = filterValue.includes(value);
+                const onClick = () => onFilter(value);
+                const primary = String(value);
+                const secondary = String(occurrence);
+                const selected = checked;
+                return (React.createElement(SelectListItem, { key: primary, slotProps: {
+                        checkbox: { checked },
+                        listItemButton: { onClick, selected },
+                        listItemText: { primary, secondary },
+                    } }));
+            }),
             React.createElement(ListItemButton, { disabled: !column.getIsFiltered(), onClick: () => column.setFilterValue(undefined) },
                 React.createElement(Typography, { color: column.getIsFiltered()
                         ? TYPOGRAPHY_PROPS.COLOR.PRIMARY

package/lib/components/Table/components/TableFeatures/ColumnFilter/constants.js

@@ -9,8 +9,13 @@ export const MENU_PROPS = {
         horizontal: "right",
         vertical: "bottom",
     },
+    /* Prevents the browser from auto‑focusing the menu on open, which can trigger a scrollIntoView jump when the viewport has `scroll-padding-top` (e.g., on <html>). */
+    disableAutoFocus: true,
+    /* Skips restoring focus to the trigger on close to avoid a similar scroll adjustment with `scroll-padding-top`. */
+    disableRestoreFocus: true,
     marginThreshold: 8,
     slotProps: {
+        list: { component: "div" },
         paper: { variant: "menu" },
     },
     transformOrigin: {

package/lib/components/common/Button/constants.js

@@ -14,6 +14,10 @@ export const BUTTON_PROPS = {
         size: MUI_BUTTON_PROPS.SIZE.MEDIUM,
         variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,
     },
+    PRIMARY_TEXT: {
+        color: MUI_BUTTON_PROPS.COLOR.PRIMARY,
+        variant: MUI_BUTTON_PROPS.VARIANT.TEXT,
+    },
     SECONDARY_CONTAINED: {
         color: MUI_BUTTON_PROPS.COLOR.SECONDARY,
         variant: MUI_BUTTON_PROPS.VARIANT.CONTAINED,

package/lib/components/common/Drawer/provider/provider.d.ts

@@ -1,4 +1,2 @@
-import { ReactNode } from "react";
-export declare function DrawerProvider({ children, }: {
-    children: ReactNode | ReactNode[];
-}): JSX.Element;
+import { DrawerProviderProps } from "./types";
+export declare function DrawerProvider({ children }: DrawerProviderProps): JSX.Element;

package/lib/components/common/Drawer/provider/provider.js

@@ -1,8 +1,10 @@
 import React, { useCallback, useState } from "react";
 import { DrawerContext } from "./context";
-export function DrawerProvider({ children, }) {
+export function DrawerProvider({ children }) {
     const [open, setOpen] = useState(false);
     const onClose = useCallback(() => setOpen(false), []);
     const onOpen = useCallback(() => setOpen(true), []);
-    return (React.createElement(DrawerContext.Provider, { value: { onClose, onOpen, open } }, children));
+    return (React.createElement(DrawerContext.Provider, { value: { onClose, onOpen, open } }, typeof children === "function"
+        ? children({ onClose, onOpen, open })
+        : children));
 }

package/lib/components/common/Drawer/provider/types.d.ts

@@ -1,6 +1,10 @@
 import { DrawerProps } from "@mui/material";
-export type DrawerContextProps = Omit<DrawerProps, "onClose" | "onOpen" | "open"> & {
+import { ReactNode } from "react";
+export type DrawerContextProps = Omit<DrawerProps, "onClose"> & {
     onClose: () => void;
     onOpen: () => void;
     open: boolean;
 };
+export type DrawerProviderProps = {
+    children: ReactNode | ((props: DrawerContextProps) => ReactNode);
+};

package/lib/hooks/useCategoryFilter.d.ts

@@ -1,7 +1,7 @@
 import { CategoryConfig } from "../common/categories/config/types";
 import { Category } from "../common/categories/models/types";
 import { CategoryView, VIEW_KIND } from "../common/categories/views/types";
-import { CategoryKey, CategoryValueKey, Filters, SelectCategoryValue } from "../common/entities";
+import { CategoryKey, CategoryValueKey, ClearAll, Filters, SelectCategoryValue } from "../common/entities";
 /**
  * State backing filter functionality and calculations. Converted to view model for display.
  */
@@ -9,7 +9,7 @@ export type FilterState = Filters;
 /**
  * Function invoked when selected state of a category value is toggled or range is selected.
  */
-export type OnFilterFn = (categoryKey: CategoryKey, selectedCategoryValue: CategoryValueKey, selected: boolean, categorySection?: string, viewKind?: VIEW_KIND, searchTerm?: string) => void;
+export type OnFilterFn = (categoryKey: CategoryKey | ClearAll, selectedCategoryValue: CategoryValueKey, selected: boolean, categorySection?: string, viewKind?: VIEW_KIND, searchTerm?: string) => void;
 /**
  * Build view-specific models from filter state, to facilitate easy rendering.
  * @param categories - Categories, category value and their counts with the current filter applied.

package/lib/styles/common/mixins/breakpoints.d.ts

@@ -1,4 +1,6 @@
 import { ThemeProps } from "../../../theme/theme";
+export declare const bpDown820: ({ theme }: ThemeProps) => string;
+export declare const bpDown1024: ({ theme }: ThemeProps) => string;
 export declare const mediaDesktopSmallDown: ({ theme }: ThemeProps) => string;
 export declare const mediaDesktopSmallUp: ({ theme }: ThemeProps) => string;
 export declare const mediaDesktopUp: ({ theme }: ThemeProps) => string;

package/lib/styles/common/mixins/breakpoints.js

@@ -1,4 +1,6 @@
 import { DESKTOP, DESKTOP_SM, TABLET } from "../../../theme/common/breakpoints";
+export const bpDown820 = ({ theme }) => theme.breakpoints.down(820);
+export const bpDown1024 = ({ theme }) => theme.breakpoints.down(1024);
 export const mediaDesktopSmallDown = ({ theme }) => theme.breakpoints.down(DESKTOP_SM);
 export const mediaDesktopSmallUp = ({ theme }) => theme.breakpoints.up(DESKTOP_SM);
 export const mediaDesktopUp = ({ theme }) => theme.breakpoints.up(DESKTOP);

package/lib/styles/common/mui/typography.js

@@ -10,11 +10,13 @@ const VARIANT = {
     TEXT_BODY_400: "text-body-400",
     TEXT_BODY_400_2_LINES: "text-body-400-2lines",
     TEXT_BODY_500: "text-body-500",
+    TEXT_BODY_LARGE_500: "text-body-large-500",
     TEXT_BODY_SMALL_400: "text-body-small-400",
     TEXT_BODY_SMALL_500: "text-body-small-500",
     TEXT_HEADING_LARGE: "text-heading-large",
     TEXT_HEADING_SMALL: "text-heading-small",
     TEXT_HEADING_XSMALL: "text-heading-xsmall",
+    TEXT_UPPERCASE_500: "text-uppercase-500",
 };
 export const TYPOGRAPHY_PROPS = {
     COLOR,

package/lib/utils/typeGuards.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns true if the value is a string, false otherwise.
+ * @param value - Value.
+ * @returns true if the value is a string, false otherwise.
+ */
+export declare function isValueString(value: unknown): value is string;

package/lib/utils/typeGuards.js

@@ -0,0 +1,8 @@
+/**
+ * Returns true if the value is a string, false otherwise.
+ * @param value - Value.
+ * @returns true if the value is a string, false otherwise.
+ */
+export function isValueString(value) {
+    return typeof value === "string";
+}

package/lib/views/ExploreView/exploreView.js

@@ -5,11 +5,13 @@ import { DrawerProvider } from "../../components/common/Drawer/provider/provider
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import { Filters, } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
+import { SURFACE_TYPE } from "../../components/Filter/components/surfaces/types";
 import { Index as IndexView } from "../../components/Index/index";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
 import { SidebarTools } from "../../components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles";
 import { Sidebar } from "../../components/Layout/components/Sidebar/sidebar";
 import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
+import { useBreakpoint } from "../../hooks/useBreakpoint";
 import { useConfig } from "../../hooks/useConfig";
 import { useEntityList } from "../../hooks/useEntityList";
 import { useExploreState } from "../../hooks/useExploreState";
@@ -21,6 +23,7 @@ import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { TEST_IDS } from "../../tests/testIds";
 import { buildStateSyncManagerContext } from "./utils";
 export const ExploreView = (props) => {
+    const { mdDown } = useBreakpoint();
     const { config, entityConfig } = useConfig(); // Get app level config.
     const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
     const { trackingConfig } = config;
@@ -97,7 +100,7 @@ export const ExploreView = (props) => {
                 React.createElement(SidebarLabel, { label: "Filters" }),
                 React.createElement(ClearAllFilters, null),
                 React.createElement(SearchAllFilters, { categoryViews: categoryViews, onFilter: onFilterChange.bind(null, true) })),
-            React.createElement(Filters, { categoryFilters: categoryFilters, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig?.trackFilterOpened }))),
+            React.createElement(Filters, { categoryFilters: categoryFilters, onFilter: onFilterChange.bind(null, false), surfaceType: mdDown ? SURFACE_TYPE.DRAWER : SURFACE_TYPE.MENU, trackFilterOpened: trackingConfig?.trackFilterOpened }))),
         React.createElement(IndexView, { className: props.className, categoryFilters: categoryFilters, entityListType: entityListType, entityName: label, loading: loading })));
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "40.0.0",
+  "version": "41.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/common/entities.ts

@@ -23,6 +23,16 @@ export interface Attribute {
  */
 export type CategoryKey = string;
 
+/**
+ * Clear all filters key.
+ */
+export const CLEAR_ALL = "CLEAR_ALL" as const;
+
+/**
+ * Clear all filters type.
+ */
+export type ClearAll = typeof CLEAR_ALL;
+
 /**
  * View model of category tag.
  */

package/src/components/DataDictionary/components/Description/description.styles.ts

@@ -5,10 +5,10 @@ import {
   mediaTabletUp,
 } from "../../../../styles/common/mixins/breakpoints";
 import { textHeadingSmall } from "../../../../styles/common/mixins/fonts";
-import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 import { MarkdownRenderer } from "../../../MarkdownRenderer/markdownRenderer";
 
-export const StyledRoundedPaper = styled(RoundedPaper)`
+export const StyledFluidPaper = styled(FluidPaper)`
   padding: 20px;
 
   ${mediaTabletDown} {

package/src/components/DataDictionary/components/Description/description.tsx

@@ -1,8 +1,5 @@
 import React from "react";
-import {
-  StyledMarkdownRenderer,
-  StyledRoundedPaper,
-} from "./description.styles";
+import { StyledFluidPaper, StyledMarkdownRenderer } from "./description.styles";
 import { DescriptionProps } from "./types";
 
 export const Description = ({
@@ -10,8 +7,8 @@ export const Description = ({
 }: DescriptionProps): JSX.Element | null => {
   if (!description) return null;
   return (
-    <StyledRoundedPaper elevation={0}>
+    <StyledFluidPaper elevation={0}>
       <StyledMarkdownRenderer value={description} />
-    </StyledRoundedPaper>
+    </StyledFluidPaper>
   );
 };

package/src/components/DataDictionary/components/Entity/entity.styles.ts

@@ -1,8 +1,13 @@
 import styled from "@emotion/styled";
 import { Typography } from "@mui/material";
+import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
 
 export const StyledTypography = styled(Typography)`
   &:hover a {
     opacity: 1;
   }
+
+  ${mediaTabletDown} {
+    margin: 0 16px;
+  }
 ` as typeof Typography;

package/src/components/DataDictionary/components/Filters/components/ColumnFilterTags/columnFilterTags.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@mui/material";
+import { Button, Theme, useMediaQuery } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../../../../../common/entities";
@@ -14,9 +14,12 @@ export const ColumnFilterTags = <T extends RowData = Attribute>({
 }: ColumnFilterTagsProps<T>): JSX.Element | null => {
   const { getAllColumns, resetColumnFilters } = table;
   const columns = getAllColumns().filter((column) => column.getIsFiltered());
+  const isDrawer = useMediaQuery((theme: Theme) => theme.breakpoints.down(820));
 
   if (columns.length === 0) return null;
 
+  if (isDrawer) return null;
+
   return (
     <StyledGrid className={className} {...GRID_PROPS}>
       {columns.map((column) => (

package/src/components/DataDictionary/components/Filters/components/ColumnFilters/columnFilters.tsx

@@ -1,8 +1,10 @@
-import { ButtonGroup } from "@mui/material";
+import { ButtonGroup, Theme, useMediaQuery } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { Attribute } from "../../../../../../common/entities";
 import { BUTTON_GROUP_PROPS } from "../../../../../common/ButtonGroup/constants";
+import { ColumnFiltersAdapter } from "../../../../../Filter/components/adapters/tanstack/ColumnFiltersAdapter/columnFiltersAdapter";
+import { Drawer } from "../../../../../Filter/components/surfaces/drawer/Drawer/drawer";
 import { ColumnFilter } from "../../../../../Table/components/TableFeatures/ColumnFilter/columnFilter";
 import { ColumnFiltersProps } from "./types";
 
@@ -12,9 +14,18 @@ export const ColumnFilters = <T extends RowData = Attribute>({
   const columns = table.getAllColumns();
   const columnFilters = columns.filter((column) => column.getCanFilter());
   const enableColumnFilters = table.options.enableColumnFilters;
+  const isDrawer = useMediaQuery((theme: Theme) => theme.breakpoints.down(820));
 
   if (!enableColumnFilters) return null;
 
+  if (isDrawer)
+    return (
+      <ColumnFiltersAdapter
+        table={table}
+        renderSurface={(props) => <Drawer {...props} />}
+      />
+    );
+
   return (
     <ButtonGroup {...BUTTON_GROUP_PROPS.SECONDARY_OUTLINED}>
       {columnFilters.map((column) => (

package/src/components/DataDictionary/components/Filters/filters.styles.ts

@@ -1,14 +1,9 @@
 import styled from "@emotion/styled";
 import { Grid } from "@mui/material";
-import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
 
 export const StyledGrid = styled(Grid)`
   align-items: center;
   display: grid;
   gap: 16px;
   grid-template-columns: 1fr auto;
-
-  ${mediaTabletDown} {
-    grid-template-columns: 1fr;
-  }
 `;

package/src/components/DataDictionary/components/Filters/stories/constants.ts

@@ -47,3 +47,5 @@ export const REQUIRED: PartialColumn = {
     ]),
   id: "required",
 };
+
+export const COLUMNS = [DESCRIPTION, REQUIRED, BIONETWORK, EXAMPLE];

package/src/components/DataDictionary/components/Filters/stories/filters.stories.tsx

@@ -4,9 +4,10 @@ import { Meta, StoryObj } from "@storybook/react";
 import { functionalUpdate, Table } from "@tanstack/react-table";
 import React from "react";
 import { Filters } from "../filters";
-import { BIONETWORK, DESCRIPTION, EXAMPLE, REQUIRED } from "./constants";
+import { COLUMNS } from "./constants";
 import { useFilterStore, useGlobalFilterStore } from "./hook";
 import { PartialColumn } from "./types";
+import { buildColumnFilters } from "./utils";
 
 const meta: Meta<typeof Filters> = {
   component: Filters,
@@ -27,6 +28,9 @@ const DefaultStory = (): JSX.Element => {
   const { filterStore, setFilterStore } = useFilterStore();
   const { globalFilter, setGlobalFilter } = useGlobalFilterStore();
 
+  // Builds column filters from filter store.
+  const columnFilters = buildColumnFilters(filterStore);
+
   const makeColumn = (column: PartialColumn): PartialColumn => ({
     ...column,
     getFilterValue: () => filterStore[column.id],
@@ -39,10 +43,13 @@ const DefaultStory = (): JSX.Element => {
     },
   });
 
+  // Make the columns.
+  const columns = COLUMNS.map(makeColumn);
+
   const table = {
-    getAllColumns: () =>
-      [DESCRIPTION, REQUIRED, BIONETWORK, EXAMPLE].map(makeColumn),
-    getState: () => ({ globalFilter }),
+    getAllColumns: () => columns,
+    getColumn: (columnId: string) => columns.find(({ id }) => id === columnId)!,
+    getState: () => ({ columnFilters, globalFilter }),
     options: { enableColumnFilters: true, enableGlobalFilter: true },
     setGlobalFilter,
   } as Table<unknown>;

package/src/components/DataDictionary/components/Filters/stories/utils.ts

@@ -0,0 +1,15 @@
+import { ColumnFiltersState } from "@tanstack/react-table";
+
+/**
+ * Builds column filters from filter store.
+ * @param filterStore - The filter store.
+ * @returns The column filters.
+ */
+export function buildColumnFilters(
+  filterStore: Record<string, unknown>
+): ColumnFiltersState {
+  return Object.entries(filterStore).reduce((acc, [id, value]) => {
+    if (!value) return acc;
+    return [...acc, { id, value }];
+  }, [] as ColumnFiltersState);
+}

package/src/components/DataDictionary/components/Layout/components/EntitiesLayout/entitiesLayout.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
-import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpDown1024 } from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
@@ -15,7 +15,7 @@ export const Layout = styled("div")<LayoutSpacing>`
   padding-top: ${({ top }) => top}px;
   z-index: 1; /* not required, but helpful in that the entities are always on top */
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     grid-column: 1;
     grid-row: auto;
     padding-top: ${PT}px;

package/src/components/DataDictionary/components/Layout/components/FiltersLayout/filtersLayout.styles.ts

@@ -1,7 +1,10 @@
 import styled from "@emotion/styled";
 import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
 import { PALETTE } from "../../../../../../styles/common/constants/palette";
-import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import {
+  bpDown1024,
+  mediaTabletDown,
+} from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 
 const PB = LAYOUT_SPACING.FILTERS_PADDING_BOTTOM; /* bottom padding */
@@ -21,10 +24,14 @@ export const Layout = styled("div")<LayoutSpacing>`
   top: 0;
   z-index: 2; /* required, filters should be on top of entities */
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     grid-column: 1;
     grid-row: auto;
     padding-top: ${PT}px;
     position: relative;
   }
+
+  ${mediaTabletDown} {
+    margin: 0 16px;
+  }
 `;

package/src/components/DataDictionary/components/Layout/components/OutlineLayout/outlineLayout.styles.ts

@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
-import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import { bpDown1024 } from "../../../../../../styles/common/mixins/breakpoints";
 import { LAYOUT_SPACING } from "../../constants";
 
 const PB = LAYOUT_SPACING.CONTENT_PADDING_BOTTOM; /* bottom padding */
@@ -19,7 +19,7 @@ export const Layout = styled("div")<LayoutSpacing>`
   position: sticky;
   top: 0;
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     display: none;
   }
 `;

package/src/components/DataDictionary/components/Layout/components/TitleLayout/titleLayout.styles.ts

@@ -1,6 +1,9 @@
 import styled from "@emotion/styled";
 import { LayoutSpacing } from "../../../../../../hooks/UseLayoutSpacing/types";
-import { mediaTabletDown } from "../../../../../../styles/common/mixins/breakpoints";
+import {
+  bpDown1024,
+  mediaTabletDown,
+} from "../../../../../../styles/common/mixins/breakpoints";
 
 export const Layout = styled("div")<LayoutSpacing>`
   grid-column: 1 / -1;
@@ -11,9 +14,13 @@ export const Layout = styled("div")<LayoutSpacing>`
   top: 0;
   z-index: 4;
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     grid-column: 1;
     grid-row: auto;
     position: relative;
   }
+
+  ${mediaTabletDown} {
+    margin: 0 16px;
+  }
 `;

package/src/components/DataDictionary/components/Table/table.styles.ts

@@ -1,8 +1,8 @@
 import styled from "@emotion/styled";
 import { PALETTE } from "../../../../styles/common/constants/palette";
-import { RoundedPaper } from "../../../common/Paper/components/RoundedPaper/roundedPaper";
+import { FluidPaper } from "../../../common/Paper/components/FluidPaper/fluidPaper";
 
-export const StyledRoundedPaper = styled(RoundedPaper)`
+export const StyledFluidPaper = styled(FluidPaper)`
   background-color: ${PALETTE.SMOKE_MAIN};
   display: grid;
   gap: 1px;

package/src/components/DataDictionary/components/Table/table.tsx

@@ -1,34 +1,38 @@
 import { TableContainer } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint";
 import { TableBody } from "../../../Detail/components/Table/components/TableBody/tableBody";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
 import { GridTable } from "../../../Table/table.styles";
 import { getColumnTrackSizing } from "../../../TableCreator/options/columnTrackSizing/utils";
-import { StyledRoundedPaper } from "./table.styles";
+import { StyledFluidPaper } from "./table.styles";
 import { TableProps } from "./types";
 
 export const Table = <T extends RowData>({
   row,
   table,
 }: TableProps<T>): JSX.Element => {
+  const { smDown } = useBreakpoint();
+  const rowDirection = smDown ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
   return (
-    <StyledRoundedPaper elevation={0}>
+    <StyledFluidPaper elevation={0}>
       <TableContainer>
         <GridTable
+          collapsable
           gridTemplateColumns={getColumnTrackSizing(
             table.getVisibleFlatColumns()
           )}
         >
           <TableHead tableInstance={table} />
           <TableBody
-            rowDirection={ROW_DIRECTION.DEFAULT}
+            rowDirection={rowDirection}
             rows={row.getLeafRows()}
             tableInstance={table}
           />
         </GridTable>
       </TableContainer>
-    </StyledRoundedPaper>
+    </StyledFluidPaper>
   );
 };

package/src/components/DataDictionary/components/Title/title.styles.ts

@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../../../styles/common/mixins/breakpoints";
+import { bpDown820 } from "../../../../styles/common/mixins/breakpoints";
 import { Title } from "../../../common/Title/title";
 
 export const StyledTitle = styled(Title)`
@@ -10,7 +10,7 @@ export const StyledTitle = styled(Title)`
     line-height: 42px;
     margin: 24px 0 8px;
 
-    ${mediaTabletDown} {
+    ${bpDown820} {
       font-size: 26px;
       line-height: 34px;
     }

package/src/components/DataDictionary/dataDictionary.styles.ts

@@ -1,21 +1,23 @@
-import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { mediaTabletDown } from "../../styles/common/mixins/breakpoints";
+import {
+  bpDown1024,
+  mediaTabletDown,
+} from "../../styles/common/mixins/breakpoints";
 
-export const grid = css`
+export const View = styled("div")`
   column-gap: 24px;
   display: grid;
-  grid-template-columns: 242px 1fr;
-`;
-
-export const View = styled("div")`
-  ${grid};
   flex: 1;
+  grid-template-columns: 242px 1fr;
   margin: 0 24px;
   position: relative;
 
-  ${mediaTabletDown} {
+  ${bpDown1024} {
     grid-template-columns: 1fr;
     margin: 0 16px;
   }
+
+  ${mediaTabletDown} {
+    margin: 0;
+  }
 `;