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) {