Code <cdx-language-selector> :
https://github.com/hueitan/design-codex/blob/main/packages/codex/src/components/language-selector/LanguageSelector.vue

Demo page: https://hueitan.github.io/design-codex/

POC screenshot:

Desktop	Mobile (Tablet)

Follow the pattern in Codex, we have the following code

// 1. markup for the Floating Dropdown Container
<teleport :to="computedTarget" :disabled="renderInPlace">
    <div
	v-if="expanded"
	ref="floatingContainer"
	class="cdx-language-selector__container"
	:style="floatingStyles"
    >
    <!-- Language selector floating container -->
    </div>
</teleport>

// 2. useFloating to calculate the floatingStyles
const { floatingStyles } = useFloating( buttonElement, floatingContainer, {
    placement: 'bottom-start',
    middleware: [
        size( {
            padding: clipPadding,
            apply( { elements, availableWidth, availableHeight } ) {
                // main logic to calculate the width height of the floating container
                Object.assign( elements.floating.style, {
                    width,
                    maxHeight,
                } );
            }
        } )
    ]
} );

// 3. css style for full screen container (responsive)
// if we do not need responsive, we can easily just use a class name to replace it
.cdx-language-selector {
    &__container {
        // Mobile responsive - full screen
        @media ( max-width: @min-width-breakpoint-tablet ) {
	    // Full screen on mobile
    	    position: fixed !important;
	    left: 0 !important;
	    right: 0 !important;
	    top: 0 !important;
	    bottom: 0 !important;
	    width: 100vw !important;
	    height: 100vh !important;
	    max-width: 100vw !important;
	    max-height: 100vh !important;
	    border-radius: 0 !important;
	    transform: unset !important; // to replace the value from useFloating
     }
}

• The full-screen view should contain an explicit "Close" button.

I tried how <select> works in different mobile browsers on Android, and none of them have a Close button.

• In Firefox and Chrome, one can select an item by pressing that item, and cancel the selection by pressing the OS-level Back button (the button at the bottom of the screen, which used to be a physical button on older Android devices).
• In Samsung Internet, one can select an item by pressing that item and then pressing Done, and cancel the selection by pressing the OS-level Back button.

(In all three browsers, one can also cancelling the selection by simply selecting the already-selected item once again.)

So I’m not sure if the explicit Close button is needed, but I’m sure handling the Back button would be essential to avoid people accidentally navigating away and losing form content.

If the Close button does remain, I think it should be either next to or above the search field, not below it.

In T408797#11356039, @Tacsipacsi wrote:

• The full-screen view should contain an explicit "Close" button.

handling the Back button would be essential to avoid people accidentally navigating away and losing form content.

Thanks for sharing the idea, though this is just the POC, the back button feature is something we will need to handle in the component for the mobile device, probably not in this demo but on the real dev code.

More POC in a different approach using the headless renderless method in vuejs

Code: https://github.com/Abijeet/uls-rewrite/tree/main/headless-uls
Demo: https://abijeet.github.io/uls-rewrite/headless-uls/

The main idea is to split the business logic and ui logic

Business logic: handle how it fetch the language and how it organize the language present
UI logic: user can choose which codex component to use, either in fullscreen or floating ui or simply just a lookup