Make add to list dialog scrollable (#1689)

* make Dialog content scrollable

* increase addtolistdialog query size

Author: ChristopherChudzicki

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(() => {

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<AddToListDialogProps> = ({
 }) => {
   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<AddToListDialogProps> = ({
 }) => {
   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 ?? []

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)`

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 {
   /**

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,
   },