christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 13:15:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: full mobile responsive optimization for Android/iPhone

Browse Source 
- Add bottom navigation bar (6 tabs) for mobile, hidden on desktop
- Compact header with smaller logo and reduced padding on mobile
- Collapsible filter bar with active filter count badge on mobile
- Bottom-sheet style dropdowns with overlay and larger touch targets
- Fullscreen AI chat on mobile, floating window on desktop
- Responsive dashboard cards with always-visible expand button
- Smaller table text and touch-friendly scroll on all data grids
- iPhone safe-area support and thinner scrollbars on mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-02-16 09:27:46 +01:00
co-authored by Claude Opus 4.6
parent fecc7264c8
commit 9895545910
11 changed files with 172 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/ForecastView.tsx
+6 -6
View File
@@ -414,8 +414,8 @@ const ForecastView: React.FC<ForecastViewProps> = ({
};
return (
<div className="flex flex-col gap-6 animate-fade-in p-6 h-full overflow-hidden">
<div className="flex flex-col xl:flex-row gap-6 h-[400px] shrink-0">
<div className="flex flex-col gap-4 md:gap-6 animate-fade-in p-3 md:p-6 h-full overflow-hidden">
<div className="flex flex-col xl:flex-row gap-4 md:gap-6 h-auto xl:h-[400px] shrink-0">
<div className="flex flex-col gap-4 min-w-[300px] xl:w-[25%]">
<div className="bg-slate-900 border border-white/5 p-4 rounded-xl shadow-lg flex-1 flex flex-col justify-center">
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-1">Annual Forecast Total</span>
@@ -478,8 +478,8 @@ const ForecastView: React.FC<ForecastViewProps> = ({
</div>
<div className="bg-slate-900 border border-white/10 rounded-2xl overflow-hidden shadow-2xl flex-1 flex flex-col min-h-0 relative">
<div className="p-4 border-b border-white/5 flex flex-col md:flex-row justify-between gap-4 bg-slate-800/20 shrink-0">
<h3 className="text-lg font-bold text-white uppercase tracking-tight">
<div className="p-2 md:p-4 border-b border-white/5 flex flex-col md:flex-row justify-between gap-2 md:gap-4 bg-slate-800/20 shrink-0">
<h3 className="text-sm md:text-lg font-bold text-white uppercase tracking-tight">
Product Performance Comparison <span className="text-xs text-slate-500 font-normal normal-case ml-2">(v2.5 optimized)</span>
</h3>
<div className="flex items-center gap-4">
@@ -536,8 +536,8 @@ const ForecastView: React.FC<ForecastViewProps> = ({
</div>
</div>
<div className="flex-1 overflow-auto min-h-0 custom-scrollbar relative">
<table className="w-full text-left border-collapse relative">
<div className="flex-1 overflow-auto min-h-0 custom-scrollbar scroll-touch relative">
<table className="w-full text-left border-collapse relative text-[10px] md:text-sm">
<thead className="sticky top-0 z-20 bg-slate-950 shadow-sm text-[10px] font-black text-slate-500 uppercase tracking-wider">
<tr>
<th className="px-6 py-4 text-left w-[30%]">