style: improve remote confix ux

Author: edriste

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",

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" && (
-          <Input
-            type="text"
+          <TextareaAutosize
             value={state.value}
             onChange={(e) => 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" && (

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,

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)}
                   >
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 overflow-hidden">
                       <span className={cn("text-sm", envStyle.text)}>
                         Current value:
                       </span>
                       <code
                         className={cn(
-                          "px-2 py-1 rounded font-mono",
+                          "px-2 py-1 rounded font-mono max-w-[150px] truncate",
                           envStyle.bg,
                           envStyle.text
                         )}
@@ -282,7 +284,7 @@ export const FeatureFlag = ({
                     className="justify-between w-full group"
                     onClick={() => setIsUpdateModalOpen(true)}
                   >
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 overflow-hidden">
                       <span className={cn("text-sm", envStyle.text)}>
                         Current value:
                       </span>
@@ -307,7 +309,7 @@ export const FeatureFlag = ({
                     className="items-center justify-between w-full group"
                     onClick={() => setIsUpdateModalOpen(true)}
                   >
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 overflow-hidden">
                       <span className={cn("text-sm", envStyle.text)}>
                         Current value:
                       </span>

apps/web/src/components/Modal.tsx

@@ -50,7 +50,9 @@ export const Modal = ({
       <DialogContent className={cn(size === "full" && "sm:max-w-[980px]")}>
         <DialogTitle> {title} </DialogTitle>
         <DialogDescription>{subtitle}</DialogDescription>
-        <div className="my-6 text-pink-50">{children}</div>
+        <div className="my-6 text-pink-50 max-h-[60vh] overflow-y-auto">
+          {children}
+        </div>
 
         <DialogFooter>
           <Button variant="secondary" onClick={onClose}>