Skip to content

Make asset overview page responsive - #12636

Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom
fs-artist-coins-responsive
Aug 1, 2025
Merged

Make asset overview page responsive#12636
faridsalau merged 1 commit into
fs-artist-coinsfrom
fs-artist-coins-responsive

Conversation

@faridsalau

@faridsalaufaridsalau commented Aug 1, 2025

Copy link
Copy Markdown
Contributor

Description

This PR makes the asset pages responsive as seen in the design. On tablet and smaller screens, we move all of the content into a full width single row column. The PR also introduces an error boundary state for the BalanceSection

How Has This Been Tested?

npm run web:prod and navigate to an asset page

@changeset-bot

changeset-botBot commented Aug 1, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 438ae15

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@faridsalau
faridsalau changed the base branch from main to fs-artist-coinsAugust 1, 2025 17:47
Kyle-Shanks
Kyle-Shanks reviewed Aug 1, 2025
View reviewed changes
Comment threadpackages/web/src/pages/asset-detail-page/AssetDetailContent.tsx
const LEFT_SECTION_WIDTH = '704px'
const RIGHT_SECTION_WIDTH = '360px'

const useStyles = makeResponsiveStyles(({ media, theme }) => ({

@Kyle-ShanksKyle-ShanksAug 1, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice

@faridsalau
faridsalau merged commit 1f0127a into fs-artist-coinsAug 1, 2025
8 of 12 checks passed
@faridsalau
faridsalau deleted the fs-artist-coins-responsive branch August 1, 2025 17:56
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
+1 more reviewer
@Kyle-ShanksKyle-ShanksKyle-Shanks approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

size/M

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@faridsalau@dylanjeffers@Kyle-Shanks
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Make asset overview page responsive by faridsalau · Pull Request #12636 · AudiusProject/apps · GitHub
Skip to content
Make asset overview page responsive - #12636
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Aug 1, 2025
Merged
Make asset overview page responsive#12636
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Aug 1, 2025

Copy link


Copy Markdown

Contributor
Description
This PR makes the asset pages responsive as seen in the design. On tablet and smaller screens, we move all of the content into a full width single row column. The PR also introduces an error boundary state for the BalanceSection
How Has This Been Tested?
npm run web:prod and navigate to an asset page
@changeset-bot
changeset-botBot
commented
Aug 1, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 438ae15
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
changed the base branch from
main
to
fs-artist-coinsAugust 1, 2025 17:47
Kyle-Shanks
Kyle-Shanks
reviewed
Aug 1, 2025
View reviewed changes
Comment threadpackages/web/src/pages/asset-detail-page/AssetDetailContent.tsx
const LEFT_SECTION_WIDTH = '704px'
const RIGHT_SECTION_WIDTH = '360px'

const useStyles = makeResponsiveStyles(({ media, theme }) => ({
@Kyle-ShanksKyle-ShanksAug 1, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice
@faridsalau
faridsalau
merged commit 1f0127a
into
fs-artist-coinsAug 1, 2025

8 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-artist-coins-responsive

branch
August 1, 2025 17:56
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes

+1 more reviewer

@Kyle-ShanksKyle-ShanksKyle-Shanks approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@faridsalau@dylanjeffers@Kyle-Shanks

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Make asset overview page responsive by faridsalau · Pull Request #12636 · AudiusProject/apps · GitHub
Skip to content
Make asset overview page responsive - #12636
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Aug 1, 2025
Merged
Make asset overview page responsive#12636
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Aug 1, 2025

Copy link


Copy Markdown

Contributor
Description
This PR makes the asset pages responsive as seen in the design. On tablet and smaller screens, we move all of the content into a full width single row column. The PR also introduces an error boundary state for the BalanceSection
How Has This Been Tested?
npm run web:prod and navigate to an asset page
@changeset-bot
changeset-botBot
commented
Aug 1, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 438ae15
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
changed the base branch from
main
to
fs-artist-coinsAugust 1, 2025 17:47
Kyle-Shanks
Kyle-Shanks
reviewed
Aug 1, 2025
View reviewed changes
Comment threadpackages/web/src/pages/asset-detail-page/AssetDetailContent.tsx
const LEFT_SECTION_WIDTH = '704px'
const RIGHT_SECTION_WIDTH = '360px'

const useStyles = makeResponsiveStyles(({ media, theme }) => ({
@Kyle-ShanksKyle-ShanksAug 1, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice
@faridsalau
faridsalau
merged commit 1f0127a
into
fs-artist-coinsAug 1, 2025

8 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-artist-coins-responsive

branch
August 1, 2025 17:56
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes

+1 more reviewer

@Kyle-ShanksKyle-ShanksKyle-Shanks approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@faridsalau@dylanjeffers@Kyle-Shanks

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Make asset overview page responsive by faridsalau · Pull Request #12636 · AudiusProject/apps · GitHub
Skip to content
Make asset overview page responsive - #12636
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Aug 1, 2025
Merged
Make asset overview page responsive#12636
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Aug 1, 2025

Copy link


Copy Markdown

Contributor
Description
This PR makes the asset pages responsive as seen in the design. On tablet and smaller screens, we move all of the content into a full width single row column. The PR also introduces an error boundary state for the BalanceSection
How Has This Been Tested?
npm run web:prod and navigate to an asset page
@changeset-bot
changeset-botBot
commented
Aug 1, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 438ae15
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
changed the base branch from
main
to
fs-artist-coinsAugust 1, 2025 17:47
Kyle-Shanks
Kyle-Shanks
reviewed
Aug 1, 2025
View reviewed changes
Comment threadpackages/web/src/pages/asset-detail-page/AssetDetailContent.tsx
const LEFT_SECTION_WIDTH = '704px'
const RIGHT_SECTION_WIDTH = '360px'

const useStyles = makeResponsiveStyles(({ media, theme }) => ({
@Kyle-ShanksKyle-ShanksAug 1, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice
@faridsalau
faridsalau
merged commit 1f0127a
into
fs-artist-coinsAug 1, 2025

8 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-artist-coins-responsive

branch
August 1, 2025 17:56
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes

+1 more reviewer

@Kyle-ShanksKyle-ShanksKyle-Shanks approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@faridsalau@dylanjeffers@Kyle-Shanks

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Make asset overview page responsive by faridsalau · Pull Request #12636 · AudiusProject/apps · GitHub
Skip to content
Make asset overview page responsive - #12636
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Aug 1, 2025
Merged
Make asset overview page responsive#12636
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Aug 1, 2025

Copy link


Copy Markdown

Contributor
Description
This PR makes the asset pages responsive as seen in the design. On tablet and smaller screens, we move all of the content into a full width single row column. The PR also introduces an error boundary state for the BalanceSection
How Has This Been Tested?
npm run web:prod and navigate to an asset page
@changeset-bot
changeset-botBot
commented
Aug 1, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 438ae15
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
changed the base branch from
main
to
fs-artist-coinsAugust 1, 2025 17:47
Kyle-Shanks
Kyle-Shanks
reviewed
Aug 1, 2025
View reviewed changes
Comment threadpackages/web/src/pages/asset-detail-page/AssetDetailContent.tsx
const LEFT_SECTION_WIDTH = '704px'
const RIGHT_SECTION_WIDTH = '360px'

const useStyles = makeResponsiveStyles(({ media, theme }) => ({
@Kyle-ShanksKyle-ShanksAug 1, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice
@faridsalau
faridsalau
merged commit 1f0127a
into
fs-artist-coinsAug 1, 2025

8 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-artist-coins-responsive

branch
August 1, 2025 17:56
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes

+1 more reviewer

@Kyle-ShanksKyle-ShanksKyle-Shanks approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@faridsalau@dylanjeffers@Kyle-Shanks

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Make asset overview page responsive by faridsalau · Pull Request #12636 · AudiusProject/apps · GitHub
Skip to content
Make asset overview page responsive - #12636
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Aug 1, 2025
Merged
Make asset overview page responsive#12636
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Aug 1, 2025

Copy link


Copy Markdown

Contributor
Description
This PR makes the asset pages responsive as seen in the design. On tablet and smaller screens, we move all of the content into a full width single row column. The PR also introduces an error boundary state for the BalanceSection
How Has This Been Tested?
npm run web:prod and navigate to an asset page
@changeset-bot
changeset-botBot
commented
Aug 1, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 438ae15
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
changed the base branch from
main
to
fs-artist-coinsAugust 1, 2025 17:47
Kyle-Shanks
Kyle-Shanks
reviewed
Aug 1, 2025
View reviewed changes
Comment threadpackages/web/src/pages/asset-detail-page/AssetDetailContent.tsx
const LEFT_SECTION_WIDTH = '704px'
const RIGHT_SECTION_WIDTH = '360px'

const useStyles = makeResponsiveStyles(({ media, theme }) => ({
@Kyle-ShanksKyle-ShanksAug 1, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice
@faridsalau
faridsalau
merged commit 1f0127a
into
fs-artist-coinsAug 1, 2025

8 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-artist-coins-responsive

branch
August 1, 2025 17:56
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes

+1 more reviewer

@Kyle-ShanksKyle-ShanksKyle-Shanks approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@faridsalau@dylanjeffers@Kyle-Shanks

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
Make asset overview page responsive by faridsalau · Pull Request #12636 · AudiusProject/apps · GitHub
Skip to content
Make asset overview page responsive - #12636
Merged
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Aug 1, 2025
Merged
Make asset overview page responsive#12636
faridsalau merged 1 commit into
fs-artist-coinsfrom 
fs-artist-coins-responsive
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Aug 1, 2025

Copy link


Copy Markdown

Contributor
Description
This PR makes the asset pages responsive as seen in the design. On tablet and smaller screens, we move all of the content into a full width single row column. The PR also introduces an error boundary state for the BalanceSection
How Has This Been Tested?
npm run web:prod and navigate to an asset page
@changeset-bot
changeset-botBot
commented
Aug 1, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: 438ae15
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
Click here to learn what changesets are, and how to add one.
Click here if you're a maintainer who wants to add a changeset to this PR
@faridsalau
faridsalau
changed the base branch from
main
to
fs-artist-coinsAugust 1, 2025 17:47
Kyle-Shanks
Kyle-Shanks
reviewed
Aug 1, 2025
View reviewed changes
Comment threadpackages/web/src/pages/asset-detail-page/AssetDetailContent.tsx
const LEFT_SECTION_WIDTH = '704px'
const RIGHT_SECTION_WIDTH = '360px'

const useStyles = makeResponsiveStyles(({ media, theme }) => ({
@Kyle-ShanksKyle-ShanksAug 1, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice
@faridsalau
faridsalau
merged commit 1f0127a
into
fs-artist-coinsAug 1, 2025

8 of 12 checks passed

@faridsalau
faridsalau
deleted the

fs-artist-coins-responsive

branch
August 1, 2025 17:56
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes

+1 more reviewer

@Kyle-ShanksKyle-ShanksKyle-Shanks approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

size/M

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

3 participants

@faridsalau@dylanjeffers@Kyle-Shanks