From 8e7a28a1211ff4550a5d9568d122463bd55f731e Mon Sep 17 00:00:00 2001
From: jpb626 <jpb626@lehigh.edu>
Date: Tue, 5 Aug 2025 13:25:47 -0400
Subject: [PATCH 1/3] fixed poll vote text styling

---
 client/src/pages/Home.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index f8dbd35..a5dfd40 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -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>

From 640533276670942e83d43d79e6a376e90db26b1b Mon Sep 17 00:00:00 2001
From: jb272727 <jpbernardi2727@gmail.com>
Date: Fri, 8 Aug 2025 14:28:36 -0400
Subject: [PATCH 2/3] adding delete button for options inside adminview

---
 client/src/components/AdminView.tsx     | 40 ++++++++++++++++++++-----
 client/src/components/PageContainer.tsx |  2 +-
 client/src/pages/Home.tsx               |  4 +--
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/client/src/components/AdminView.tsx b/client/src/components/AdminView.tsx
index 107c279..28607f0 100644
--- a/client/src/components/AdminView.tsx
+++ b/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,7 +58,7 @@ 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 = () => {
@@ -65,6 +66,15 @@ export const AdminView = () => {
       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="grid grid-flow-row space-y-4 pb-20">
       <h3>Create or Update Poll</h3>
 
       {errorMessage && <p className="p3 py-4 text-center text-error">{errorMessage}</p>}
@@ -171,13 +181,15 @@ 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">
+          <div key={i} className="input-group" >
             <label className="label">Option {i + 1}</label>
-            <div className="flex items-center space-x-2">
+
+            <div className="flex items-center space-x-2" >
               <input
                 type="text"
                 className="input flex-grow"
@@ -190,14 +202,28 @@ export const AdminView = () => {
                 maxLength={pollOptionMaxTextLength}
                 placeholder={`Option ${i + 1}`}
               />
+
+              {options.length > minOptions && (
+                <button
+                  type="button"
+                  className="p-2"
+                  onClick={() => removeOption(i)}
+                  style={{ flexShrink: 0 }}
+                >
+                  <img src="https://sdk-style.s3.amazonaws.com/icons/delete.svg" alt="" />
+                </button>
+              )}
             </div>
-            <span className="input-char-count">
+
+            {/* overlayed like your question field */}
+            <span className="input-char-count -translate-x-10">
               {opt.length}/{pollOptionMaxTextLength}
             </span>
           </div>
         ))}
       </div>
 
+
       {/* add poll option */}
       {options.length < maxOptions && (
         <div className="mb-4 flex justify-center">
@@ -208,7 +234,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"
diff --git a/client/src/components/PageContainer.tsx b/client/src/components/PageContainer.tsx
index dc78fc1..14b031a 100644
--- a/client/src/components/PageContainer.tsx
+++ b/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} />
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index a5dfd40..a7660d4 100644
--- a/client/src/pages/Home.tsx
+++ b/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 */}

From ca93d074015773ad058201a7d3761a07f8fe6cb1 Mon Sep 17 00:00:00 2001
From: jb272727 <jpbernardi2727@gmail.com>
Date: Fri, 8 Aug 2025 18:02:53 -0400
Subject: [PATCH 3/3] fixed double scroll bar

---
 client/src/components/AdminView.tsx | 63 ++++++++++++++---------------
 1 file changed, 31 insertions(+), 32 deletions(-)

diff --git a/client/src/components/AdminView.tsx b/client/src/components/AdminView.tsx
index 28607f0..615b479 100644
--- a/client/src/components/AdminView.tsx
+++ b/client/src/components/AdminView.tsx
@@ -162,7 +162,7 @@ export const AdminView = () => {
   };
 
   return (
-    <div className="grid grid-flow-row space-y-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>}
@@ -186,39 +186,38 @@ export const AdminView = () => {
       <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}`}
-              />
-
-              {options.length > minOptions && (
-                <button
-                  type="button"
-                  className="p-2"
-                  onClick={() => removeOption(i)}
-                  style={{ flexShrink: 0 }}
-                >
-                  <img src="https://sdk-style.s3.amazonaws.com/icons/delete.svg" alt="" />
-                </button>
-              )}
+          <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>
 
-            {/* overlayed like your question field */}
-            <span className="input-char-count -translate-x-10">
-              {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>