Dev

client/src/components/AdminView.tsx

@@ -21,6 +21,7 @@ export const AdminView = () => {
   const pollOptionMaxTextLength = 100;
   const pollQuestionMaxTextLength = 150;
   const maxOptions = 10;
+  const minOptions = 2;
 
   // state
   const [question, setQuestion] = useState("");
@@ -57,14 +58,23 @@ export const AdminView = () => {
   }, [poll]);
 
   const validOptions = options.filter((o) => o.trim() !== "");
-  const isValid = question.trim() !== "" && validOptions.length >= 2;
+  const isValid = question.trim() !== "" && validOptions.length >= minOptions;
 
   // handlers
   const addOption = () => {
     if (options.length < maxOptions) {
       setOptions((prev) => [...prev, ""]);
     }
   };
+  const removeOption = (i: number) => {
+    if (options.length > minOptions) { // 2 is min options
+      setOptions(prev => {
+        const copy = [...prev];
+        copy.splice(i, 1);
+        return copy; 
+      });
+    }
+  }
 
   // detect edits for modal type changes
   useEffect(() => {
@@ -152,7 +162,7 @@ export const AdminView = () => {
   };
 
   return (
-    <div className="grid grid-flow-row gap-4 pb-20">
+    <div className="mb-20 grid gap-4">
       <h3>Create or Update Poll</h3>
 
       {errorMessage && <p className="p3 py-4 text-center text-error">{errorMessage}</p>}
@@ -171,33 +181,48 @@ export const AdminView = () => {
           {question.length}/{pollQuestionMaxTextLength}
         </span>
       </div>
-
+      
       {/* poll options */}
       <div className="space-y-3 mb-4">
+
         {options.map((opt, i) => (
-          <div key={i} className="input-group">
-            <label className="label">Option {i + 1}</label>
-            <div className="flex items-center space-x-2">
-              <input
-                type="text"
-                className="input flex-grow"
-                value={opt}
-                onChange={(e) => {
-                  const copy = [...options];
-                  copy[i] = e.target.value;
-                  setOptions(copy);
-                }}
-                maxLength={pollOptionMaxTextLength}
-                placeholder={`Option ${i + 1}`}
-              />
+          <div className="flex">
+            <div key={i} className="input-group grow" >
+              <label className="label">Option {i + 1}</label>
+
+                <input
+                  type="text"
+                  className="input"
+                  value={opt}
+                  onChange={(e) => {
+                    const copy = [...options];
+                    copy[i] = e.target.value;
+                    setOptions(copy);
+                  }}
+                  maxLength={pollOptionMaxTextLength}
+                  placeholder={`Option ${i + 1}`}
+                />
+
+                <span className="input-char-count">
+                  {opt.length}/{pollOptionMaxTextLength}
+                </span>
             </div>
-            <span className="input-char-count">
-              {opt.length}/{pollOptionMaxTextLength}
-            </span>
+
+            {options.length > minOptions && (
+              <button
+                type="button"
+                className="p-2 mt-5"
+                onClick={() => removeOption(i)}
+                style={{ flexShrink: 0 }}
+              >
+                <img src="https://sdk-style.s3.amazonaws.com/icons/delete.svg" alt="" />
+              </button>
+            )}
           </div>
         ))}
       </div>
 
+
       {/* add poll option */}
       {options.length < maxOptions && (
         <div className="mb-4 flex justify-center">
@@ -208,7 +233,7 @@ export const AdminView = () => {
       )}
 
       <h4 className="pt-4">Results Display</h4>
-      <div className="flex gap-4 pb-8">
+      <div className="flex space-x-4 pb-8">
         <label>
           <input
             type="radio"

client/src/components/PageContainer.tsx

@@ -21,7 +21,7 @@ export const PageContainer = ({
   if (isLoading) return <Loading />;
 
   return (
-    <div className="p-4">
+    <div className="p-4" style={{overflow: "visible"}}>
       {visitor?.isAdmin && (
         <div>
           <AdminIconButton setShowSettings={() => setShowSettings(!showSettings)} showSettings={showSettings} />

client/src/pages/Home.tsx

@@ -74,9 +74,9 @@ const Home = () => {
   };
 
   return (
-    <PageContainer isLoading={isLoading}>
+    <PageContainer isLoading={isLoading} >
       {poll && poll.question ? (
-        <div className="grid gap-4">
+        <div className="grid gap-4" >
           <h4 className="mb-4">{poll.question}</h4>
 
           {/* Display all the poll options dynamically as buttons */}
@@ -109,11 +109,11 @@ const Home = () => {
                 disabled={areButtonsDisabled}
                 onClick={() => handleVote(i)}
                 className={`${isSelected ? "btn" : "btn btn-outline"} inline-block w-auto max-w-none break-words`}
-                style={{ height: "auto", maxHeight: "none" }}
+                style={{ height: "auto", maxHeight: "none", justifyContent: "space-between"}}
               >
-                <div className="flex items-center">
+                <div className="flex items-center" style={{justifyContent: "space-between", width: "100%"}}>
                   <div className="text-left mr-2">{ans}</div>
-                  <div className={isSelected ? "text-sm text-white" : "p2"}>
+                  <div className={isSelected ? "text-sm text-white whitespace-nowrap" : "p2 whitespace-nowrap"} style={{ textAlign: "center" }}>
                     {isAdmin || selectedOption !== null ? voteText : ""}
                   </div>
                 </div>