diff --git a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/Header.scss b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/Header.scss index 489be9da..2097b8f8 100644 --- a/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/Header.scss +++ b/packages/browser-wallet/src/popup/popupX/page-layouts/MainLayout/Header/Header.scss @@ -20,6 +20,10 @@ z-index: 1; backdrop-filter: blur(10px); background: rgba($color-black, 0.9); + + .tablet & { + margin-top: rem(60px); + } } &__top { @@ -56,6 +60,7 @@ .tablet & { padding: rem(12px); border-radius: rem(12px); + min-width: rem(100px); } } } @@ -75,6 +80,7 @@ .tablet & { background: unset; + display: none; } &_info { @@ -202,6 +208,12 @@ border-radius: rem(12px); border: 1px solid $color-grey-3; background: $color-grey-1; + + .tablet & { + max-width: rem(655px); + margin-left: auto; + margin-right: auto; + } } &_search-form { diff --git a/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/AddToken.tsx b/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/AddToken.tsx index 637a6b4b..824d09b2 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/AddToken.tsx +++ b/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/AddToken.tsx @@ -189,7 +189,6 @@ function AddToken({ account }: { account: string }) { )} - {isLoading && !haveTokens && } {filteredTokens.map((token) => ( ))} + {isLoading && !haveTokens && } {!!haveTokens && } diff --git a/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/ManageTokens.scss b/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/ManageTokens.scss index e1a51a2a..80bee51c 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/ManageTokens.scss +++ b/packages/browser-wallet/src/popup/popupX/pages/ManageTokens/ManageTokens.scss @@ -18,6 +18,10 @@ overflow: auto; max-height: rem(200px); + .tablet & { + max-height: rem(500px); + } + &::-webkit-scrollbar { display: none; } diff --git a/packages/browser-wallet/src/popup/popupX/pages/Nft/Nft.scss b/packages/browser-wallet/src/popup/popupX/pages/Nft/Nft.scss index ae961f14..1591a69c 100644 --- a/packages/browser-wallet/src/popup/popupX/pages/Nft/Nft.scss +++ b/packages/browser-wallet/src/popup/popupX/pages/Nft/Nft.scss @@ -19,7 +19,7 @@ &__list { display: flex; flex-wrap: wrap; - justify-content: space-between; + justify-content: center; gap: rem(7px); margin-top: rem(8px); diff --git a/packages/browser-wallet/src/popup/shared/window-helpers.ts b/packages/browser-wallet/src/popup/shared/window-helpers.ts index 9c2d95ff..2040ee10 100644 --- a/packages/browser-wallet/src/popup/shared/window-helpers.ts +++ b/packages/browser-wallet/src/popup/shared/window-helpers.ts @@ -3,6 +3,7 @@ import { spawnedPopupUrl, web3IdProofPopupUrl } from '@shared/constants/url'; export const isSpawnedWindow = window.location.href.includes(spawnedPopupUrl); export const isSpawnedWeb3IdProofWindow = window.location.href.includes(web3IdProofPopupUrl); export const isFullscreenWindow = window.location.hash === '#fullscreen'; +export const isFullscreenDemoWindow = window.location.hash === '#fullscreen-demo'; export const haveInitialEntry = (() => { const url = new URL(window.location.href); const navTo = url.searchParams.get('navTo'); diff --git a/packages/browser-wallet/src/popup/shell/Root.tsx b/packages/browser-wallet/src/popup/shell/Root.tsx index 00bafde4..fe91fd2a 100644 --- a/packages/browser-wallet/src/popup/shell/Root.tsx +++ b/packages/browser-wallet/src/popup/shell/Root.tsx @@ -8,6 +8,7 @@ import { Dimensions, large, medium, small } from '@popup/constants/dimensions'; import { popupMessageHandler } from '@popup/shared/message-handler'; import { haveInitialEntry, + isFullscreenDemoWindow, isFullscreenWindow, isSpawnedWeb3IdProofWindow, isSpawnedWindow, @@ -47,6 +48,10 @@ function Scaling({ children }: { children: ReactElement }) { if (isPopupX) { body?.classList.add('popup-x'); html?.classList.add('popup-x'); + + if (isFullscreenDemoWindow) { + html?.classList.add('tablet'); + } } else { body?.classList.remove('popup-x'); html?.classList.remove('popup-x'); @@ -81,6 +86,12 @@ function Scaling({ children }: { children: ReactElement }) { if (isFullscreenWindow) { body.style.margin = '32px auto'; } + + if (isFullscreenDemoWindow) { + body.style.width = `100%`; + body.style.height = `100%`; + body.style.margin = 'auto'; + } } if (dimensions && isSpawnedWindow) {