diff --git a/apps/web/package.json b/apps/web/package.json index 3015892b..45284805 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -115,6 +115,7 @@ "react-hook-form": "^7.44.3", "react-hot-toast": "^2.4.0", "react-icons": "^4.11.0", + "react-textarea-autosize": "^8.5.9", "react-use-wizard": "^2.2.3", "recharts": "^2.12.7", "sharp": "^0.33.4", diff --git a/apps/web/src/components/AddFeatureFlagModal.tsx b/apps/web/src/components/AddFeatureFlagModal.tsx index a8058a9b..a14411ca 100644 --- a/apps/web/src/components/AddFeatureFlagModal.tsx +++ b/apps/web/src/components/AddFeatureFlagModal.tsx @@ -14,6 +14,7 @@ import { RadioSelect } from "./RadioSelect"; import { Toggle } from "./Toggle"; import { Input } from "./ui/input"; import { Label } from "./ui/label"; +import TextareaAutosize from "react-textarea-autosize"; type Props = { onClose: () => void; @@ -124,13 +125,13 @@ export function ChangeFlagForm({ /> )} {state.type === "STRING" && ( - onChange({ value: e.target.value })} placeholder={ isRemoteConfig ? "My Remote Config" : "My Feature Flag" } + className="w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring overflow-hidden" /> )} {state.type === "NUMBER" && ( diff --git a/apps/web/src/components/Dropdown.tsx b/apps/web/src/components/Dropdown.tsx index b2bef3b5..5b37d40c 100644 --- a/apps/web/src/components/Dropdown.tsx +++ b/apps/web/src/components/Dropdown.tsx @@ -41,7 +41,7 @@ export const Dropdown = ({ triggerIcon: Icon, children, className }: Props) => { type ItemProps = { children: React.ReactNode; shortcut?: string; -} & DropdownMenu.MenuItemProps; +} & DropdownMenu.DropdownMenuItemProps; export const Item = ({ children, diff --git a/apps/web/src/components/FeatureFlag.tsx b/apps/web/src/components/FeatureFlag.tsx index 470e3fca..4a3116ab 100644 --- a/apps/web/src/components/FeatureFlag.tsx +++ b/apps/web/src/components/FeatureFlag.tsx @@ -191,7 +191,9 @@ export const FeatureFlag = ({ } const keys = Object.keys(parsed); if (keys.length === 0) return "{ }"; - return `{ ${keys[0]}: ..., ${keys.length > 1 ? `+${keys.length - 1} more` : ""} }`; + return `{ ${keys[0]}: ..., ${ + keys.length > 1 ? `+${keys.length - 1} more` : "" + } }`; } return value; } catch { @@ -257,13 +259,13 @@ export const FeatureFlag = ({ className="justify-between w-full group" onClick={() => setIsUpdateModalOpen(true)} > -
+
Current value: setIsUpdateModalOpen(true)} > -
+
Current value: @@ -307,7 +309,7 @@ export const FeatureFlag = ({ className="items-center justify-between w-full group" onClick={() => setIsUpdateModalOpen(true)} > -
+
Current value: diff --git a/apps/web/src/components/Modal.tsx b/apps/web/src/components/Modal.tsx index 2a40e2bb..3699936b 100644 --- a/apps/web/src/components/Modal.tsx +++ b/apps/web/src/components/Modal.tsx @@ -50,7 +50,9 @@ export const Modal = ({ {title} {subtitle} -
{children}
+
+ {children} +