From d03da57f26e4d8884deea5880e91fb4ca27a1162 Mon Sep 17 00:00:00 2001
From: Ulises Salinas <usalinas595@gmail.com>
Date: Tue, 15 Apr 2025 17:29:37 -0700
Subject: [PATCH] Design fix for options on different screen size

---
 .../course/[courseId]/start-session/page.tsx  |  6 +-
 components/YAxisTick.tsx                      | 57 +++++++++++--------
 2 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/app/dashboard/course/[courseId]/start-session/page.tsx b/app/dashboard/course/[courseId]/start-session/page.tsx
index af4e7bf..9e38967 100644
--- a/app/dashboard/course/[courseId]/start-session/page.tsx
+++ b/app/dashboard/course/[courseId]/start-session/page.tsx
@@ -30,6 +30,7 @@ import {
     getQuestionsForSession,
 } from "@/services/session";
 
+
 export default function StartSession() {
     const params = useParams();
     const router = useRouter();
@@ -183,6 +184,7 @@ export default function StartSession() {
 
     const activeQuestion = questions ? questions.find((q) => q.id === activeQuestionId) : null;
     const totalVotes = chartData.reduce((sum, item) => sum + item.Votes, 0);
+    
 
     return (
         <div className="flex flex-col items-center p-4">
@@ -213,7 +215,7 @@ export default function StartSession() {
                                     data={chartData}
                                     layout="vertical"
                                     barCategoryGap={20}
-                                    margin={{ left: 100, right: 20, top: 20, bottom: 20 }}
+                                    margin={{ left: 100, right: 20, top: 0, bottom: 0 }}
                                 >
                                     <XAxis type="number" domain={[0, totalVotes]} hide />
                                     <YAxis
@@ -222,7 +224,7 @@ export default function StartSession() {
                                         tick={<LetteredYAxisTick />}
                                         tickLine={false}
                                         axisLine={false}
-                                        tickMargin={8}
+                                        tickMargin={9}
                                         style={{ fill: "#000" }}
                                     />
                                     <ChartTooltip
diff --git a/components/YAxisTick.tsx b/components/YAxisTick.tsx
index 1935014..c4d1400 100644
--- a/components/YAxisTick.tsx
+++ b/components/YAxisTick.tsx
@@ -12,36 +12,45 @@ export function LetteredYAxisTick({ x = 0, y = 0, payload }: EllipsisYAxisTickPr
     if (!payload) return null;
 
     const fullText = payload.value;
-    const maxChars = 15;
-    const truncated =
-        fullText.length > maxChars ? fullText.slice(0, maxChars) + " . . . " : fullText;
+    const maxChars = 10;
+    const truncated = fullText.length > maxChars ? fullText.slice(0, maxChars) : fullText;
 
     return (
         <g transform={`translate(${x},${y})`}>
-            <text textAnchor="end" fill="#000" dy={4} dx={-2} fontSize={12}>
+            <text textAnchor="end" fill="#000" dy={4} dx={-2} fontSize={14} fontWeight={"Bold"}>
                 {truncated}
             </text>
             {fullText.length > maxChars && (
-                <foreignObject x={-16.9} y={-6} width={20} height={20}>
-                    <Popover>
-                        <PopoverTrigger asChild>
-                            <button
-                                style={{
-                                    background: "none",
-                                    border: "none",
-                                    cursor: "pointer",
-                                    padding: 0,
-                                }}
-                            >
-                                <MoreHorizontal size={16} />
-                            </button>
-                        </PopoverTrigger>
-                        <PopoverContent>
-                            <div style={{ padding: "0.5rem 1rem", whiteSpace: "normal" }}>
-                                {fullText}
-                            </div>
-                        </PopoverContent>
-                    </Popover>
+                <foreignObject x={-10} y={-12} width={30} height={30}>
+                    <div
+                        style={{
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            width: "100%",
+                            height: "100%",
+                        }}
+                    >
+                        <Popover>
+                            <PopoverTrigger asChild>
+                                <button
+                                    style={{
+                                        background: "none",
+                                        border: "none",
+                                        cursor: "pointer",
+                                        padding: 0,
+                                    }}
+                                >
+                                    <MoreHorizontal size={16} />
+                                </button>
+                            </PopoverTrigger>
+                            <PopoverContent>
+                                <div style={{ padding: "0.5rem 1rem", whiteSpace: "normal" }}>
+                                    {fullText}
+                                </div>
+                            </PopoverContent>
+                        </Popover>
+                    </div>
                 </foreignObject>
             )}
         </g>