From 837797a054cd1a3689303397058a27517c876627 Mon Sep 17 00:00:00 2001
From: kemuru <102478601+kemuru@users.noreply.github.com>
Date: Wed, 20 Nov 2024 12:27:27 +0100
Subject: [PATCH] feat: make court branch look good in mobile, redirect to its
 corresponding court when clicking on it

---
 .../DisputeInfo/DisputeInfoCard.tsx           | 23 +++++++++++++++++--
 web/src/hooks/useScrollTop.ts                 | 12 ++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 web/src/hooks/useScrollTop.ts

diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
index 5e300c4b8..82133ec62 100644
--- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
+++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx
@@ -1,8 +1,11 @@
 import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 
+import { Link } from "react-router-dom";
+
 import LawBalanceIcon from "svgs/icons/law-balance.svg";
 
+import { useScrollTop } from "hooks/useScrollTop";
 import { useCourtTree } from "hooks/queries/useCourtTree";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -12,7 +15,7 @@ import { getCourtsPath } from "pages/Courts/CourtDetails";
 
 import CardLabel from "../CardLabels";
 
-import { FieldItem, IDisputeInfo } from ".";
+import { FieldItem, IDisputeInfo } from "./index";
 
 const Container = styled.div`
   display: flex;
@@ -59,6 +62,19 @@ const StyledField = styled(Field)`
       margin-left: 8px;
       overflow: hidden;
       text-overflow: ellipsis;
+      text-wrap: auto;
+    }
+  }
+`;
+
+const StyledLink = styled(Link)`
+  :hover {
+    label {
+      &.value {
+        cursor: pointer;
+        color: ${({ theme }) => theme.primaryBlue};
+        text-decoration: underline;
+      }
     }
   }
 `;
@@ -74,6 +90,7 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
   disputeID,
   round,
 }) => {
+  const scrollTop = useScrollTop();
   const { data } = useCourtTree();
   const courtPath = getCourtsPath(data?.court, courtId);
   const items = useMemo(
@@ -86,7 +103,9 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
     <Container>
       {court && courtId && isOverview && (
         <CourtBranchFieldContainer>
-          <StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
+          <StyledLink to={`/courts/${courtId}`} onClick={() => scrollTop()}>
+            <StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
+          </StyledLink>
         </CourtBranchFieldContainer>
       )}
       <RestOfFieldsContainer {...{ isOverview }}>
diff --git a/web/src/hooks/useScrollTop.ts b/web/src/hooks/useScrollTop.ts
new file mode 100644
index 000000000..216a42901
--- /dev/null
+++ b/web/src/hooks/useScrollTop.ts
@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { OverlayScrollContext } from "context/OverlayScrollContext";
+
+export const useScrollTop = () => {
+  const osInstanceRef = useContext(OverlayScrollContext);
+
+  const scrollTop = () => {
+    osInstanceRef?.current?.osInstance().elements().viewport.scroll({ top: 0 });
+  };
+
+  return scrollTop;
+};