Refactor balance section styling for improved mobile responsiveness

This commit is contained in:
void-57 2025-10-14 05:20:21 +05:30
parent 27ffe9240d
commit e12d9e4391
2 changed files with 19 additions and 14 deletions

View File

@ -382,7 +382,7 @@
style="display: none" style="display: none"
> >
<div class="balance-header"> <div class="balance-header">
<h3><i class="fas fa-wallet"></i> Address Balance</h3> <h3><i class="fas fa-wallet"></i> Balance</h3>
<div class="balance-actions"> <div class="balance-actions">
<button <button
id="shareAddressBtn" id="shareAddressBtn"

View File

@ -2440,15 +2440,15 @@ body {
} }
.share-btn { .share-btn {
padding: 0.5rem 0.75rem; padding: 0.4rem 0.6rem;
font-size: 0.8rem; font-size: 0.75rem;
border-radius: var(--border-radius-sm); border-radius: var(--border-radius-sm);
min-width: auto; min-width: auto;
min-height: 36px; min-height: 32px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.4rem; gap: 0.3rem;
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;
border-color: var(--primary-color); border-color: var(--primary-color);
@ -2462,37 +2462,42 @@ body {
.toggle-container { .toggle-container {
flex-shrink: 0; flex-shrink: 1;
min-width: 0;
} }
.toggle-btn { .toggle-btn {
padding: 0.4rem 0.8rem; padding: 0.35rem 0.55rem;
font-size: 0.8rem; font-size: 0.75rem;
min-height: 36px; min-height: 32px;
white-space: nowrap;
} }
.balance-header { .balance-header {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 0.5rem;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.balance-header h3 { .balance-header h3 {
margin-bottom: 0; margin-bottom: 0;
flex-shrink: 0; flex-shrink: 1;
font-size: 1rem; font-size: 0.9rem;
min-width: 0;
} }
.balance-actions { .balance-actions {
flex-shrink: 0; flex-shrink: 0;
gap: 0.75rem; gap: 0.5rem;
max-width: 60%;
} }
/* Improve overall balance section on mobile */ /* Improve overall balance section on mobile */
.balance-info { .balance-info {
padding: 1rem; padding: 0.75rem;
margin: 0.5rem;
} }
.balance-display { .balance-display {