rename, fix

Author: Rich-Harris

apps/svelte.dev/src/lib/components/SelectIcon.svelte renamed to apps/svelte.dev/src/lib/components/ModalDropdown.svelte

@@ -86,7 +86,7 @@
 </details>
 
 <style>
-	.examples-select {
+	details {
 		position: relative;
 
 		&:has(:focus-visible) .raised.icon {
@@ -99,15 +99,6 @@
 		}
 	}
 
-	select {
-		opacity: 0.0001;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-	}
-
 	summary {
 		display: flex;
 		align-items: center;

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -1,13 +1,12 @@
 <script lang="ts">
 	import { page } from '$app/stores';
-	import { goto } from '$app/navigation';
 	import UserMenu from './UserMenu.svelte';
 	import { Icon } from '@sveltejs/site-kit/components';
 	import { isMac } from '$lib/utils/compat.js';
 	import { get_app_context } from '../../app-context';
 	import type { Gist, User } from '$lib/db/types';
 	import { browser } from '$app/environment';
-	import SelectIcon from '$lib/components/SelectIcon.svelte';
+	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import { untrack } from 'svelte';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
 	import type { File } from 'editor';
@@ -40,7 +39,7 @@
 	let saving = $state(false);
 	let justSaved = $state(false);
 	let justForked = $state(false);
-	let select: ReturnType<typeof SelectIcon>;
+	let select: ReturnType<typeof ModalDropdown>;
 
 	function wait(ms: number) {
 		return new Promise((f) => setTimeout(f, ms));
@@ -181,7 +180,7 @@
 <svelte:window on:keydown={handleKeydown} />
 
 <SecondaryNav>
-	<SelectIcon label="Examples">
+	<ModalDropdown label="Examples">
 		<div class="secondary-nav-dropdown">
 			<a class="create-new" href="/playground/untitled">Create new</a>
 
@@ -214,7 +213,7 @@
 				{/each}
 			</optgroup>
 		{/each} -->
-	</SelectIcon>
+	</ModalDropdown>
 
 	<input
 		bind:value={name}

apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import SecondaryNav from '$lib/components/SecondaryNav.svelte';
-	import SelectIcon from '$lib/components/SelectIcon.svelte';
+	import ModalDropdown from '$lib/components/ModalDropdown.svelte';
 	import type { Exercise, PartStub } from '$lib/tutorial';
 	import { Icon } from '@sveltejs/site-kit/components';
 
@@ -16,7 +16,7 @@
 </script>
 
 <SecondaryNav>
-	<SelectIcon label="Menu">
+	<ModalDropdown label="Menu">
 		<div class="secondary-nav-dropdown">
 			{#each index as part}
 				<details>
@@ -43,7 +43,7 @@
 				</details>
 			{/each}
 		</div>
-	</SelectIcon>
+	</ModalDropdown>
 
 	<a
 		href={exercise.prev ? `/tutorial/${exercise.prev?.slug}` : undefined}

packages/site-kit/src/lib/styles/utils/nav.css

@@ -1,6 +1,7 @@
 .secondary-nav-dropdown {
 	max-height: 50rem;
 	width: 30rem;
+	max-width: calc(100vw - 2 * var(--sk-page-padding-side) - 2rem);
 	font: var(--sk-font-ui-medium);
 
 	details {