Responsive fixes

components/alert/alert-container.tsx

@@ -7,10 +7,10 @@ const AlertContainer: FC = () => {
   const { alerts } = useAlertContext();
 
   return (
-    <div className="fixed bottom-0 right-0 w-96 m-10">
+    <div className="fixed top-0 right-0 w-72 md:w-96 m-4 z-50">
       {alerts.map((alert: IAlert) => (
         <AlertCard
-          className="mt-4 drop-shadow-lg"
+          className="drop-shadow-lg mb-4"
           key={alert.id}
           message={alert.message}
           description={resolveDescription(alert)}

context/AlertContext.tsx

@@ -28,15 +28,26 @@ export const AlertProvider: React.FC<{ children: React.ReactNode }> = ({
 
   // Add a new alert to the list
   const addAlert = (message: string, alertOptions?: AlertOptions) => {
+    const newAlertList = ([] as IAlert[]).concat(alerts);
+
     // Clean duplicates
     const idx = alerts.findIndex((a) => {
       if (a.message !== message) return false;
       else if (a.description !== alertOptions?.description) return false;
       else if (a.type !== alertOptions?.type) return false;
-
       return true;
     });
-    if (idx >= 0) removeAlert(idx);
+    if (idx >= 0) {
+      const [prevAlert] = newAlertList.splice(idx, 1);
+      clearTimeout(prevAlert.dismissTimeout);
+      const timeout = alertOptions?.timeout ?? DEFAULT_ALERT_TIMEOUT;
+      prevAlert.dismissTimeout = setTimeout(
+        () => removeAlert(prevAlert.id),
+        timeout
+      );
+      setAlerts(newAlertList.concat(prevAlert));
+      return;
+    }
 
     const newAlert: IAlert = {
       id: Date.now(),
@@ -48,13 +59,12 @@ export const AlertProvider: React.FC<{ children: React.ReactNode }> = ({
       newAlert.explorerLink =
         client.chain.blockExplorers?.default.url + "/tx/" + alertOptions.txHash;
     }
-    setAlerts(alerts.concat(newAlert));
-
-    // Schedule the clean-up
     const timeout = alertOptions?.timeout ?? DEFAULT_ALERT_TIMEOUT;
-    setTimeout(() => {
-      removeAlert(newAlert.id);
-    }, timeout);
+    newAlert.dismissTimeout = setTimeout(
+      () => removeAlert(newAlert.id),
+      timeout
+    );
+    setAlerts(newAlertList.concat(newAlert));
   };
 
   // Function to remove an alert

plugins/dualGovernance/components/proposal/description.tsx

@@ -19,16 +19,14 @@ export default function ProposalDescription(proposal: Proposal) {
       <h2 className="flex-grow text-2xl text-neutral-900 font-semibold pt-10 pb-3">
         Actions
       </h2>
-      <div className="grid gap-3">
+      <div className="">
         <If not={proposal.actions.length}>
           <p className="pt-2">The proposal has no actions</p>
         </If>
         {proposal.actions?.map?.((action, i) => (
-          <ActionCard
-            key={`${i}-${action.to}-${action.data}`}
-            action={action}
-            idx={i}
-          />
+          <div className="mb-3" key={`${i}-${action.to}-${action.data}`}>
+            <ActionCard action={action} idx={i} />
+          </div>
         ))}
       </div>
     </div>

plugins/dualGovernance/components/vote/vetoes-section.tsx

@@ -2,7 +2,7 @@ import Blockies from "react-blockies";
 import { VetoCastEvent } from "@/plugins/dualGovernance/utils/types";
 import { formatUnits } from "viem";
 import { AddressText } from "@/components/text/address";
-import { Card, Tag } from "@aragon/ods";
+import { Card } from "@aragon/ods";
 import { compactNumber } from "@/utils/numbers";
 import { If } from "@/components/if";
 
@@ -40,7 +40,6 @@ const VetoCard = function ({ veto }: { veto: VetoCastEvent }) {
             </p>
           </div>
         </div>
-        <Tag className="!text-sm" variant="critical" label="Veto" />
       </div>
     </Card>
   );

plugins/dualGovernance/pages/new.tsx

@@ -176,7 +176,7 @@ export default function Create() {
             className="pt-2"
             value={summary}
             onChange={setSummary}
-            placeholder="A detailed description for what the proposal is all about"
+            placeholder="A description for what the proposal is all about"
           />
         </div>
         <div className="mb-6">
@@ -291,16 +291,14 @@ export default function Create() {
                   <p className="flex-grow text-lg text-neutral-900 font-semibold pb-3">
                     Actions
                   </p>
-                  <div className="grid gap-3 mb-10">
-                    <If not={actions.length}>
-                      <p className="pt-2">The proposal has no actions</p>
-                    </If>
+                  <div className="mb-10">
                     {actions?.map?.((action, i) => (
-                      <ActionCard
+                      <div
+                        className="mb-3"
                         key={`${i}-${action.to}-${action.data}`}
-                        action={action}
-                        idx={i}
-                      />
+                      >
+                        <ActionCard action={action} idx={i} />
+                      </div>
                     ))}
                   </div>
                 </Else>

plugins/dualGovernance/pages/proposal.tsx

@@ -81,6 +81,7 @@ export default function ProposalDetail({ id: proposalId }: { id: string }) {
             {bottomSection === "description" ? "Description" : "Vetoes"}
           </h2>
           <ToggleGroup
+            className="justify-end"
             value={bottomSection}
             isMultiSelect={false}
             onChange={(val: string | undefined) =>

plugins/tokenVoting/components/proposal/description.tsx

@@ -19,16 +19,14 @@ export default function ProposalDescription(proposal: Proposal) {
       <h2 className="flex-grow text-2xl text-neutral-900 font-semibold pt-10 pb-3">
         Actions
       </h2>
-      <div className="grid gap-3">
+      <div className="">
         <If not={proposal.actions.length}>
           <p className="pt-2">The proposal has no actions</p>
         </If>
         {proposal.actions?.map?.((action, i) => (
-          <ActionCard
-            key={`${i}-${action.to}-${action.data}`}
-            action={action}
-            idx={i}
-          />
+          <div className="mb-3" key={`${i}-${action.to}-${action.data}`}>
+            <ActionCard action={action} idx={i} />
+          </div>
         ))}
       </div>
     </div>

plugins/tokenVoting/pages/new.tsx

@@ -175,7 +175,7 @@ export default function Create() {
             className="pt-2"
             value={summary}
             onChange={setSummary}
-            placeholder="A detailed description for what the proposal is all about"
+            placeholder="A description for what the proposal is all about"
           />
         </div>
         <div className="mb-6">
@@ -290,16 +290,14 @@ export default function Create() {
                   <p className="flex-grow text-lg text-neutral-900 font-semibold pb-3">
                     Actions
                   </p>
-                  <div className="grid gap-3 mb-10">
-                    <If not={actions.length}>
-                      <p className="pt-2">The proposal has no actions</p>
-                    </If>
+                  <div className="mb-10">
                     {actions?.map?.((action, i) => (
-                      <ActionCard
+                      <div
+                        className="mb-3"
                         key={`${i}-${action.to}-${action.data}`}
-                        action={action}
-                        idx={i}
-                      />
+                      >
+                        <ActionCard action={action} idx={i} />
+                      </div>
                     ))}
                   </div>
                 </Else>

plugins/tokenVoting/pages/proposal.tsx

@@ -149,6 +149,7 @@ export default function ProposalDetail({ id: proposalId }: { id: string }) {
             {bottomSection === "description" ? "Description" : "Votes"}
           </h2>
           <ToggleGroup
+            className="justify-end"
             value={bottomSection}
             isMultiSelect={false}
             onChange={(val: string | undefined) =>

utils/types.ts

@@ -10,4 +10,5 @@ export interface IAlert {
   message: string;
   description?: string;
   explorerLink?: string;
+  dismissTimeout?: ReturnType<typeof setTimeout>;
 }