got the input and dropdowns on the portfolio settings page to behave responsively

src/app/portfolio/[slug]/(portfolio)/settings/PortfolioSettings.tsx

@@ -25,6 +25,7 @@ import {
 import { PortfolioStatus as PortfolioStatusOptions } from "@/app/db/schema/portfolio";
 import { PortfolioGoal as PortfolioGoalOptions } from "@/app/db/schema/portfolio";
 import { useSession } from "next-auth/react";
+import PortfolioPlanTable from "@/app/components/portfolio/plan/PlanTable";
 
 // dropdown selection component for both goal and status
 
@@ -32,10 +33,12 @@ export function SettingsDropdown({
   startingValue,
   options,
   setOption,
+  className,
 }: {
   startingValue: string;
   options: string[];
   setOption: (option: string) => void;
+  className?: string;
 }) {
   function handleValueChange(newValue: string) {
     setOption(newValue);
@@ -43,7 +46,7 @@ export function SettingsDropdown({
 
   return (
     <Select onValueChange={(newValue) => handleValueChange(newValue)}>
-      <SelectTrigger className="w-[180px]">
+      <SelectTrigger className="w-full">
         <SelectValue placeholder={startingValue} />
       </SelectTrigger>
       <SelectContent>
@@ -359,116 +362,118 @@ export default function PortfolioSettings({
   // 4) Create the API
 
   return (
-    <>
-      <div className="p-4 mt-5 flex justify-center max-w-8xl w-8xl pt-5 bg-gray-50 rounded-lg text-brandblue">
-        <div className="grid grid-cols-[max-content_1fr_min-content] gap-x-[5px] gap-y-4">
-          {/* Row 1: Name */}
-          <div className="flex items-center">
-            <span>Name:</span>
-          </div>
-          <div className="flex items-center">
-            <Input value={portfolioName} onChange={handlePortfolioNameChange} />
-          </div>
-          <div className="flex items-center">
-            <Button className="w-full" onClick={handleRename}>
-              Rename
-            </Button>
-          </div>
-
-          {/* Row 2: Budget */}
-          <div className="flex items-center">
-            <span>Budget:</span>
-          </div>
-          <div className="flex items-center max-w-8xl">
-            <Input
-              type="number"
-              value={portfolioBudget ?? undefined}
-              onChange={handlePortfolioBudgetUpdate}
-              onKeyDown={(e) => handleNumericKeyDown(e)}
-            />
-          </div>
-          <div className="flex items-center">
-            <Button className="w-full" onClick={handleBudgetUpdate}>
-              Update
-            </Button>
-          </div>
-
-          {/* Row 3: Goal */}
-          <div className="flex items-center">
-            <span>Goal:</span>
-          </div>
-
-          <div className="flex items-center">
-            <SettingsDropdown
-              startingValue={portfolioGoal}
-              options={PortfolioGoalOptions}
-              setOption={setPortfolioGoal}
-            />
-          </div>
-          <Button className="w-full" onClick={handleGoalUpdate}>
+    <div className="w-4/5 p-4 mt-5 pt-5 bg-gray-50 rounded-lg text-brandblue">
+      <div className="grid grid-cols-[auto_auto_min-content] gap-4">
+        {/* Row 1: Name */}
+        <div className="flex pl-1 col-span-2">
+          <span>Change the Portfolio Name:</span>
+        </div>
+        <div className="flex-grow col-span-2">
+          <Input value={portfolioName} onChange={handlePortfolioNameChange} />
+        </div>
+        <div className="flex justify-center">
+          <Button className="w-min" onClick={handleRename}>
+            Rename
+          </Button>
+        </div>
+  
+        {/* Row 2: Budget */}
+        <div className="w-full flex items-center pl-1 col-span-2">
+          <span>Portfolio Budget:</span>
+        </div>
+        <div className="flex-grow col-span-2">
+          <Input
+            type="number"
+            value={portfolioBudget ?? undefined}
+            onChange={handlePortfolioBudgetUpdate}
+            onKeyDown={(e) => handleNumericKeyDown(e)}
+          />
+        </div>
+        <div className="flex justify-end">
+          <Button className="w-min" onClick={handleBudgetUpdate}>
             Update
           </Button>
-
-          {/* Row 4: Status */}
-          <div className="flex items-center">
-            <span>Status:</span>
-          </div>
-          <div className="flex items-center">
-            <SettingsDropdown
-              startingValue={portfolioStatus}
-              options={PortfolioStatusOptions}
-              setOption={setPortfolioStatus}
-            />
-          </div>
-          <Button className="w-full" onClick={handleStatusUpdate}>
+        </div>
+  
+        {/* Row 3: Goal */}
+        <div className="w-full flex items-center pl-1 col-span-2">
+          <span>Goal:</span>
+        </div>
+        <div className="w-full flex-grow col-span-2">
+          <SettingsDropdown
+            className="w-full"
+            startingValue={portfolioGoal}
+            options={PortfolioGoalOptions}
+            setOption={setPortfolioGoal}
+          />
+        </div>
+        <div className="flex justify-end">
+          <Button className="w-min" onClick={handleGoalUpdate}>
             Update
           </Button>
-
-          {/* Row 5: Delete */}
-          <div className="col-span-2"></div>
-          <div className="flex items-center">
-            <Button
-              className="max-width: 100% bg-red-700"
-              onClick={handleOpenDeleteModal}
-            >
-              Delete Portfolio
-            </Button>
-          </div>
-          {/* Delete portfolio modal */}
-          <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
-            <DialogContent>
-              <DialogTitle>Are you sure?</DialogTitle>
-              <p>
-                To confirm, please type the name of the portfolio (
-                <strong>{portfolioSettingsData.name}</strong>)
-              </p>
-              <input
-                type="text"
-                value={deleteConfirmationByName}
-                onChange={(e) => setDeleteConfirmationByName(e.target.value)}
-                placeholder="Type portfolio name"
-              />
-              <DialogFooter>
-                <Button
-                  className="bg-green-600"
-                  onClick={() => setIsDeleteModalOpen(false)}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  className="bg-red-700"
-                  onClick={handleDeleteConfirmation}
-                  disabled={
-                    deleteConfirmationByName !== portfolioSettingsData.name
-                  }
-                >
-                  Delete
-                </Button>
-              </DialogFooter>
-            </DialogContent>
-          </Dialog>
+        </div>
+  
+        {/* Row 4: Status */}
+        <div className="w-full flex items-center pl-1 col-span-2">
+          <span>Status:</span>
+        </div>
+        <div className="w-full flex-grow col-span-2">
+          <SettingsDropdown
+            className="w-full"
+            startingValue={portfolioStatus}
+            options={PortfolioStatusOptions}
+            setOption={setPortfolioStatus}
+          />
+        </div>
+        <div className="flex justify-end">
+          <Button className="w-min" onClick={handleStatusUpdate}>
+            Update
+          </Button>
+        </div>
+  
+        {/* Row 5: Delete */}
+        <div className="flex items-center col-span-2"></div>
+        <div className="flex items-center justify-center col-span-2">
+          <Button
+            className="bg-red-700"
+            onClick={handleOpenDeleteModal}
+          >
+            Delete Portfolio
+          </Button>
         </div>
       </div>
-    </>
+  
+      {/* Delete portfolio modal */}
+      <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
+        <DialogContent>
+          <DialogTitle>Are you sure?</DialogTitle>
+          <p>
+            To confirm, please type the name of the portfolio (
+            <strong>{portfolioSettingsData.name}</strong>)
+          </p>
+          <input
+            type="text"
+            value={deleteConfirmationByName}
+            onChange={(e) => setDeleteConfirmationByName(e.target.value)}
+            placeholder="Type portfolio name"
+          />
+          <DialogFooter>
+            <Button
+              className="bg-green-600"
+              onClick={() => setIsDeleteModalOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              className="bg-red-700"
+              onClick={handleDeleteConfirmation}
+              disabled={deleteConfirmationByName !== portfolioSettingsData.name}
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
   );
 }