Add Changelog Fragment

Author: kaja-osojnik

.changelog/2258.trivial.md

@@ -0,0 +1 @@
+Update Box element.

src/app/components/PageLayout/index.tsx

@@ -14,10 +14,10 @@ interface PageLayoutProps {
 }
 
 export const PageLayout: FC<PropsWithChildren<PageLayoutProps>> = ({ children, mobileFooterAction }) => {
-  const theme = useTheme()
   const { isMobile } = useScreenSize()
   const scope = useScopeParam()
   const isApiReachable = useIsApiReachable(scope?.network ?? 'mainnet').reachable
+  const theme = useTheme()
 
   return (
     <>

src/app/components/Tokens/TokenDetails.tsx

@@ -42,7 +42,7 @@ export const TokenDetails: FC<{
           address={token.eth_contract_addr ?? token.contract_addr}
           name={token.name}
         />
-        <div className="ml-3 font-bold text-muted-foreground whitespace-nowrap">
+        <div className="ml-2 font-bold text-muted-foreground whitespace-nowrap">
           <HighlightedText text={token.symbol} />
         </div>
       </dd>

src/app/components/Tokens/TokenLinkWithIcon.tsx

@@ -16,7 +16,7 @@ export const TokenLinkWithIcon: FC<{
   const { t } = useTranslation()
   const { metadata } = useAccountMetadata(scope, address)
   return (
-    <div className="flex items-center gap-4">
+    <div className="flex items-center gap-2">
       <Tooltip
         placement="top"
         arrow

src/app/components/Tooltip/MaybeWithTooltip.tsx

@@ -27,11 +27,7 @@ export const MaybeWithTooltip: FC<MaybeWithTooltipProps> = ({ title, children, s
   return (
     <Tooltip
       placement="top"
-      title={
-        <div className="flex items-center gap-2 md:mx-0 -mx-3 min-w-0 [overflow-wrap:anywhere] rounded-lg">
-          {title}
-        </div>
-      }
+      title={<div className="flex items-center gap-2 md:mx-0 -mx-3 min-w-0 wrap-anywhere">{title}</div>}
       disableFocusListener={!title}
       disableHoverListener={!title}
       disableTouchListener={!title}