From e0849e8af01bb091c782000ec3ff3d37b277d80e Mon Sep 17 00:00:00 2001
From: biwasbhandari <biwas2059@gmail.com>
Date: Sat, 29 Nov 2025 12:47:53 +0545
Subject: [PATCH 1/2] update

---
 src/components/proposals/ProposalCard.tsx    | 14 ++++++-------
 src/components/proposals/VoteStatusChart.tsx | 22 ++++++++++++--------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/proposals/ProposalCard.tsx b/src/components/proposals/ProposalCard.tsx
index e37b33d0..c56b4eb0 100644
--- a/src/components/proposals/ProposalCard.tsx
+++ b/src/components/proposals/ProposalCard.tsx
@@ -162,7 +162,7 @@ export default function ProposalCard({
         href={`/proposals/${proposal.id}`}
         className="block group cursor-pointer"
       >
-        <div className="py-4 px-8 rounded-sm mb-3 bg-background  group-hover:bg-black transition-colors duration-300 max-w-full overflow-hidden">
+        <div className="py-4 px-4 sm:px-8 rounded-sm mb-3 bg-background  group-hover:bg-black transition-colors duration-300 max-w-full overflow-hidden">
           {/* Header */}
           <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-3 sm:mb-4 gap-3">
             <div className="flex-1 min-w-0">
@@ -171,7 +171,7 @@ export default function ProposalCard({
                   ? `#${proposal.proposal_id}: ${proposal.title}`
                   : proposal.title}
               </h3>
-              <div className="flex flex-wrap items-center gap-2 mb-2">
+              <div className="flex flex-wrap items-center gap-2 mb-2 overflow-hidden">
                 <ProposalStatusBadge
                   proposal={proposal}
                   size="sm"
@@ -294,7 +294,7 @@ export default function ProposalCard({
                         </div>
                         <span
                           role="link"
-                          className="text-sm text-primary hover:text-primary/80 transition-colors break-all cursor-pointer flex items-center gap-2"
+                          className="text-sm text-primary hover:text-primary/80 transition-colors break-words cursor-pointer flex items-center gap-2"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -305,7 +305,7 @@ export default function ProposalCard({
                             );
                           }}
                         >
-                          <span className="inline-block max-w-full break-all">
+                          <span className="inline-block max-w-full break-words">
                             {referenceLink}
                           </span>
                           <ExternalLinkIcon className="h-4 w-4" />
@@ -319,7 +319,7 @@ export default function ProposalCard({
                         </div>
                         <span
                           role="link"
-                          className="text-sm text-primary hover:text-primary/80 transition-colors break-all cursor-pointer flex items-center gap-2"
+                          className="text-sm text-primary hover:text-primary/80 transition-colors break-words cursor-pointer flex items-center gap-2"
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
@@ -343,7 +343,7 @@ export default function ProposalCard({
                               d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                             />
                           </svg>
-                          <span className="inline-block max-w-full break-all">
+                          <span className="inline-block max-w-full break-words">
                             {airdropTxId}
                           </span>
                         </span>
@@ -383,7 +383,7 @@ export default function ProposalCard({
           </div>
 
           {/* Metadata */}
-          <div className="flex flex-wrap items-center gap-2 sm:gap-3 md:gap-4 text-xs text-foreground/75 mb-4">
+          <div className="flex flex-wrap items-center gap-2 sm:gap-3 md:gap-4 text-xs text-foreground/75 mb-4 overflow-hidden">
             {showDAOInfo && (
               <div className="flex items-center gap-1 min-w-0 max-w-[120px] sm:max-w-none">
                 <Building2 className="h-3 w-3 flex-shrink-0" />
diff --git a/src/components/proposals/VoteStatusChart.tsx b/src/components/proposals/VoteStatusChart.tsx
index 94c15e6f..1bca22df 100644
--- a/src/components/proposals/VoteStatusChart.tsx
+++ b/src/components/proposals/VoteStatusChart.tsx
@@ -176,38 +176,42 @@ const VoteStatusChart = ({
       </div>
 
       {/* Vote Counts */}
-      <div className="flex justify-between items-center text-xs sm:text-sm">
-        <div className="flex items-center gap-1">
-          <span className="text-green-500 font-extrabold">For:</span>
+      <div className="flex justify-between items-center text-xs sm:text-sm overflow-hidden">
+        <div className="flex items-center gap-1 min-w-0 flex-1">
+          <span className="text-green-500 font-extrabold flex-shrink-0">
+            For:
+          </span>
           <TokenBalance
             value={voteDisplayData.rawVotesFor}
             decimals={8}
             variant="abbreviated"
             symbol={tokenSymbol}
-            className="font-medium hidden sm:inline"
+            className="font-medium hidden sm:inline truncate"
           />
           <TokenBalance
             value={voteDisplayData.rawVotesFor}
             decimals={8}
             variant="abbreviated"
-            className="font-medium sm:hidden"
+            className="font-medium sm:hidden truncate"
           />
         </div>
 
-        <div className="flex items-center gap-1">
-          <span className="text-red-500 font-extrabold">Against:</span>
+        <div className="flex items-center gap-1 min-w-0 flex-1 justify-end">
+          <span className="text-red-500 font-extrabold flex-shrink-0">
+            Against:
+          </span>
           <TokenBalance
             value={voteDisplayData.rawVotesAgainst}
             decimals={8}
             variant="abbreviated"
             symbol={tokenSymbol}
-            className="font-medium hidden sm:inline"
+            className="font-medium hidden sm:inline truncate"
           />
           <TokenBalance
             value={voteDisplayData.rawVotesAgainst}
             decimals={8}
             variant="abbreviated"
-            className="font-medium sm:hidden"
+            className="font-medium sm:hidden truncate"
           />
         </div>
       </div>

From d56a6fa0e0d690897a85d6f1cea994bcf1a89785 Mon Sep 17 00:00:00 2001
From: biwasbhandari <biwas2059@gmail.com>
Date: Sat, 29 Nov 2025 12:52:31 +0545
Subject: [PATCH 2/2] update

---
 src/components/proposals/ProposalCard.tsx    | 2 +-
 src/components/proposals/VoteStatusChart.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/proposals/ProposalCard.tsx b/src/components/proposals/ProposalCard.tsx
index c56b4eb0..87472ea1 100644
--- a/src/components/proposals/ProposalCard.tsx
+++ b/src/components/proposals/ProposalCard.tsx
@@ -155,7 +155,7 @@ export default function ProposalCard({
     <motion.div
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: false, margin: "0px 0px -100px 0px", amount: 0.3 }}
+      viewport={{ once: true, margin: "0px 0px 0px 0px", amount: 0.3 }}
       transition={{ duration: 0.5, ease: "easeOut" }}
     >
       <Link
diff --git a/src/components/proposals/VoteStatusChart.tsx b/src/components/proposals/VoteStatusChart.tsx
index 1bca22df..470f847f 100644
--- a/src/components/proposals/VoteStatusChart.tsx
+++ b/src/components/proposals/VoteStatusChart.tsx
@@ -94,7 +94,7 @@ const VoteStatusChart = ({
   // Show loading state
   if (isLoadingVotes && !error) {
     return (
-      <div className="flex items-center justify-center p-4">
+      <div className="flex items-center justify-center p-4 min-h-[60px]">
         <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
         <span className="ml-2 text-sm text-muted-foreground">
           Loading vote data...
@@ -106,7 +106,7 @@ const VoteStatusChart = ({
   // Show error state with retry
   if (error || (!hasData && !isLoadingVotes)) {
     return (
-      <div className="flex flex-col items-center justify-center p-4 space-y-2">
+      <div className="flex flex-col items-center justify-center p-4 space-y-2 min-h-[60px]">
         <div className="flex items-center text-destructive">
           <AlertCircle className="h-4 w-4 mr-2" />
           <span className="text-sm">Failed to load vote data</span>
@@ -131,7 +131,7 @@ const VoteStatusChart = ({
 
   if (!voteDisplayData || !calculations || !progressBarCalculations) {
     return (
-      <div className="flex items-center justify-center p-4">
+      <div className="flex items-center justify-center p-4 min-h-[60px]">
         <span className="text-sm text-muted-foreground">
           No vote data available
         </span>
@@ -141,7 +141,7 @@ const VoteStatusChart = ({
 
   // Main vote display
   return (
-    <div className="space-y-2">
+    <div className="space-y-2 min-h-[60px]">
       {/* Vote Progress Bar */}
       <div className="relative">
         <div className="h-3 sm:h-4 bg-muted rounded-sm overflow-hidden relative">