Try fixing full-screen modal height so contents can scroll (#73150)

Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org> Co-authored-by: andrewserong <andrewserong@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org> Co-authored-by: Mayank-Tripathi32 <mayanktripathi32@git.wordpress.org>

Author: 6 people

packages/components/CHANGELOG.md

@@ -16,6 +16,8 @@
 - `Card`, `CardHeader`, `CardBody` and `CardFooter`: Add support for directional padding through object-based size prop, allowing independent control of padding for each side ([#72511](https://github.com/WordPress/gutenberg/pull/72511)).
 - `CustomSelectControl`: Fix the options with the same name are shown as the selected option ([#72189](https://github.com/WordPress/gutenberg/pull/72189)).
 - `NumberControl`: Fix crash when min prop is string and step prop contains decimal ([#73107](https://github.com/WordPress/gutenberg/pull/73107)).
+- `Modal`: Fix full-screen modal height to allow contents to scroll properly ([#73150](https://github.com/WordPress/gutenberg/pull/73150)).
+
 
 ### Internal
 

packages/components/src/modal/style.scss

@@ -106,6 +106,20 @@
 @include break-large() {
 max-height: 70%;
 }
+
+&.is-full-screen {
+// When full screen, make sure the children container is full height.
+.components-modal__content {
+display: flex;
+// If this container is scrollable, bottom padding won't apply so we use margin instead.
+margin-bottom: $grid-unit-40;
+padding-bottom: 0;
+
+> :last-child {
+flex: 1;
+}
+}
+}
 }
 
 @keyframes components-modal__appear-animation {

packages/dataviews/src/stories/dataviews-picker.story.tsx

@@ -271,18 +271,16 @@ export const WithModal = ( {
 isFullScreen={ false }
 size="fill"
 >
-<div style={ { padding: '16px' } }>
-<DataViewsPickerContent
-perPageSizes={ perPageSizes }
-isMultiselectable={ isMultiselectable }
-isGrouped={ isGrouped }
-infiniteScrollEnabled={ infiniteScrollEnabled }
-actions={ modalActions }
-selection={ selectedItems.map( ( item ) =>
-String( item.id )
-) }
-/>
-</div>
+<DataViewsPickerContent
+perPageSizes={ perPageSizes }
+isMultiselectable={ isMultiselectable }
+isGrouped={ isGrouped }
+infiniteScrollEnabled={ infiniteScrollEnabled }
+actions={ modalActions }
+selection={ selectedItems.map( ( item ) =>
+String( item.id )
+) }
+/>
 </Modal>
 ) }
 </>