From 986fbb84d30bc0afd3613823372aafc2d460ecac Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 14 Jun 2023 14:04:08 +0200
Subject: [PATCH] Abbreviate transaction table column title on tablet

---
 .changelog/532.bugfix.2.md          | 1 +
 src/app/components/Blocks/index.tsx | 8 ++++++--
 src/app/hooks/useScreensize.ts      | 3 ++-
 src/locales/en/translation.json     | 1 +
 4 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changelog/532.bugfix.2.md

diff --git a/.changelog/532.bugfix.2.md b/.changelog/532.bugfix.2.md
new file mode 100644
index 0000000000..afdd0ddcb2
--- /dev/null
+++ b/.changelog/532.bugfix.2.md
@@ -0,0 +1 @@
+Abbreviate transaction table column title on laptop
diff --git a/src/app/components/Blocks/index.tsx b/src/app/components/Blocks/index.tsx
index c168db0057..937268d0a3 100644
--- a/src/app/components/Blocks/index.tsx
+++ b/src/app/components/Blocks/index.tsx
@@ -6,6 +6,7 @@ import { paraTimesConfig } from '../../../config'
 import { TablePaginationProps } from '../Table/TablePagination'
 import { BlockHashLink, BlockLink } from './BlockLink'
 import { formatDistanceStrict } from '../../utils/dateFormatter'
+import { useScreenSize } from '../../hooks/useScreensize'
 
 export type TableRuntimeBlock = RuntimeBlock & {
   markAsNew?: boolean
@@ -28,12 +29,15 @@ type BlocksProps = {
 export const Blocks = (props: BlocksProps) => {
   const { isLoading, blocks, verbose, pagination, limit } = props
   const { t } = useTranslation()
-
+  const { isLaptop } = useScreenSize()
   const tableColumns: TableColProps[] = [
     { content: t('common.fill') },
     { content: t('common.height'), align: TableCellAlign.Right },
     { content: t('common.age'), align: TableCellAlign.Right },
-    { content: t('common.transactions'), align: TableCellAlign.Right },
+    {
+      content: isLaptop ? t('common.transactionAbbreviation') : t('common.transactions'),
+      align: TableCellAlign.Right,
+    },
     ...(verbose ? [{ content: t('common.hash') }] : []),
     { content: t('common.size'), align: TableCellAlign.Right },
     ...(verbose ? [{ content: t('common.gasUsed'), align: TableCellAlign.Right }] : []),
diff --git a/src/app/hooks/useScreensize.ts b/src/app/hooks/useScreensize.ts
index f1cd032e60..d93b918209 100644
--- a/src/app/hooks/useScreensize.ts
+++ b/src/app/hooks/useScreensize.ts
@@ -6,6 +6,7 @@ export const useScreenSize = () => {
   return {
     isMobile: useMediaQuery(theme.breakpoints.down('sm')),
     isTablet: useMediaQuery(theme.breakpoints.down('md')),
-    isDesktop: useMediaQuery(theme.breakpoints.up('md')),
+    isLaptop: useMediaQuery(theme.breakpoints.down('lg')),
+    isDesktop: useMediaQuery(theme.breakpoints.up('lg')),
   }
 }
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 828f530df7..2cc28e1e9c 100644
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -76,6 +76,7 @@
     "to": "To",
     "totalSent": "Total Sent",
     "transactions": "Transactions",
+    "transactionAbbreviation": "Txs",
     "txnFee": "Txn Fee",
     "type": "Type",
     "unknown": "Unknown",