From d5d9c0870cc2dfb0d9369d688219831617ee2ed3 Mon Sep 17 00:00:00 2001
From: MrAlders0n <55921894+MrAlders0n@users.noreply.github.com>
Date: Fri, 18 Sep 2026 06:12:14 -0400
Subject: [PATCH] fix(layout): keep region picker right-anchored on desktop
 (#47)

---
 src/components/AppShell.tsx        |  2 +-
 src/components/Dropdown.tsx        |  7 +++++--
 tests/components/AppShell.test.tsx | 11 +++++++++++
 tests/components/Dropdown.test.tsx | 15 +++++++++++++++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 3f4afb1..cc0d9e9 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -114,7 +114,7 @@ function RegionSelector() {
 
   return (
     <Dropdown
-      align="left"
+      align="left-below-md"
       width="w-60"
       renderTrigger={({ toggle }) => (
         <button
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index e37a350..cdb4ae3 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -1,9 +1,12 @@
 import { useState, useRef, useCallback, useEffect, type ReactNode } from "react";
 import { useClickOutside } from "../hooks/useClickOutside";
 
+const ALIGN_CLASS = { left: "left-0", right: "right-0", "left-below-md": "left-0 md:left-auto md:right-0" } as const;
+
 export function Dropdown({ renderTrigger, align = "right", width = "w-48", fullWidth = false, children }: {
   renderTrigger: (props: { open: boolean; toggle: () => void }) => ReactNode;
-  align?: "left" | "right";
+  // left-below-md: the trigger sits at the left edge of a phone row but mid-row on desktop
+  align?: "left" | "right" | "left-below-md";
   width?: string;
   // stretch + render the panel inline (accordion) for the mobile filter sheet
   fullWidth?: boolean;
@@ -33,7 +36,7 @@ export function Dropdown({ renderTrigger, align = "right", width = "w-48", fullW
         <div className={
           fullWidth
             ? "mt-1 w-full bg-bg-raised border border-border rounded-md py-1 max-h-72 overflow-y-auto"
-            : `absolute top-full mt-1 ${align === "left" ? "left-0" : "right-0"} ${width} max-w-[calc(100vw-1.5rem)] bg-bg-raised border border-border rounded-md shadow-lg z-50 py-1 max-h-80 overflow-y-auto`
+            : `absolute top-full mt-1 ${ALIGN_CLASS[align]} ${width} max-w-[calc(100vw-1.5rem)] bg-bg-raised border border-border rounded-md shadow-lg z-50 py-1 max-h-80 overflow-y-auto`
         }>
           {children(close)}
         </div>
diff --git a/tests/components/AppShell.test.tsx b/tests/components/AppShell.test.tsx
index e3c1456..78327cb 100644
--- a/tests/components/AppShell.test.tsx
+++ b/tests/components/AppShell.test.tsx
@@ -260,3 +260,14 @@ describe("rate limit badge", () => {
     expect(screen.queryByText(/RATE LIMITED/)).not.toBeInTheDocument();
   });
 });
+
+describe("AppShell region picker alignment", () => {
+  it("opens rightward only below md so the desktop row's controls stay visible", async () => {
+    vi.mocked(getIatas).mockResolvedValue([]);
+    renderShell();
+    fireEvent.click(screen.getByRole("button", { name: /REGION/ }));
+    const panel = screen.getByPlaceholderText("Filter IATA or name…").closest(".absolute")!;
+    expect(panel.className).toContain("left-0");
+    expect(panel.className).toContain("md:right-0");
+  });
+});
diff --git a/tests/components/Dropdown.test.tsx b/tests/components/Dropdown.test.tsx
index 48456c3..0b8d6d4 100644
--- a/tests/components/Dropdown.test.tsx
+++ b/tests/components/Dropdown.test.tsx
@@ -45,3 +45,18 @@ describe("Dropdown", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 });
+
+describe("Dropdown align", () => {
+  it("left-below-md anchors left on phones and flips to right at md", () => {
+    render(
+      <Dropdown align="left-below-md" renderTrigger={({ toggle }) => <button type="button" onClick={toggle}>trigger</button>}>
+        {() => <div data-testid="dropdown-panel">option</div>}
+      </Dropdown>,
+    );
+    fireEvent.click(screen.getByText("trigger"));
+    const panel = screen.getByTestId("dropdown-panel").parentElement!;
+    expect(panel.className).toContain("left-0");
+    expect(panel.className).toContain("md:left-auto");
+    expect(panel.className).toContain("md:right-0");
+  });
+});