Skip to content

fix: mobile responsiveness and touch optimizations (#28) #34

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

Closed
debojyoti10CC wants to merge 1 commit into from
Closed

fix: mobile responsiveness and touch optimizations (#28) #34

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
85 changes: 78 additions & 7 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,38 @@
@layer base {
html {
scroll-behavior: smooth;
/* Prevent horizontal overflow on mobile */
overflow-x: hidden;
}

body {
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Prevent horizontal scroll */
overflow-x: hidden;
/* Better overscroll on mobile */
overscroll-behavior-y: contain;
/* Remove tap highlight color on mobile */
-webkit-tap-highlight-color: transparent;
}

/* Touch-friendly interactive elements */
button, a, [role="button"] {
min-height: 44px;
min-width: 44px;
touch-action: manipulation;
}

/* Exception for inline/icon elements */
button.inline-btn {
min-height: unset;
min-width: unset;
}

/* Modern Scrollbar */
::-webkit-scrollbar {
width: 6px;
width: 4px;
}

::-webkit-scrollbar-track {
Expand All @@ -27,9 +48,11 @@

::-webkit-scrollbar-thumb {
border-radius: 3px;
background: rgba(148, 163, 184, 0.3);
}

::-webkit-scrollbar-thumb:hover {
background: rgba(148, 163, 184, 0.5);
}
}

Expand Down Expand Up @@ -256,28 +279,34 @@
@layer utilities {
/* Modern Spacing System */
.container-modern {
@apply max-w-7xl mx-auto px-6 sm:px-8 lg:px-12;
@apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-12;
}

.section-modern {
@apply py-20 md:py-28 lg:py-32;
@apply py-12 md:py-20 lg:py-28;
}

.section-compact {
@apply py-12 md:py-16;
@apply py-8 md:py-12 lg:py-16;
}

/* Modern Grid Systems */
.grid-modern-2 {
@apply grid grid-cols-1 md:grid-cols-2 gap-8;
@apply grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-8;
}

.grid-modern-3 {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
@apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8;
}

.grid-modern-4 {
@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
@apply grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-6;
}

/* Mobile-first safe area padding */
.safe-area-x {
padding-left: max(1rem, env(safe-area-inset-left));
padding-right: max(1rem, env(safe-area-inset-right));
}

/* Modern Backgrounds */
Expand Down Expand Up @@ -326,6 +355,16 @@
.responsive-padding {
@apply px-4 sm:px-6 md:px-8;
}

/* Mobile-optimized card */
.card-mobile {
@apply rounded-2xl p-4 sm:p-6 md:p-8;
}

/* Mobile table wrapper */
.table-scroll {
@apply overflow-x-auto -mx-4 px-4;
}
}

/* Modern Mobile Menu */
Expand All @@ -341,3 +380,35 @@
.mobile-menu-modern.open {
@apply translate-x-0 opacity-100;
}

/* Mobile Modal improvements */
.modal-mobile {
@apply fixed inset-0 bg-black/70 flex items-end sm:items-center justify-center z-50 p-0 sm:p-4;
}

.modal-content-mobile {
@apply bg-white rounded-t-3xl sm:rounded-2xl w-full sm:max-w-md p-6 pb-8 sm:pb-6;
@apply max-h-[90vh] overflow-y-auto;
}

/* Tier filter scroll container */
.filter-scroll {
@apply flex gap-2 overflow-x-auto pb-2;
scrollbar-width: none;
-ms-overflow-style: none;
}

.filter-scroll::-webkit-scrollbar {
display: none;
}

/* Stats grid that works better on small phones */
@media (max-width: 360px) {
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-2xl {
font-size: 1.25rem;
}
}
6 changes: 3 additions & 3 deletions src/app/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import ErrorBoundary from "../components/ErrorBoundary";
import Footer from "../components/Footer";

const inter = Inter({ subsets: ["latin"] });
const montserrat = Montserrat({
const montserrat = Montserrat({
subsets: ["latin"],
display: 'swap',
variable: '--font-montserrat'
Expand Down Expand Up @@ -36,8 +36,8 @@ export const metadata = {

export default function RootLayout({ children }) {
return (
<html lang="en" className={`${inter.className} ${montserrat.variable}`}>
<body className="bg-black min-h-screen text-white antialiased flex flex-col">
<html lang="en" className={`${inter.className} ${montserrat.variable}`} suppressHydrationWarning>
<body className="bg-black min-h-screen text-white antialiased flex flex-col" suppressHydrationWarning>
<ErrorBoundary>
<ToastProvider>
<WalletProvider>
Expand Down
95 changes: 44 additions & 51 deletions src/app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -745,14 +745,13 @@ export default function RiskScoringApp() {
</div>

{/* Analysis Mode Toggle */}
<div className="flex items-center justify-center space-x-4 mb-12 flex-wrap">
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
<button
onClick={() => setAnalysisMode("enhanced")}
className={`px-6 py-4 rounded-xl transition-all duration-300 text-sm font-semibold flex items-center ${
analysisMode === "enhanced"
className={`w-full sm:w-auto justify-center px-6 py-4 rounded-xl transition-all duration-300 text-sm font-semibold flex items-center ${analysisMode === "enhanced"
? "bg-gradient-to-r from-emerald-500/20 to-blue-500/20 text-emerald-400 border border-emerald-500/30"
: "bg-slate-800/50 text-slate-400 border border-slate-700/50 hover:bg-slate-700/50 hover:text-white"
}`}
}`}
>
<svg
className="w-5 h-5 mr-2"
Expand All @@ -771,11 +770,10 @@ export default function RiskScoringApp() {
</button>
<button
onClick={() => setAnalysisMode("auto")}
className={`px-6 py-4 rounded-xl transition-all duration-300 text-sm font-semibold flex items-center ${
analysisMode === "auto"
className={`w-full sm:w-auto justify-center px-6 py-4 rounded-xl transition-all duration-300 text-sm font-semibold flex items-center ${analysisMode === "auto"
? "bg-gradient-to-r from-violet-500/20 to-purple-500/20 text-violet-400 border border-violet-500/30"
: "bg-slate-800/50 text-slate-400 border border-slate-700/50 hover:bg-slate-700/50 hover:text-white"
}`}
}`}
>
<svg
className="w-5 h-5 mr-2"
Expand All @@ -794,11 +792,10 @@ export default function RiskScoringApp() {
</button>
<button
onClick={() => setAnalysisMode("manual")}
className={`px-6 py-4 rounded-xl transition-all duration-300 text-sm font-semibold flex items-center ${
analysisMode === "manual"
className={`w-full sm:w-auto justify-center px-6 py-4 rounded-xl transition-all duration-300 text-sm font-semibold flex items-center ${analysisMode === "manual"
? "bg-gradient-to-r from-violet-500/20 to-purple-500/20 text-violet-400 border border-violet-500/30"
: "bg-slate-800/50 text-slate-400 border border-slate-700/50 hover:bg-slate-700/50 hover:text-white"
}`}
}`}
>
<svg
className="w-5 h-5 mr-2"
Expand Down Expand Up @@ -919,13 +916,12 @@ export default function RiskScoringApp() {
<div>
<span className="text-white/70">Confidence:</span>
<span
className={`ml-2 font-semibold ${
autoAnalysisResult.confidence === "High"
className={`ml-2 font-semibold ${autoAnalysisResult.confidence === "High"
? "text-emerald-400"
: autoAnalysisResult.confidence === "Medium"
? "text-amber-400"
: "text-red-400"
}`}
? "text-amber-400"
: "text-red-400"
}`}
>
{autoAnalysisResult.confidence}
</span>
Expand Down Expand Up @@ -962,29 +958,28 @@ export default function RiskScoringApp() {
</p>
{autoAnalysisResult.analysis
.contractStatus && (
<div className="mt-2 text-xs">
<span className="text-purple-300">
Status:{" "}
</span>
<span
className={`capitalize ${
autoAnalysisResult.analysis
.contractStatus === "active"
? "text-emerald-400"
: autoAnalysisResult.analysis
<div className="mt-2 text-xs">
<span className="text-purple-300">
Status:{" "}
</span>
<span
className={`capitalize ${autoAnalysisResult.analysis
.contractStatus === "active"
? "text-emerald-400"
: autoAnalysisResult.analysis
.contractStatus ===
"new_or_inactive"
? "text-amber-400"
: "text-gray-400"
}`}
>
{autoAnalysisResult.analysis.contractStatus.replace(
"_",
" "
)}
</span>
</div>
)}
"new_or_inactive"
? "text-amber-400"
: "text-gray-400"
}`}
>
{autoAnalysisResult.analysis.contractStatus.replace(
"_",
" "
)}
</span>
</div>
)}
</div>
)}

Expand Down Expand Up @@ -1083,8 +1078,8 @@ export default function RiskScoringApp() {
{riskScore <= 30
? "Low Risk"
: riskScore <= 70
? "Medium Risk"
: "High Risk"}
? "Medium Risk"
: "High Risk"}
</div>
<div className="risk-bar">
<div
Expand Down Expand Up @@ -1140,8 +1135,8 @@ export default function RiskScoringApp() {
{analysisMode === "auto" && autoAnalysisResult
? `Automatically calculated score: ${riskScore} (${autoAnalysisResult.confidence} confidence)`
: analysisMode === "manual"
? "Manual entry - your risk score will be saved to the blockchain"
: "Complete analysis to save your risk score"}
? "Manual entry - your risk score will be saved to the blockchain"
: "Complete analysis to save your risk score"}
</p>
</div>

Expand Down Expand Up @@ -1261,13 +1256,12 @@ export default function RiskScoringApp() {
step="0.01"
value={collateralAmount}
onChange={handleCollateralChange}
className={`input-modern ${
collateralAmount &&
(isNaN(parseFloat(collateralAmount)) ||
parseFloat(collateralAmount) < 0)
className={`input-modern ${collateralAmount &&
(isNaN(parseFloat(collateralAmount)) ||
parseFloat(collateralAmount) < 0)
? "border-red-500/50 focus:border-red-500"
: ""
}`}
}`}
placeholder="0.00"
/>
</div>
Expand All @@ -1289,13 +1283,12 @@ export default function RiskScoringApp() {
</div>
<div className="flex items-center justify-center space-x-4 text-sm">
<span
className={`px-3 py-1 rounded-full font-medium ${
getTier(riskScore).name === "low"
className={`px-3 py-1 rounded-full font-medium ${getTier(riskScore).name === "low"
? "bg-emerald-500/20 text-emerald-400"
: getTier(riskScore).name === "medium"
? "bg-amber-500/20 text-amber-400"
: "bg-red-500/20 text-red-400"
}`}
? "bg-amber-500/20 text-amber-400"
: "bg-red-500/20 text-red-400"
}`}
>
tier = {getTier(riskScore).name}
</span>
Expand Down
Loading