diff --git a/.changelog/532.bugfix.2.md b/.changelog/532.bugfix.2.md
new file mode 100644
index 000000000..ec3542f5b
--- /dev/null
+++ b/.changelog/532.bugfix.2.md
@@ -0,0 +1 @@
+Adjust layout to new breakpoint
diff --git a/.changelog/532.bugfix.md b/.changelog/532.bugfix.md
new file mode 100644
index 000000000..1b4b9d406
--- /dev/null
+++ b/.changelog/532.bugfix.md
@@ -0,0 +1 @@
+Set laptop breakpoint to handle more edge cases
diff --git a/src/app/components/Blocks/index.tsx b/src/app/components/Blocks/index.tsx
index c168db005..937268d0a 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/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx
index 443a519b3..99270824d 100644
--- a/src/app/components/PageLayout/Header.tsx
+++ b/src/app/components/PageLayout/Header.tsx
@@ -51,10 +51,10 @@ export const Header: FC = () => {
{scope && (
<>
-
+
-
+
>
)}
diff --git a/src/app/components/PageLayout/NetworkSelector.tsx b/src/app/components/PageLayout/NetworkSelector.tsx
index 940926fac..7a1947fc1 100644
--- a/src/app/components/PageLayout/NetworkSelector.tsx
+++ b/src/app/components/PageLayout/NetworkSelector.tsx
@@ -34,7 +34,7 @@ type NetworkSelectorProps = {
export const NetworkSelector: FC = ({ layer, network }) => {
const { t } = useTranslation()
const navigate = useNavigate()
- const { isDesktop, isMobile } = useScreenSize()
+ const { isMobile, isTablet } = useScreenSize()
const labels = getNetworkNames(t)
const [openDrawer, setOpenDrawer] = useState(false)
const handleDrawerClose = () => setOpenDrawer(false)
@@ -46,7 +46,7 @@ export const NetworkSelector: FC = ({ layer, network }) =>
sx={{
display: 'flex',
alignItems: 'center',
- justifyContent: isDesktop ? 'center' : 'flex-end',
+ justifyContent: isTablet ? 'flex-end' : 'center',
}}
>
= ({ layer, network }) =>
{!isMobile && (
)}
- {isDesktop && network !== Network.mainnet && (
+ {!isTablet && network !== Network.mainnet && (
> = ({ children, mobileFooterAction }) => {
const theme = useTheme()
- const { isMobile, isDesktop } = useScreenSize()
+ const { isMobile, isTablet } = useScreenSize()
const scope = useScopeParam()
const isApiOffline = useIsApiOffline(scope?.network || Network.mainnet)
@@ -62,7 +62,7 @@ export const PageLayout: FC> = ({ children, m
mb: 6,
}}
>
-
+
)}
{children}
diff --git a/src/app/hooks/useScreensize.ts b/src/app/hooks/useScreensize.ts
index f1cd032e6..d93b91820 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 48683fc59..f117d26c3 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",
diff --git a/src/styles/theme/defaultTheme.ts b/src/styles/theme/defaultTheme.ts
index cea932ace..984fa4fbe 100644
--- a/src/styles/theme/defaultTheme.ts
+++ b/src/styles/theme/defaultTheme.ts
@@ -83,6 +83,12 @@ declare module '@mui/material/styles' {
}
export const defaultTheme = createTheme({
+ breakpoints: {
+ values: {
+ ...createTheme().breakpoints.values,
+ lg: 1024,
+ },
+ },
palette: {
background: {
default: COLORS.brandDark,