From 6faeceed0c8e5f22c319422aaad0452846cd75ca Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Tue, 15 Oct 2024 11:04:21 -0400 Subject: [PATCH 1/2] make Dialog content scrollable --- frontends/ol-components/src/components/Dialog/Dialog.tsx | 4 +++- .../src/components/FormDialog/FormDialog.tsx | 1 - .../src/components/ThemeProvider/ThemeProvider.tsx | 8 +++++++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/frontends/ol-components/src/components/Dialog/Dialog.tsx b/frontends/ol-components/src/components/Dialog/Dialog.tsx index b90fbfde7b..9ee8b4571f 100644 --- a/frontends/ol-components/src/components/Dialog/Dialog.tsx +++ b/frontends/ol-components/src/components/Dialog/Dialog.tsx @@ -23,7 +23,9 @@ const Header = styled.div` ` const Content = styled.div` - margin: 28px 28px 40px; + margin: 28px; + min-height: 0; + overflow: auto; ` const DialogActions = styled(MuiDialogActions)` diff --git a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx index 85d7cbb281..3f82e535d2 100644 --- a/frontends/ol-components/src/components/FormDialog/FormDialog.tsx +++ b/frontends/ol-components/src/components/FormDialog/FormDialog.tsx @@ -8,7 +8,6 @@ const FormContent = styled.div` flex-direction: column; gap: 20px; width: 100%; - margin-bottom: -12px; ` interface FormDialogProps { /** diff --git a/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx b/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx index f2bb97970d..e5783bf93e 100644 --- a/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx +++ b/frontends/ol-components/src/components/ThemeProvider/ThemeProvider.tsx @@ -77,7 +77,13 @@ const themeOptions: ThemeOptions = { styleOverrides: { paper: { borderRadius: "4px" } }, }, MuiAutocomplete: { - styleOverrides: { paper: { borderRadius: "4px" } }, + styleOverrides: { + paper: { borderRadius: "4px" }, + // Mui puts paddingRight: 2px, marginRight: -2px on the popupIndicator, + // which causes the browser to show a horizontal scrollbar on overflow + // containers when a scrollbar isn't really necessary. + popupIndicator: { paddingRight: 0, marginRight: 0 }, + }, }, MuiChip: chips.chipComponent, }, From ef3d6fe535d96b451e1fc3d65db0593e90439f81 Mon Sep 17 00:00:00 2001 From: Chris Chudzicki Date: Tue, 15 Oct 2024 11:05:28 -0400 Subject: [PATCH 2/2] increase addtolistdialog query size --- .../page-components/Dialogs/AddToListDialog.test.tsx | 7 +++++-- .../src/page-components/Dialogs/AddToListDialog.tsx | 12 +++++------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.test.tsx b/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.test.tsx index c6f9e4755f..b197330469 100644 --- a/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.test.tsx +++ b/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.test.tsx @@ -64,7 +64,10 @@ const setupLearningPaths = ({ urls.learningResources.details({ id: resource.id }), resource, ) - setMockResponse.get(urls.learningPaths.list(), paginatedLearningPaths) + setMockResponse.get( + urls.learningPaths.list({ limit: 100 }), + paginatedLearningPaths, + ) const view = renderWithProviders(null) if (dialogOpen) { act(() => { @@ -100,7 +103,7 @@ const setupUserLists = ({ urls.learningResources.details({ id: resource.id }), resource, ) - setMockResponse.get(urls.userLists.list(), paginatedUserLists) + setMockResponse.get(urls.userLists.list({ limit: 100 }), paginatedUserLists) const view = renderWithProviders(null) if (dialogOpen) { act(() => { diff --git a/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.tsx b/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.tsx index 239b34563e..060dd7d1b0 100644 --- a/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.tsx +++ b/frontends/mit-learn/src/page-components/Dialogs/AddToListDialog.tsx @@ -14,11 +14,7 @@ import { usePostHog } from "posthog-js/react" import * as NiceModal from "@ebay/nice-modal-react" -import { - type LearningPathResource, - type LearningResource, - type UserList, -} from "api" +import type { LearningPathResource, LearningResource, UserList } from "api" import { useLearningResourceSetUserListRelationships, @@ -31,6 +27,8 @@ import { manageListDialogs } from "@/page-components/ManageListDialogs/ManageLis import { ListType } from "api/constants" import { useFormik } from "formik" +const LIST_LIMIT = 100 + const ResourceTitle = styled.span({ fontStyle: "italic", }) @@ -202,7 +200,7 @@ const AddToLearningPathDialogInner: React.FC = ({ }) => { const resourceQuery = useLearningResourcesDetail(resourceId) const resource = resourceQuery.data - const listsQuery = useLearningPathsList() + const listsQuery = useLearningPathsList({ limit: LIST_LIMIT }) const isReady = !!(resource && listsQuery.isSuccess) const lists = listsQuery.data?.results ?? [] @@ -221,7 +219,7 @@ const AddToUserListDialogInner: React.FC = ({ }) => { const resourceQuery = useLearningResourcesDetail(resourceId) const resource = resourceQuery.data - const listsQuery = useUserListList() + const listsQuery = useUserListList({ limit: LIST_LIMIT }) const isReady = !!(resource && listsQuery.isSuccess) const lists = listsQuery.data?.results ?? []