AI Featured Image: fix scrollbar on smaller screens (#36963)

* Allow modal to grow up to 90% of the available height on medium to big screens * changelog
Automattic · Apr 17, 2024 · f35bbd3 · f35bbd3
1 parent 236ac36
commit f35bbd3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/projects/plugins/jetpack/changelog/update-ai-featured-image-fix-scrollbar-on-smaller-screens b/projects/plugins/jetpack/changelog/update-ai-featured-image-fix-scrollbar-on-smaller-screens
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Featured Image: remove scrollbar on smaller screens.
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/modal/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/modal/index.tsx
@@ -44,7 +44,7 @@ export default function AiAssistantModal( {
 	title?: string;
 } ) {
 	return (
-		<Modal __experimentalHideHeader={ hideHeader }>
+		<Modal __experimentalHideHeader={ hideHeader } className="ai-assistant-modal">
 			<div className="ai-assistant-modal__content">
 				<ModalHeader requestingState={ requestingState } onClose={ handleClose } title={ title } />
 				<hr className="ai-assistant-modal__divider" />

diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/modal/style.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/modal/style.scss
@@ -1,4 +1,8 @@
 .ai-assistant-modal {
+	@media (min-width: 960px) {
+		max-height: 90%;
+	}
+
 	&__content {
 		display: flex;
 		flex-direction: column;