fix: code improvement in court branch section and field component

Author: kemuru

web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx

@@ -1,11 +1,8 @@
 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";
@@ -67,19 +64,6 @@ const StyledField = styled(Field)`
   }
 `;
 
-const StyledLink = styled(Link)`
-  width: 100%;
-  :hover {
-    label {
-      &.value {
-        cursor: pointer;
-        color: ${({ theme }) => theme.primaryBlue};
-        text-decoration: underline;
-      }
-    }
-  }
-`;
-
 type IDisputeInfoCard = { fieldItems: FieldItem[] } & IDisputeInfo;
 
 const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
@@ -91,7 +75,6 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
   disputeID,
   round,
 }) => {
-  const scrollTop = useScrollTop();
   const { data } = useCourtTree();
   const courtPath = getCourtsPath(data?.court, courtId);
   const items = useMemo(
@@ -104,9 +87,13 @@ const DisputeInfoCard: React.FC<IDisputeInfoCard> = ({
     <Container>
       {court && courtId && isOverview && (
         <CourtBranchFieldContainer>
-          <StyledLink to={`/courts/${courtId}`} onClick={() => scrollTop()}>
-            <StyledField icon={LawBalanceIcon} name="Court Branch" value={courtBranchValue} {...{ isOverview }} />
-          </StyledLink>
+          <StyledField
+            link={`/courts/${courtId}`}
+            icon={LawBalanceIcon}
+            name="Court Branch"
+            value={courtBranchValue}
+            {...{ isOverview }}
+          />
         </CourtBranchFieldContainer>
       )}
       <RestOfFieldsContainer {...{ isOverview }}>

web/src/components/Field.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 
 import { Link } from "react-router-dom";
 
-import { landscapeStyle } from "styles/landscapeStyle";
+import { useScrollTop } from "hooks/useScrollTop";
 
 const FieldContainer = styled.div<FieldContainerProps>`
   display: flex;
@@ -61,6 +62,8 @@ const LinkContainer = styled.div``;
 
 const StyledLink = styled(Link)`
   color: ${({ theme }) => theme.primaryBlue};
+  text-wrap: auto;
+  justify-content: end;
 `;
 
 type FieldContainerProps = {
@@ -93,6 +96,8 @@ const Field: React.FC<IField> = ({
   isJurorBalance,
   className,
 }) => {
+  const scrollTop = useScrollTop();
+
   return (
     <FieldContainer isList={displayAsList} {...{ isOverview, isJurorBalance, width, className }}>
       <Icon />
@@ -103,6 +108,7 @@ const Field: React.FC<IField> = ({
             to={link}
             onClick={(event) => {
               event.stopPropagation();
+              scrollTop();
             }}
           >
             {value}