From 72d756b621b45cf307d51b55a5284a419d44ca7d Mon Sep 17 00:00:00 2001
From: Enoch Riese <enoch.riese@gmail.com>
Date: Fri, 15 Jul 2022 17:40:18 -0400
Subject: [PATCH] some pattern picker fixes

---
 sites/lab/components/layouts/lab.js      | 1 -
 sites/lab/components/pattern-picker.js   | 2 +-
 sites/shared/components/locale-picker.js | 3 ++-
 sites/shared/components/picker.js        | 4 ++--
 sites/shared/components/theme-picker.js  | 3 ++-
 5 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/sites/lab/components/layouts/lab.js b/sites/lab/components/layouts/lab.js
index b460248a007..e29c3c4fef7 100644
--- a/sites/lab/components/layouts/lab.js
+++ b/sites/lab/components/layouts/lab.js
@@ -10,7 +10,6 @@ export const BeforeNav = ({ app }) => (
       <LocalePicker app={app} />
     </div>
     <div className="md:hidden flex flex-row flex-wrap sm:flex-nowrap gap-2 mb-2">
-      <PatternPicker app={app} />
       <VersionPicker app={app} />
     </div>
   </>
diff --git a/sites/lab/components/pattern-picker.js b/sites/lab/components/pattern-picker.js
index 9bb97995852..dceee612b65 100644
--- a/sites/lab/components/pattern-picker.js
+++ b/sites/lab/components/pattern-picker.js
@@ -33,7 +33,7 @@ const PatternPicker = ({ app }) => {
           }
 
           return (<PickerLink {...patternProps} key={pattern}>
-            <span className="sr-only">{sectionTitle}</span> {app.navigation[section][pattern].__title}
+            <span className="sr-only" key={pattern}>{sectionTitle}</span> {app.navigation[section][pattern].__title}
           </PickerLink>)
         })}
       </React.Fragment>)}
diff --git a/sites/shared/components/locale-picker.js b/sites/shared/components/locale-picker.js
index c35e4d5e99e..d0c50dde9b1 100644
--- a/sites/shared/components/locale-picker.js
+++ b/sites/shared/components/locale-picker.js
@@ -10,7 +10,8 @@ const LocalePicker = ({ app, iconOnly=false }) => {
   const pickerProps = {
     iconOnly,
     Icon: LocaleIcon,
-    title: t(router.locale)
+    title: t(router.locale),
+    end: true
   }
 
   return (
diff --git a/sites/shared/components/picker.js b/sites/shared/components/picker.js
index 145058f29cf..06c9b1cbd32 100644
--- a/sites/shared/components/picker.js
+++ b/sites/shared/components/picker.js
@@ -3,9 +3,9 @@ import { Menu } from '@headlessui/react'
 import Link from 'next/link'
 
 /** an accessible dropdown menu for use by picker components */
-export const Picker = ({Icon, className, title, ariaLabel, iconOnly=false, children}) => {
+export const Picker = ({Icon, className, title, ariaLabel, iconOnly=false, children, ...props}) => {
 
-	return (<Menu as="div" className={`dropdown dropdown-end w-auto`}>
+	return (<Menu as="div" className={`dropdown w-auto ${props.end ? 'dropdown-end' : ''}`}>
 		<Menu.Button className={iconOnly
 			? `btn btn-sm`
 			: `m-0 btn btn-neutral flex flex-row gap-2
diff --git a/sites/shared/components/theme-picker.js b/sites/shared/components/theme-picker.js
index 2d3373ed62d..c559c35b4d7 100644
--- a/sites/shared/components/theme-picker.js
+++ b/sites/shared/components/theme-picker.js
@@ -16,7 +16,8 @@ const ThemePicker = ({ app, className, iconOnly=false }) => {
     iconOnly,
     Icon: ThemeIcon,
     title: t(`${app.theme}Theme`),
-    ariaLabel: t('themesPicker')
+    ariaLabel: t('themesPicker'),
+    end: true
   }
   return (<Picker {...pickerProps}>
     {Object.keys(themes).map(theme => (