Data views: expand config drop down on mobile (WordPress#67715)

In this view, ensure that the content is horizontally scrollable and the width takes up the screen.Co-authored-by: ramonjd <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: megane9988 <[email protected]>
yogeshbhutkar · Dec 18, 2024 · e05ae64 · e05ae64
1 parent fcdbbd0
commit e05ae64
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/packages/dataviews/src/components/dataviews-view-config/index.tsx b/packages/dataviews/src/components/dataviews-view-config/index.tsx
@@ -53,7 +53,11 @@ interface ViewTypeMenuProps {
 	defaultLayouts?: SupportedLayouts;
 }
 
-const DATAVIEWS_CONFIG_POPOVER_PROPS = { placement: 'bottom-end', offset: 9 };
+const DATAVIEWS_CONFIG_POPOVER_PROPS = {
+	className: 'dataviews-config__popover',
+	placement: 'bottom-end',
+	offset: 9,
+};
 
 function ViewTypeMenu( {
 	defaultLayouts = { list: {}, grid: {}, table: {} },
@@ -619,6 +623,7 @@ function DataviewsViewConfigDropdown() {
 	);
 	return (
 		<Dropdown
+			expandOnMobile
 			popoverProps={ {
 				...DATAVIEWS_CONFIG_POPOVER_PROPS,
 				id: popoverId,
@@ -636,7 +641,10 @@ function DataviewsViewConfigDropdown() {
 				);
 			} }
 			renderContent={ () => (
-				<DropdownContentWrapper paddingSize="medium">
+				<DropdownContentWrapper
+					paddingSize="medium"
+					className="dataviews-config__popover-content-wrapper"
+				>
 					<VStack className="dataviews-view-config" spacing={ 6 }>
 						<SettingsSection title={ __( 'Appearance' ) }>
 							<HStack expanded className="is-divided-in-two">

diff --git a/packages/dataviews/src/components/dataviews-view-config/style.scss b/packages/dataviews/src/components/dataviews-view-config/style.scss
@@ -6,6 +6,14 @@
 	line-height: $default-line-height;
 }
 
+.dataviews-config__popover.is-expanded .dataviews-config__popover-content-wrapper {
+	overflow-y: scroll;
+	height: 100%;
+	.dataviews-view-config {
+		width: auto;
+	}
+}
+
 .dataviews-view-config__sort-direction .components-toggle-group-control-option-base {
 	text-transform: uppercase;
 }