From 49634cfadf786382f7f20b1ba84705b0aef4ea00 Mon Sep 17 00:00:00 2001
From: Tomas Gadliauskas <troliukass@gmail.com>
Date: Sun, 17 May 2026 13:00:06 +0200
Subject: [PATCH] fix(button-group): align select content positioning

---
 apps/v4/examples/radix/button-group-select.tsx              | 6 ++++--
 .../v4/public/r/styles/new-york-v4/button-group-select.json | 2 +-
 .../registry/new-york-v4/examples/button-group-select.tsx   | 6 ++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/v4/examples/radix/button-group-select.tsx b/apps/v4/examples/radix/button-group-select.tsx
index c008f86c876..a0f18bd5047 100644
--- a/apps/v4/examples/radix/button-group-select.tsx
+++ b/apps/v4/examples/radix/button-group-select.tsx
@@ -36,8 +36,10 @@ export default function ButtonGroupSelect() {
     <ButtonGroup>
       <ButtonGroup>
         <Select value={currency} onValueChange={setCurrency}>
-          <SelectTrigger className="font-mono">{currency}</SelectTrigger>
-          <SelectContent className="min-w-24">
+          <SelectTrigger className="font-mono">
+            {currency}
+          </SelectTrigger>
+          <SelectContent position="popper" align="start" className="min-w-24">
             <SelectGroup>
               {CURRENCIES.map((currency) => (
                 <SelectItem key={currency.value} value={currency.value}>
diff --git a/apps/v4/public/r/styles/new-york-v4/button-group-select.json b/apps/v4/public/r/styles/new-york-v4/button-group-select.json
index 824827d3789..33cc83fe13d 100644
--- a/apps/v4/public/r/styles/new-york-v4/button-group-select.json
+++ b/apps/v4/public/r/styles/new-york-v4/button-group-select.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/button-group-select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ButtonGroup } from \"@/registry/new-york-v4/ui/button-group\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n          <SelectContent className=\"min-w-24\">\n            {CURRENCIES.map((currency) => (\n              <SelectItem key={currency.value} value={currency.value}>\n                {currency.value}{\" \"}\n                <span className=\"text-muted-foreground\">{currency.label}</span>\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowRightIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ButtonGroup } from \"@/registry/new-york-v4/ui/button-group\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst CURRENCIES = [\n  {\n    value: \"$\",\n    label: \"US Dollar\",\n  },\n  {\n    value: \"€\",\n    label: \"Euro\",\n  },\n  {\n    value: \"£\",\n    label: \"British Pound\",\n  },\n]\n\nexport default function ButtonGroupSelect() {\n  const [currency, setCurrency] = React.useState(\"$\")\n\n  return (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Select value={currency} onValueChange={setCurrency}>\n          <SelectTrigger className=\"font-mono\">\n            {currency}\n          </SelectTrigger>\n          <SelectContent position=\"popper\" align=\"start\" className=\"min-w-24\">\n            {CURRENCIES.map((currency) => (\n              <SelectItem key={currency.value} value={currency.value}>\n                {currency.value}{\" \"}\n                <span className=\"text-muted-foreground\">{currency.label}</span>\n              </SelectItem>\n            ))}\n          </SelectContent>\n        </Select>\n        <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/registry/new-york-v4/examples/button-group-select.tsx b/apps/v4/registry/new-york-v4/examples/button-group-select.tsx
index fc50518e4b9..1c7dfb51b0a 100644
--- a/apps/v4/registry/new-york-v4/examples/button-group-select.tsx
+++ b/apps/v4/registry/new-york-v4/examples/button-group-select.tsx
@@ -35,8 +35,10 @@ export default function ButtonGroupSelect() {
     <ButtonGroup>
       <ButtonGroup>
         <Select value={currency} onValueChange={setCurrency}>
-          <SelectTrigger className="font-mono">{currency}</SelectTrigger>
-          <SelectContent className="min-w-24">
+          <SelectTrigger className="font-mono">
+            {currency}
+          </SelectTrigger>
+          <SelectContent position="popper" align="start" className="min-w-24">
             {CURRENCIES.map((currency) => (
               <SelectItem key={currency.value} value={currency.value}>
                 {currency.value}{" "}