Skip to content

fix: optimize mobile responsive layout for all pages (Closes #482) #581

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
waterWang wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: optimize mobile responsive layout for all pages (Closes #482) #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions frontend/src/pages/CrossAssetPayment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,14 +173,14 @@ export default function CrossAssetPayment() {
};

return (
<div className="min-h-screen bg-[#0a0a0c] text-white p-8 font-sans">
<div className="min-h-screen bg-[#0a0a0c] text-white p-4 sm:p-6 lg:p-8 font-sans">
<div className="max-w-4xl mx-auto">
<header className="mb-12 flex items-end justify-between gap-4">
<header className="mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4">
<div>
<h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold bg-gradient-to-r from-blue-400 to-emerald-400 bg-clip-text text-transparent">
Cross-Asset Payment Settlement
</h1>
<p className="text-zinc-400 mt-2">
<p className="text-zinc-400 mt-2 text-sm sm:text-base">
Live pathfinding, Soroban simulation, and wallet-signed contract submission.
</p>
</div>
Expand All @@ -201,8 +201,8 @@ export default function CrossAssetPayment() {
)}
</header>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="bg-[#16161a] border border-zinc-800 rounded-2xl p-8 shadow-2xl backdrop-blur-xl">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 lg:gap-8">
<div className="bg-[#16161a] border border-zinc-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-2xl backdrop-blur-xl">
<div className="space-y-6">
<div className="flex items-center gap-4">
<div className="flex-1">
Expand Down Expand Up @@ -291,10 +291,10 @@ export default function CrossAssetPayment() {
</div>
</div>

<div className="space-y-8">
<div className="space-y-4 sm:space-y-6 lg:space-y-8">
{/* Quote Panel */}
{(isLoadingPaths || paths.length > 0) && (
<div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-2xl p-8 shadow-xl animate-in fade-in slide-in-from-bottom-4 duration-500">
<div className="bg-gradient-to-br from-zinc-900 to-black border border-zinc-800 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl animate-in fade-in slide-in-from-bottom-4 duration-500">
<h3 className="text-lg font-bold flex items-center gap-2 mb-6">
<ShieldCheck className="text-emerald-400" />
Available Conversion Paths
Expand Down Expand Up @@ -356,7 +356,7 @@ export default function CrossAssetPayment() {
)}

{status !== 'idle' && (
<div className="bg-[#16161a] border border-blue-900/30 rounded-2xl p-8 shadow-xl relative overflow-hidden">
<div className="bg-[#16161a] border border-blue-900/30 rounded-2xl p-4 sm:p-6 lg:p-8 shadow-xl relative overflow-hidden">
<div className="absolute top-0 right-0 p-4">
<div
className={`px-3 py-1 rounded-full text-xs font-bold uppercase tracking-widest ${status === 'completed' || status === 'confirmed' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-blue-500/20 text-blue-400'}`}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/CustomReportBuilder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,15 +91,15 @@ const CustomReportBuilder = () => {
};

return (
<div className="p-8 max-w-7xl mx-auto space-y-8">
<div className="p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto space-y-6 sm:space-y-8">
<div>
<h1 className="text-3xl font-bold text-gray-900 mb-2">Custom Report Builder</h1>
<h1 className="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">Custom Report Builder</h1>
<p className="text-gray-600">
Select columns and date ranges to preview and export custom payroll data.
</p>
</div>

<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div className="grid grid-cols-1 md:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
{/* Controls Sidebar */}
<div className="md:col-span-1 space-y-6 flex flex-col">
<Card>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/pages/Debugger.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,14 @@ export default function Debugger() {
const { t } = useTranslation();

return (
<div className="flex-1 flex flex-col items-center justify-start p-12 max-w-6xl mx-auto w-full">
<div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
<div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-6xl mx-auto w-full">
<div className="w-full mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between border-b border-hi pb-4 sm:pb-6 lg:pb-8 gap-4">
<div>
<h1 className="text-4xl font-black mb-2 tracking-tight">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-black mb-2 tracking-tight">
{t('debugger.title', { highlight: '' }).replace('{{highlight}}', '')}
<span className="text-accent2"> {t('debugger.titleHighlight')}</span>
</h1>
<p className="text-muted font-mono text-sm tracking-wider uppercase">
<p className="text-muted font-mono text-xs sm:text-sm tracking-wider uppercase">
{t('debugger.subtitle')}
</p>
</div>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/pages/EmployeeEntry.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -322,21 +322,21 @@ export default function EmployeeEntry() {
}

return (
<div className="flex-1 flex flex-col items-center justify-start p-12 max-w-6xl mx-auto w-full">
<div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
<div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-6xl mx-auto w-full">
<div className="w-full mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between border-b border-hi pb-4 sm:pb-6 lg:pb-8 gap-4">
<div>
<h1 className="text-4xl font-black mb-2 tracking-tight">
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-black mb-2 tracking-tight">
{t('employees.title', { highlight: '' }).replace('{{highlight}}', '')}
<span className="text-accent"> {t('employees.titleHighlight')}</span>
</h1>
<p className="text-muted font-mono text-sm tracking-wider uppercase">
<p className="text-muted font-mono text-xs sm:text-sm tracking-wider uppercase">
{t('employees.subtitle')}
</p>
</div>
<button
id="tour-add-employee"
onClick={() => setIsAdding(true)}
className="px-5 py-2.5 bg-accent text-bg font-bold rounded-lg hover:bg-accent/90 transition-all flex items-center gap-2 text-sm shadow-lg shadow-accent/10"
className="px-5 py-2.5 bg-accent text-bg font-bold rounded-lg hover:bg-accent/90 transition-all flex items-center gap-2 text-sm shadow-lg shadow-accent/10 self-start sm:self-auto"
>
<Icon.Plus size="sm" />
{t('employees.addEmployee')}
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function Home() {
<div className="absolute inset-0 bg-accent opacity-5 blur-2xl rounded-full" />
</div>

<h1 className="text-6xl font-black mb-6 tracking-tighter leading-none">
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-black mb-6 tracking-tighter leading-none">
{t('home.titleLine1Prefix')}{' '}
<span className="text-accent">{t('home.titleLine1Highlight')}</span>
<br />
Expand All @@ -22,7 +22,7 @@ export default function Home() {
{t('home.titleLine2Suffix')}
</h1>

<p className="text-xl text-muted max-w-2xl mb-12 leading-relaxed font-medium">
<p className="text-base sm:text-xl text-muted max-w-2xl mb-10 sm:mb-12 leading-relaxed font-medium">
{t('home.tagline')}
</p>

Expand All @@ -45,7 +45,7 @@ export default function Home() {
</button>
</div>

<div className="mt-24 grid grid-cols-1 md:grid-cols-3 gap-6 text-left max-w-6xl w-full">
<div className="mt-16 sm:mt-24 grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 text-left max-w-6xl w-full">
<div className="card glass noise">
<div className="w-12 h-12 rounded-lg bg-accent/10 flex items-center justify-center mb-6 border border-accent/20">
<Icon.CreditCard01 size="lg" className="text-accent" />
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/pages/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@ export default function Settings() {
};

return (
<div className="flex-1 flex flex-col items-center justify-start p-12 max-w-3xl mx-auto w-full">
<div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
<div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-3xl mx-auto w-full">
<div className="w-full mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between border-b border-hi pb-4 sm:pb-6 lg:pb-8 gap-4">
<div>
<h1 className="text-4xl font-black mb-2 tracking-tight">{t('settings.title')}</h1>
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-black mb-2 tracking-tight">{t('settings.title')}</h1>
</div>
</div>

<div className="w-full card glass noise p-8">
<div className="w-full card glass noise p-4 sm:p-6 lg:p-8">
<div className="flex flex-col gap-3">
<label className="block text-xs font-bold uppercase tracking-widest text-muted">
{t('settings.languageLabel')}
Expand All @@ -36,7 +36,7 @@ export default function Settings() {

<Link
to="/settings/webhooks"
className="w-full card glass noise p-8 mt-8 flex items-center justify-between gap-4 hover:border-hi transition-all"
className="w-full card glass noise p-4 sm:p-6 lg:p-8 mt-6 sm:mt-8 flex items-center justify-between gap-4 hover:border-hi transition-all"
>
<div className="flex items-center gap-4">
<div className="w-10 h-10 rounded-xl grid place-items-center bg-accent/10 text-accent">
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/pages/VestingEscrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ export default function VestingEscrow() {
};

return (
<div className="flex-1 flex flex-col items-center justify-start p-12 max-w-6xl mx-auto w-full">
<div className="w-full mb-12 border-b border-hi pb-8">
<div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-6xl mx-auto w-full">
<div className="w-full mb-6 sm:mb-8 lg:mb-12 border-b border-hi pb-4 sm:pb-6 lg:pb-8">
<Heading as="h1" size="lg" weight="bold" addlClassName="mb-2 tracking-tight">
Vesting <span className="text-accent">Escrow</span>
</Heading>
Expand All @@ -100,8 +100,8 @@ export default function VestingEscrow() {
</Text>
</div>

<div className="w-full grid grid-cols-1 lg:grid-cols-5 gap-8">
<div className="lg:col-span-3 space-y-8">
<div className="w-full grid grid-cols-1 lg:grid-cols-5 gap-4 sm:gap-6 lg:gap-8">
<div className="lg:col-span-3 space-y-4 sm:space-y-6 lg:space-y-8">
<VestingGrantList grants={grants} onClaim={handleClaim} />

<TransactionSimulationPanel
Expand Down
14 changes: 7 additions & 7 deletions frontend/src/pages/WebhookSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,10 @@ export default function WebhookSettings() {
};

return (
<div className="flex-1 flex flex-col items-center justify-start p-12 max-w-3xl mx-auto w-full">
<div className="w-full mb-12 flex items-end justify-between border-b border-hi pb-8">
<div className="flex-1 flex flex-col items-center justify-start p-4 sm:p-6 lg:p-12 max-w-3xl mx-auto w-full">
<div className="w-full mb-6 sm:mb-8 lg:mb-12 flex flex-col sm:flex-row sm:items-end sm:justify-between border-b border-hi pb-4 sm:pb-6 lg:pb-8 gap-4">
<div>
<h1 className="text-4xl font-black mb-2 tracking-tight">{t('webhooks.title')}</h1>
<h1 className="text-2xl sm:text-3xl lg:text-4xl font-black mb-2 tracking-tight">{t('webhooks.title')}</h1>
<p className="text-sm text-muted mt-2">{t('webhooks.subtitle')}</p>
</div>
</div>
Expand All @@ -114,7 +114,7 @@ export default function WebhookSettings() {
onSubmit={(event) => {
void handleCreate(event);
}}
className="w-full card glass noise p-8 mb-8"
className="w-full card glass noise p-4 sm:p-6 lg:p-8 mb-8"
>
<h2 className="text-lg font-bold mb-4 flex items-center gap-2">
<Plus className="w-5 h-5" />
Expand Down Expand Up @@ -192,7 +192,7 @@ export default function WebhookSettings() {
</div>
</form>

<div className="w-full card glass noise p-8">
<div className="w-full card glass noise p-4 sm:p-6 lg:p-8">
<h2 className="text-lg font-bold mb-4 flex items-center gap-2">
<Webhook className="w-5 h-5" />
{t('webhooks.listTitle')}
Expand All @@ -219,10 +219,10 @@ export default function WebhookSettings() {
{subscriptions.map((subscription) => (
<li
key={subscription.id}
className="flex items-center justify-between gap-4 bg-black/20 border border-hi rounded-xl p-4"
className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4 bg-black/20 border border-hi rounded-xl p-4"
>
<div className="min-w-0">
<p className="font-mono text-sm truncate">{subscription.url}</p>
<p className="font-mono text-sm break-all sm:truncate">{subscription.url}</p>
<div className="flex flex-wrap gap-1 mt-2">
{subscription.events.map((eventName) => (
<span
Expand Down