Merge pull request #709 from IntersectMBO/699-ga-card-very-long-title…

…-without-spaces-goes-beyond-card [#699] GA - card - very long title without spaces goes beyond card
IntersectMBO · Apr 14, 2024 · ca1677d · ca1677d
2 parents f9bbeaa + afadc29
commit ca1677d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 20 deletions.
diff --git a/govtool/frontend/src/components/atoms/VotingPowerChips.test.tsx b/govtool/frontend/src/components/atoms/VotingPowerChips.test.tsx
@@ -11,26 +11,18 @@ describe("VotingPowerChips", () => {
     Hooks,
     "useGetDRepVotingPowerQuery",
   );
-  const mockUseGetAdaHolderVotingPowerQuery = vi.spyOn(
-    Hooks,
-    "useGetAdaHolderVotingPowerQuery",
-  );
   const mockUseScreenDimension = vi.spyOn(Hooks, "useScreenDimension");
   const mockCorrectAdaFormat = vi.spyOn(Utils, "correctAdaFormat");
   const mockUseTranslation = vi.spyOn(Hooks, "useTranslation");
   const mockUseGetVoterInfo = vi.spyOn(Hooks, "useGetVoterInfo");
 
   it("renders loading spinner when data is loading", () => {
     mockUseCardano.mockReturnValue({
-      stakeKey: "fake_key",
-      isEnableLoading: "demos",
+      isEnableLoading: 'demos',
     } as ReturnType<typeof Context.useCardano>);
     mockUseGetDRepVotingPowerQuery.mockReturnValue(
       {} as ReturnType<typeof Hooks.useGetDRepVotingPowerQuery>,
     );
-    mockUseGetAdaHolderVotingPowerQuery.mockReturnValue(
-      {} as ReturnType<typeof Hooks.useGetAdaHolderVotingPowerQuery>,
-    );
     mockUseScreenDimension.mockReturnValue({
       isMobile: false,
       screenWidth: 1024,
@@ -39,7 +31,7 @@ describe("VotingPowerChips", () => {
       t: (key: string) => key,
     } as ReturnType<typeof Hooks.useTranslation>);
     mockUseGetVoterInfo.mockReturnValue(
-      {} as ReturnType<typeof Hooks.useGetVoterInfo>,
+      { voter: { isRegisteredAsDRep: true } } as ReturnType<typeof Hooks.useGetVoterInfo>,
     );
 
     render(<VotingPowerChips />);
@@ -48,15 +40,11 @@ describe("VotingPowerChips", () => {
 
   it("displays formatted ADA amount when data is available and not loading", () => {
     mockUseCardano.mockReturnValue({
-      stakeKey: "fake_key",
       isEnableLoading: null,
     } as ReturnType<typeof Context.useCardano>);
     mockUseGetDRepVotingPowerQuery.mockReturnValue({
       dRepVotingPower: 1000,
     } as ReturnType<typeof Hooks.useGetDRepVotingPowerQuery>);
-    mockUseGetAdaHolderVotingPowerQuery.mockReturnValue({
-      votingPower: 500,
-    } as ReturnType<typeof Hooks.useGetAdaHolderVotingPowerQuery>);
     mockUseScreenDimension.mockReturnValue({
       isMobile: false,
       screenWidth: 1024,
@@ -73,19 +61,15 @@ describe("VotingPowerChips", () => {
     expect(screen.getByText(/₳ 1000/)).toBeInTheDocument();
   });
 
-  it("displays the tooltip correctly for DRep registered users", async () => {
+  it("displays the tooltip correctly for non-mobile DRep registered users", async () => {
     mockUseCardano.mockReturnValue({
-      stakeKey: "fake_key",
       isEnableLoading: null,
     } as ReturnType<typeof Context.useCardano>);
     mockUseGetDRepVotingPowerQuery.mockReturnValue({
       dRepVotingPower: 1000,
     } as ReturnType<typeof Hooks.useGetDRepVotingPowerQuery>);
-    mockUseGetAdaHolderVotingPowerQuery.mockReturnValue({
-      votingPower: 500,
-    } as ReturnType<typeof Hooks.useGetAdaHolderVotingPowerQuery>);
     mockUseScreenDimension.mockReturnValue({
-      isMobile: true,
+      isMobile: false,
       screenWidth: 800,
     } as ReturnType<typeof Hooks.useScreenDimension>);
     mockUseTranslation.mockReturnValue({

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionCardHeader.tsx b/govtool/frontend/src/components/molecules/GovernanceActionCardHeader.tsx
@@ -21,6 +21,8 @@ export const GovernanceActionCardHeader = ({
         display: "flex",
         alignItems: "center",
         mb: "20px",
+        overflow: "hidden",
+
       }}
       data-testid="governance-action-card-header"
     >
@@ -29,6 +31,10 @@ export const GovernanceActionCardHeader = ({
           fontSize: 18,
           fontWeight: 600,
           lineHeight: "24px",
+          display: "-webkit-box",
+          WebkitBoxOrient: "vertical",
+          WebkitLineClamp: 2,
+          wordBreak: "break-word",
           ...(isDataMissing && { color: "#9E2323" }),
         }}
       >