Update Mobile View UI

CHANGELOG.md

@@ -2,10 +2,10 @@
 
 ## [Unreleased]
 
-## [1.1.0] - 2026-07-12
+## [1.1.1] - 2026-07-11
 
 ### Changed
-- **Version bump to 1.1.0** - Updated application version across package.json, version.ts, and CHANGELOG.md in preparation for deployment.
+- **Version bump to 1.1.1** - Updated application version across package.json, package-lock.json, version.ts, and CHANGELOG.md in preparation for deployment.
 
 ## [Unreleased] - Dashboard Coherence: Featured Cash Position, 30-Day Cashflow Trend, and Mobile Wallet Mirror
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-app",
   "private": true,
-  "version": "1.1.0",
+  "version": "1.1.1",
   "type": "module",
   "scripts": {
     "dev": "scripts\\dev.cmd",

src/components/ui/chart.tsx

@@ -55,7 +55,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden min-w-0",
           className
         )}
         {...props}

src/features/dashboard/CashPositionCard.tsx

@@ -48,7 +48,7 @@ export function CashPositionCard({ position }: CashPositionCardProps) {
             </p>
             <p
               data-testid="cash-position-total"
-              className={`mt-1 font-mono text-3xl font-bold sm:text-4xl ${
+              className={`mt-1 font-mono text-2xl font-bold sm:text-4xl ${
                 isNegative ? "text-[#D32F2F]" : "text-[#2D2A26]"
               }`}
             >

src/features/dashboard/CashflowTrendCard.tsx

@@ -7,7 +7,6 @@ import {
   CartesianGrid,
   ComposedChart,
   Line,
-  ResponsiveContainer,
   Tooltip,
   XAxis,
   YAxis,
@@ -105,9 +104,8 @@ export function CashflowTrendCard({ days, className }: CashflowTrendCardProps) {
             No cashflow activity in the selected period
           </div>
         ) : (
-          <ChartContainer className="h-[260px] w-full" config={chartConfig}>
-            <ResponsiveContainer width="100%" height="100%">
-              <ComposedChart data={data} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+          <ChartContainer className="h-[260px] w-full min-w-0 sm:aspect-auto [&_.recharts-surface]:!overflow-visible" config={chartConfig}>
+              <ComposedChart data={data} margin={{ top: 10, right: 10, left: -10, bottom: 0 }}>
                 <defs>
                   <linearGradient id="salesFill" x1="0" y1="0" x2="0" y2="1">
                     <stop offset="0%" stopColor="#2E7D32" stopOpacity={0.35} />
@@ -156,7 +154,6 @@ export function CashflowTrendCard({ days, className }: CashflowTrendCardProps) {
                   activeDot={{ r: 4, fill: "#C73E1D" }}
                 />
               </ComposedChart>
-            </ResponsiveContainer>
           </ChartContainer>
         )}
       </CardContent>

src/lib/version.ts

@@ -1,6 +1,6 @@
 // ABOUTME: Single source of truth for the application version number.
 // ABOUTME: Import this file everywhere the version needs to be displayed.
-export const APP_VERSION = "1.1.0";
+export const APP_VERSION = "1.1.1";
 
 export const APP_VERSION_DISPLAY = `V:${APP_VERSION}`;
 export const APP_VERSION_FULL = `Version: ${APP_VERSION}`;

src/pages/Dashboard.tsx

@@ -76,7 +76,7 @@ export function Dashboard() {
 
   return (
     <Layout>
-      <div className="space-y-6">
+      <div className="space-y-6 overflow-x-hidden">
         {/* Header */}
         <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
           <div>
@@ -87,19 +87,19 @@ export function Dashboard() {
               Overview of your business cashflow
             </p>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex flex-wrap items-center gap-2">
             <input
               type="date"
               value={dateRange.from}
               onChange={(e) => setDateRange((p) => ({ ...p, from: e.target.value }))}
-              className="rounded-lg border border-[#E8E0D8] bg-white px-3 py-2 text-sm text-[#2D2A26]"
+              className="min-w-0 flex-1 rounded-lg border border-[#E8E0D8] bg-white px-3 py-2 text-sm text-[#2D2A26] sm:flex-none"
             />
             <span className="text-[#8D8A87]">to</span>
             <input
               type="date"
               value={dateRange.to}
               onChange={(e) => setDateRange((p) => ({ ...p, to: e.target.value }))}
-              className="rounded-lg border border-[#E8E0D8] bg-white px-3 py-2 text-sm text-[#2D2A26]"
+              className="min-w-0 flex-1 rounded-lg border border-[#E8E0D8] bg-white px-3 py-2 text-sm text-[#2D2A26] sm:flex-none"
             />
           </div>
         </div>