Fix i18n picker layout (#56485)

* Fix i18n picker layout

* Override Flex component Props

* Fix wide and narrow styles

packages/language-picker/src/language-picker.tsx

@@ -1,15 +1,33 @@
 /* eslint-disable wpcalypso/jsx-classname-namespace */
 
 import Search from '@automattic/search';
-import { Button, CustomSelectControl, Flex, FlexBlock, FlexItem } from '@wordpress/components';
+import {
+	Button,
+	CustomSelectControl,
+	Flex as WpFlex,
+	FlexBlock,
+	FlexItem,
+} from '@wordpress/components';
 import { useI18n } from '@wordpress/react-i18n';
 import React, { useState } from 'react';
 import { getSearchedLanguages, LocalizedLanguageNames } from './search';
 import type { Language, LanguageGroup } from './Language';
-import type { ReactNode } from 'react';
+import type { ReactNode, ComponentType } from 'react';
 
 import './style.scss';
 
+// TODO: Definitely typed is out of date with the latest wp components, so we need
+// to override the props for the Flex component to get everything working for now.
+// Remove once definitely typed is updated, or if we can consume types directly
+// from wp components.
+const Flex = WpFlex as ComponentType< {
+	className?: string;
+	align?: string;
+	direction?: string;
+	expanded?: boolean;
+	justify?: string;
+} >;
+
 type Props< TLanguage extends Language > = {
 	onSelectLanguage: ( language: TLanguage ) => void;
 	languages: TLanguage[];
@@ -128,7 +146,7 @@ function LanguagePicker< TLanguage extends Language >( {
 	const searchPlaceholder = __( 'Search languages…' );
 
 	return (
-		<Flex className="language-picker-component" align="left">
+		<Flex className="language-picker-component" align="left" direction="column" expanded={ false }>
 			<FlexBlock className="language-picker-component__heading">
 				<Flex justify="space-between" align="left">
 					<FlexItem className="language-picker-component__title wp-brand-font">

packages/language-picker/src/style.scss

@@ -30,7 +30,7 @@
 
 		.components-custom-select-control__button {
 			// less the width of the search button plus the border
-			width: calc( 100% - 52px );
+			width: calc( 100% - 60px );
 			height: 100%;
 			font-size: 0.875rem;
 		}
@@ -136,12 +136,17 @@
 		}
 	}
 
+	$language_button_width: 165px;
+
 	.language-picker-component__language-buttons {
 		display: flex;
 		flex-wrap: wrap;
 		align-content: flex-start;
 		width: 100%;
 
+		// Allow up to five columns of buttons.
+		max-width: $language_button_width * 5;
+
 		@include break-small() {
 			width: initial;
 		}
@@ -150,7 +155,7 @@
 	.language-picker-component__language-button {
 		width: 100%;
 		@include break-small() {
-			width: 165px;
+			width: $language_button_width;
 		}
 	}
 }