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}
+